[React Native] Firebase Authentication
By: Gus Jul
Tags: React, React Native, Firebase, React Native Firebase, Mobile App Development

⛔ Coding Area

Setelah semua konfigurasi sudah siap, selanjutnya kita akan lanjut untuk coding untuk login, sign up dan juga logout. pastikan kalian sudah menginstal react-native-navigation karena kita akan menggunakannya untuk berpindah halaman ke halaman lain. Untuk dokumentasi react-navigation dapat dilihat disini. Berikut merupakan susunan projek kita nantinya, yaitu terdapat App.js kemudian folder “component” yang berisi Login.js, Signup.js dan Homescreen.js

projek folder

▶ Membuat Stack Screen

Pertama kita buat stack screen dimana akan menjadi navigasi antar halaman kita, selain itu penting diketahui bahwa kita harus membuat komponen seperti gambar projek diatas. Berikut merupakan file App.js yang kita jadikan sebagai stackscreen

▶ Membuat Komponen Signup, Login dan Homescreen

Ikuti langkah-langkah dibawah ini

🟢 Sign Up (Register)

Setelah itu kita lanjutkan untuk develop signup.js dimana kita akan membuat tampilan sebagai berikut, dengan menginputkan program seperti dibawah ini

import React from 'react';

import { View, Text, StyleSheet, TextInput, Button, Alert, ActivityIndicator } from 'react-native';

import auth from '@react-native-firebase/auth'; class Signup extends React.Component {

constructor() {

super();



this.state = {

displayName: '',

email: '',

password: '',

isLoading: false

}} updateInputVal = (val, prop) => {

const state = this.state;

state[prop] = val;

this.setState(state);

} render() {

if (this.state.isLoading) {

return (

<View style={styles.preloader}>

<ActivityIndicator size="large" color="#9E9E9E" />

<Text>Succes creating account</Text>

<Text>Returning you to login screen..</Text>

</View>

)} return (

<View style={styles.container}>

<TextInput

style={styles.inputStyle}

placeholder="Name"

value={this.state.displayName}

onChangeText={(val) => this.updateInputVal(val, 'displayName')}

/>

<TextInput

style={styles.inputStyle}

placeholder="Email"

value={this.state.email}

onChangeText={(val) => this.updateInputVal(val, 'email')}

/>

<TextInput

style={styles.inputStyle}

placeholder="Password"

value={this.state.password}

onChangeText={(val) => this.updateInputVal(val, 'password')}

maxLength={15}

secureTextEntry={true}

/>

<Button

color="lightskyblue"

title="Signup"

onPress={() => this.registerUser()}

/>

<Text

style={styles.loginText}

onPress={() => this.props.navigation.navigate('Login')}>

Already Registered? Click here to login

</Text>

</View>

);}} const styles = StyleSheet.create({

container: {

flex: 1,

display: "flex",

flexDirection: "column",

justifyContent: "center",

padding: 35,

backgroundColor: '#fff'

}, inputStyle: {

width: '100%',

marginBottom: 15,

paddingBottom: 15,

alignSelf: "center",

borderColor: "#ccc",

borderBottomWidth: 1

}, loginText: {

color: 'lightskyblue',

marginTop: 25,

textAlign: 'center'

}, preloader: {

left: 0,

right: 0,

top: 0,

bottom: 0,

position: 'absolute',

alignItems: 'center',

justifyContent: 'center',

backgroundColor: '#fff'

}

});

export default Signup;

Untuk signup sendiri kita memerlukan fungsi untuk dapat terdaftar sebagai pengguna pada firebase dengan menambahkan function berikut :

registerUser = () => {

if (this.state.email === '' && this.state.password === '')

{

Alert.alert('Enter details to signup!')

} else {

this.setState({

isLoading: true,

})



auth()

.createUserWithEmailAndPassword(this.state.email,

this.state.password)

.then((res) => {

res.user.updateProfile({

displayName: this.state.displayName

})

console.log('User registered successfully!')

this.setState({

isLoading: false,

displayName: '',

email: '',

password: ''

})

this.props.navigation.navigate('Login')

}) .catch(error => this.setState({ errorMessage: error.message }))

}}

Hal tersebut akan dapat membuat kita mendaftar dan terautentifikasi pada aplikasi yang dibuat

🟢 LogOut

Setelah itu kita akan mendevelop login pada login.js, setelah membuat akun kita arahkan kembali ke login screen setelah itu user harus login menggunakan akun yang sudah didaftarkan tadi berikut ini perintah login.js

import React, { Component } from 'react';

