React Native Tutorial : Cara Membuat Sig Up dan Log In React Native | AMTech

Hallo Penggemar Koding Indonesia. Berjumpa kembali ditutorial membuat aplikasi android menggunakan React Native. Pada tutorial kali ini kita akan membuat aplikasi android menggunakan React Native Expo yaitu Sign Up & Log in (User Authentication) menggunakan firebase. Untuk mempersingkat waktu mari kita langsung saja memulai membuat projectnya.

Step 1: Membuat Akun Firebase

Pertama kali yang harus dilakukan tentunya membuat akun Firebase, tetapi untuk yang memiliki email Gmail maka tidak perlu membuat akun, tinggal login saja menggunakan Email dan Password dari akun Gmail yang dimiliki disini.

Step 2: Membuat Project Pada Firebase

Pertama pilih Link “GO TO CONSOLE” yang terdapat pada bagian kanan atas sebelah poto profil dari Email Gmail kita.

Setelah itu pilih “Tambahkan Proyek”

Setelah menambahkan proyek, selanjutnya silahkan beri nama untuk proyek firebase yang akan kita buat seperti di bawah ini:

Setelah itu maka proyek baru yang telah dibuat akan segera terbuka. Setelah halaman proyek selesai terbuka, selanjutnya silahkan pilih menu Authentication > Metode Masuk > Email/Sandi dan aktifkan metode masuk menggunakan email dan sandi. Lebih jelasnya silahkan perhatikan dua gambar di bawah ini :

Selanjutnya kita akan membuat akun Expo XDE.

Step 3: Membuat Aplikasi React Native Menggunakan Expo XDE

Pada tahap kali ini kita akan membuat Aplikasi React Native Menggunakan Expo XDE menggunakan Template Tab Navigation. Jika belum memiliki aplikasi dari Expo XDE silahkan download disini.

Catatan : Pada bagian Expo XDE Pilih sesuai dengan Sistem Operasi yang digunakan maka secara otomatis akan mengunduh aplikasi Expo XDE yang sesuai dengan Sistem Operasi yang kita pilih. Setelah itu silahkan install.

Selanjutnya buka aplikasi Expo XDE maka akan muncul halaman Login seperti di bawah ini :

Jika belum memiliki akun Expo silahkan Melakukan registrasi atau bisa registrasi menggunakan akun github. Setelah melakukan Login maka akan muncul halaman seperti berikut ini:

Pada Gambar di atas silahkan pilih Create New Project dan beri nama sesuai yang kalian inginkan serta pilih pada bagian template yaitu Tab Navigation. Perhatikan gambar di bawah ini:

Setelah itu tunggu hingga project berhasil dibuat. Setelah project berhasil dibuat maka pada Expo XDE akan seperti berikut ini :

Untuk menjalankan bisa menggunakan aplikasi Expo yang dipasang pada smartphone Android maupun Iphone dengan cara pilih “Share” pada bagian kanan atas, maka akan muncul Barcode dan scan menggunakan aplikasi Expo pada Smartphone.

Atau bisa juga menggunakan Genymotion dengan cara buka Genymotion dan jalankan salah satu Device Emulator Android, setelah emulator berjalan pada bagian aplikasi Expo XDE pilih (Device > Open on Android)

Setelah dijalankan maka hasilnya akan seperti ini untuk pertama kali :

Selanjutnya kita akan belajar membuat kode program.

Step 4: Membuat Kode Program

Selanjutnya mari kita mulai membuat programnya. Silahkan buka project yang telah kita buat menggunakan Teks Editor (Visual Studio Code, Atom, Sublime, Dll).

Setelah project terbuka selanjutnya silahkan buat File baru pada folder Screens dengan nama LoginScreen.js

Setelah itu silahkan buka Terminal atau Cmd, arahkan ke project yang baru kita buat, atau bisa menggunakan Integrated Terminal yang terdapat pada Visual Studio Code dengan cara pilih tab View > Integrated Terminal atau juga bisa dengan menekan Alt + F12 maka terminal pada Visual Studio Code akan terbuka dibagian bawah.

Tampilan Terminal pada Visual Studio Code

Setelah terminal atau cmd terbuka, silahkan tuliskan perintah berikut di terminal :

npm install firebase

dan

npm instal react-native-elements

Kedua perintah di atas diperlukan karena kita akan menggunakan Firebase dan juga React Native Elements untuk memperindah view aplikasi kita.

Setelah itu silahkan tuliskan program berikut pada file LoginScreen.js yang sebelumnya telah kita buat :

