In this tutorial you will learn about the React Native Login and Sign Up with Firebase Auth Tutorial and its application with practical example.
In this React Native Login and Sign Up with Firebase Auth Tutorial I will show you how to create custom react native login and sign up with firebase auth. In this tutorial you learn to create login and registration functionality in react native with firebase authentication. In this article I will share example to create registration and login in react native using firebase authentication.
Table Of Contents−
React Native Login and Sign Up with Firebase Auth Tutorial
In this step by step tutorial I will demonstrate you with example how to create react native Login and Sign Up with Firebase Auth . Please follow the instruction given below:
- Prerequisite
- Install React Native Project
- Firebase Account Setup
- Set up Firebase in React Native
- Initiate Navigation in React Native
- Register with Email and Password
- Login User with email and password
- Logout from Firebase via React Native
- Conclusion
Prerequisite
|
1 2 3 4 5 6 7 8 9 10 |
NPM Node IDE Xcode Firebase Android Studio React Native React Native CLI React Native Firebase Package Terminal (macOS, Linux and Windows) |
Install React Native Project
In this step we will install fresh react native project using following command:
|
1 |
sudo npm i -g create-react-native-app |
Install React Native app using following command.
|
1 |
create-react-native-app rnFirebaseAuth |
Now, go to Y to install expo tool and run command to switch into the project directory.
|
1 |
cd rnFirebaseAuth |
Firebase Account Setup
Creating Firebase account from Firebase dashboard. Click on “Create a project” button and create a brand new Firebase authentication project. We will require firebase configuration details to make the connection between react native and Firebase database. Click on “Authentication” the users tab will contain the list of users we will create via react native’s front-end.
Set up Firebase in React Native
Now we have to install firebase in our react native application using following command
|
1 |
npm install firebase --save |
after that, run this command to create a database folder and firebase.js file.
|
1 2 3 |
mkdir database touch database/firebase.js |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// database/firebaseDb.js import * as firebase from 'firebase'; const firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "reactnativefirebase-00000.firebaseapp.com", databaseURL: "https://reactnativefirebase-00000.firebaseio.com", projectId: "reactnativefirebase-00000", storageBucket: "reactnativefirebase-00000.appspot.com", messagingSenderId: "000000000000000", appId: "1:000000000000000:web:000000000000000" }; firebase.initializeApp(firebaseConfig); export default firebase; |
Initiate Navigation in React Native
|
1 2 3 4 5 |
mkdir components touch components/signup.js touch components/login.js touch components/dashboard.js |
Next, include the following code in the App.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
// App.js import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import Login from './components/login'; import Signup from './components/signup'; import Dashboard from './components/dashboard'; const Stack = createStackNavigator(); function MyStack() { return ( <Stack.Navigator initialRouteName="Signup" screenOptions={{ headerTitleAlign: 'center', headerStyle: { backgroundColor: '#3740FE', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }}> <Stack.Screen name="Signup" component={Signup} options={{ title: 'Signup' }} /> <Stack.Screen name="Login" component={Login} options={ {title: 'Login'}, {headerLeft: null} } /> <Stack.Screen name="Dashboard" component={Dashboard} options={ { title: 'Dashboard' }, {headerLeft: null} } /> </Stack.Navigator> ); } export default function App() { return ( <NavigationContainer> <MyStack /> </NavigationContainer> ); } |
Register with Email and Password
Put the following code in the components/signup.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
// components/signup.js import React, { Component } from 'react'; import { StyleSheet, Text, View, TextInput, Button, Alert, ActivityIndicator } from 'react-native'; import firebase from '../database/firebase'; export default class Signup extends Component { constructor() { super(); this.state = { displayName: '', email: '', password: '', isLoading: false } } updateInputVal = (val, prop) => { const state = this.state; state[prop] = val; this.setState(state); } registerUser = () => { if(this.state.email === '' && this.state.password === '') { Alert.alert('Enter details to signup!') } else { this.setState({ isLoading: true, }) firebase .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 })) } } render() { if(this.state.isLoading){ return( <View style={styles.preloader}> <ActivityIndicator size="large" color="#9E9E9E"/> </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="#3740FE" 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: '#3740FE', marginTop: 25, textAlign: 'center' }, preloader: { left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' } }); |
Login User with email and password
Put the following code in the login.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
// components/login.js import React, { Component } from 'react'; import { StyleSheet, Text, View, TextInput, Button, Alert, ActivityIndicator } from 'react-native'; import firebase from '../database/firebase'; 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); } userLogin = () => { if(this.state.email === '' && this.state.password === '') { Alert.alert('Enter details to signin!') } else { this.setState({ isLoading: true, }) firebase .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('Dashboard') }) .catch(error => this.setState({ errorMessage: error.message })) } } render() { if(this.state.isLoading){ return( <View style={styles.preloader}> <ActivityIndicator size="large" color="#9E9E9E"/> </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="#3740FE" 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: '#3740FE', marginTop: 25, textAlign: 'center' }, preloader: { left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' } }); |
Logout from Firebase via React Native
Put the following code in the dashboard.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
// components/dashboard.js import React, { Component } from 'react'; import { StyleSheet, View, Text, Button } from 'react-native'; import firebase from '../database/firebase'; export default class Dashboard extends Component { constructor() { super(); this.state = { uid: '' } } signOut = () => { firebase.auth().signOut().then(() => { this.props.navigation.navigate('Login') }) .catch(error => this.setState({ errorMessage: error.message })) } render() { this.state = { displayName: firebase.auth().currentUser.displayName, uid: firebase.auth().currentUser.uid } return ( <View style={styles.container}> <Text style = {styles.textStyle}> Hello, {this.state.displayName} </Text> <Button color="#3740FE" 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 } }); |
We can access the firebase.auth().signOut() method to logout from the app, after successful logout we will be redirect the user to the login screen.