import { StyleSheet, Text, View, TextInput, Button, Alert, ActivityIndicator } from 'react-native';

import auth from '@react-native-firebase/auth'; export default class Login extends Component {

constructor() {

super(); this.state = {

email: '',

password: '',

isLoading: false

}} updateInputVal = (val, prop) => {

const state = this.state;

state[prop] = val;

this.setState(state);

} render() {

if (this.state.isLoading) {

return (

<View style={styles.preloader}>

<ActivityIndicator size="large" color="#9E9E9E" />

<Text>Loginning...</Text>

</View>

)}



return (

<View style={styles.container}>

<TextInput

style={styles.inputStyle}

placeholder="Email"

value={this.state.email}

onChangeText={(val) => this.updateInputVal(val, 'email')}

/>



<TextInput

style={styles.inputStyle}

placeholder="Password"

value={this.state.password}

onChangeText={(val) => this.updateInputVal(val, 'password')}

maxLength={15}

secureTextEntry={true}

/> <Button

color="lightskyblue"

title="Signin"

onPress={() => this.userLogin()}

/>



<Text

style={styles.loginText}

onPress={() => this.props.navigation.navigate('Signup')}>

Don't have account? Click here to signup

</Text>

</View>

);}} const styles = StyleSheet.create({

container: {

flex: 1,

display: "flex",

flexDirection: "column",

justifyContent: "center",

padding: 35,

backgroundColor: '#fff'

}, inputStyle: {

width: '100%',

marginBottom: 15,

paddingBottom: 15,

alignSelf: "center",

borderColor: "#ccc",

borderBottomWidth: 1

},



loginText: {

color: 'lightskyblue',

marginTop: 25,

textAlign: 'center'

}, preloader: {

left: 0,

right: 0,

top: 0,

bottom: 0,

position: 'absolute',

alignItems: 'center',

justifyContent: 'center',

backgroundColor: '#fff'

}});

Selanjutnya kita harus menambahkan fungsi login agar dapat masuk pada aplikasi yang kita gunakan, dengan perintah berikut :

userLogin = () => {

if (this.state.email === '' && this.state.password === ''

{Alert.alert('Enter details to signin!')

} else {

this.setState({

isLoading: true

}) auth()

.signInWithEmailAndPassword(this.state.email, this.state.password)

.then((res) => {

console.log(res)

console.log('User logged-in successfully!')

this.setState({

isLoading: false,

email: '',

password: ''

}) this.props.navigation.navigate('Home')

})

.catch(error => this.setState({ errorMessage: error.message }))

}}

Dengan itu kita dapat login pada aplikasi kita menggunakan akun yang sudah dibuat tadi pada halaman signup

🟢 Logout

Dan yang terakhir adalah log out, logout disini adalah fungsi untuk user keluar dari sistem. fungsi logout lebih simpel daripada fungsi lainnya. Berikut merupakan perintah pada homescreen.js

import React, { Component } from 'react'; import { StyleSheet, View, Text, Button } from 'react-native'; import auth from '@react-native-firebase/auth'; class Homescreen extends Component {

constructor() {

super();

this.state = {

uid: ''

}

} render() {

this.state = {

displayName: auth().currentUser.displayName,

uid: auth().currentUser.uid

} return (

<View style={styles.container}>

<Text style={styles.textStyle}>

Hello, {this.state.displayName}

</Text>



<Button

color="lightskyblue"

title="Logout"

onPress={() => this.signOut()}

/>



</View>

);}} const styles = StyleSheet.create({

container: {

flex: 1,

display: "flex",

justifyContent: 'center',

alignItems: 'center',

padding: 35,

backgroundColor: '#fff'

},

textStyle: {

fontSize: 15,

marginBottom: 20

}

}); export default Homescreen;

Tambahkan function untuk logout, agar user dapat keluar dengan perintah berikut :

signOut = () => {

auth().signOut().then(() => {

this.props.navigation.navigate('Signup')

})

.catch(error => this.setState({ errorMessage: error.message }))

}

Horee, sekarang anda sudah membuat semua komponen dan dapat dites untuk firebase.

📱 Testing

Sekarang saatnya kita melakukan testing apakah sudah semua fungsi berjalan baik atau tidak. Silahkan buka firebase konsole pada projek yang telah dibuat tadi

Signup Testing

signup testing

Login Testing

login testing

Logout Testing

Logout testing

Yey kita sudah berhasil menghubungkan firebase dengan react-native dan juga membuat firebase authentication menggunakan email pada halaman signup, login dan juga homescreen untuk logoutnya.