import React from 'react'; import {View, Button, Text} from 'react-native'; import * as firebase from 'firebase'; import MianTabNavigator from '../navigation/MainTabNavigator'; import {StacNavigator} from 'react-native'; import { FormLabel, FormInput } from 'react-native-elements'; // Dibawah Ini Merupakan inisialisasi Firebase dari Website firebase.initializeApp({ apiKey: "AIzaSyAQgqLhZRxSmMJhFH12TIaJUlySgDEVJhw", authDomain: "new-project-a1fa0.firebaseapp.com", databaseURL: "https://new-project-a1fa0.firebaseio.com", projectId: "new-project-a1fa0", storageBucket: "new-project-a1fa0.appspot.com", messagingSenderId: "113590570135" }); export default class login extends React.Component{ constructor(props){ super(props); this.state = {email:'', password:'', error:'', loading:false}; } onLoginPress(){ this.setState({error:'', loading:true}); const{email, password} = this.state; firebase.auth().signInWithEmailAndPassword(email, password) .then(() => { this.setState({error:'', loading:false}); this.props.navigation.navigate('Main'); }) .catch(() => { this.setState({error:'Authentication Failed', loading:false}); }) } onSignUpPress(){ this.setState({error:'', loading:true}); const{email, password} = this.state; firebase.auth().createUserWithEmailAndPassword(email, password) .then(() => { this.setState({error:'', loading:false}); this.props.navigation.navigate('Main'); }) .catch(() => { this.setState({error:'Authentication Failed', loading:false}); }) } renderButtonOrLoading(){ if (this.state.loading) { return <text> Loading </Text> } return <view> <button onPress={this.onLoginPress.bind(this)} title= 'Login'/> <button onPress={this.onSignUpPress.bind(this)} title='Sign Up'/> </View> } render(){ return( <view> <formlabel>Email</FormLabel> <forminput value = {this.state.email} onChangeText={email => this.setState({email})} placeholder='email@domain.com' /> <formlabel>Password</FormLabel> <forminput value = {this.state.password} secureTextEntry placeholder='*********' onChangeText={password => this.setState({password})}/> <text>{this.state.error}</Text> {this.renderButtonOrLoading()} </View> ) } }

 

Nilai dari “firebase.initializeApp” didapatkan dari Project Firebase yang sebelumnya kita buat di Console Firebase. silahkan perhatikan gambar berikut:


Setelah dipilih seperti yang ditunjuk pada gambar di atas, maka akan keluar Pop-Up seperti gambar di bawah ini, setelah itu silahkan Copy dan simpan di bagian LoginScreen.js sesuai dengan contoh program sebelumnya di atas.

Setelah itu pada bagian RootNavigator.js tambahkan Variabel Login untuk membuka Screen Login, sehingga programnya menjadi seperti berikut:

import { Notifications } from 'expo'; import React from 'react'; import { StackNavigator } from 'react-navigation'; import MainTabNavigator from './MainTabNavigator'; import registerForPushNotificationsAsync from '../api/registerForPushNotificationsAsync'; import Login from '../screens/LoginScreen'; const RootStackNavigator = StackNavigator( { Login: { screen: Login, }, Main: { screen: MainTabNavigator, }, }, { navigationOptions: () => ({ headerTitleStyle: { fontWeight: 'normal', }, }), } ); export default class RootNavigator extends React.Component { componentDidMount() { this._notificationSubscription = this._registerForPushNotifications(); } componentWillUnmount() { this._notificationSubscription && this._notificationSubscription.remove(); } render() { return <rootstacknavigator /> } _registerForPushNotifications() { // Send our push token over to our backend so we can receive notifications // You can comment the following line out if you want to stop receiving // a notification every time you open the app. Check out the source // for this function in api/registerForPushNotificationsAsync.js registerForPushNotificationsAsync(); // Watch for incoming notifications this._notificationSubscription = Notifications.addListener( this._handleNotification ); } _handleNotification = ({ origin, data }) => { console.log( `Push notification ${origin} with data: ${JSON.stringify(data)}` ); }; }

 

Baris yang ditambahkan adalah sebagai berikut :


Jika sudah maka aplikasi kita telah selesai, silahkan jalankan programnya maka akan diarahkan ke Menu Login :
Silahkan lakukan Sign Up (Masukkan Email dan Password).  Jika kita perhatikan pada Console Firebase di website, pada bagian Authentication akan bertambah Email sesuai yang kita masukan saat Sign Up serta Password yang telah terenkripsi.
Setelah itu Lakukan Login dengan email dan Password yang tadi kita buat. Jika berhasil dan sesuai, kita akan diarahkan ke Halaman Home/Main sesuai saat pertama kita coba Run Aplikasinya.

Demikin tutorial mengenai Sign Up & Login Firebase User Authentication .

sumber:
http://www.kodingindonesia.com/react-native-expo-sign-up-login-user-authentication-menggunakan-firebase/