Firebase Authentication in React Native
This is the sixth post of our React Native Firebase series, in this example we will see what is Firebase Authentication Module? and how to integrate Firebase Authentication in React Native App? In this example we will do email authentication using Firebase Authentication in React Native App.
So Let’s start with the Firebase Authentication Example.
Firebase Authentication
Firebase Authentication provides backend services & easy-to-use SDKs to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.
Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.
In simple words, Firebase Authentication will help you to keep basic user details which can help you to authenticate the user. You can use Email/Phone notification which can help you to create the complete authentication flow which we have create in this example. Instead of creating your own signup mechanism you can also use any social authentication and can connect that with Firebase Authentication.
Firebase does not provide any mechanism for the social auth, developer has to implement the same from his/her end.
Example Description
In this example we will use Email + Password for authentication. User can register using Email and password and can login with the same Email and password.
If we talk about the application then we will create a Splash Screen where we will check if user is authenticated or not, if not then we will show Login Screen else Home Screen. User can register with the help of registration form. We will provide a logout button on Home Screen which will help us to sign-out. Let’s see the code for the better clarity.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react native command line interface to make our React Native App.
If you have previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:
npm uninstall -g react-native-cli @react-native-community/cli
Run the following commands to create a new React Native project
npx react-native init ProjectName
If you want to start a new project with a specific React Native version, you can use the --version argument:
npx react-native init ProjectName --version X.XX.X
Note If the above command is failing, you may have old version of react-native
or react-native-cli
installed globally on your pc. Try uninstalling the cli and run the cli using npx.
This will make a project structure with an index file named App.js in your project directory.
Integration of Firebase SDK
For starting with any of the React Native Firebase Example you will need to integrate Firebase in your app, I have specially made a separate post in detail for this where you will see point to point process to add Firebase in your React Native App for Android and iOS both.
Please visit How to Integrate Firebase in Android and iOS App and come back for the next step.
Once you are done with the Firebase integration you can install the further dependencies.
Installation of Dependencies
To install the dependencies open the terminal and jump into your project using
cd ProjectName
For the React Native Firebase we need to install and setup the app module
npm install @react-native-firebase/app --save
Now install the authentication module
npm install @react-native-firebase/auth --save
That is enough for the Firebase Authentication but in this example we will also use React Navigation as we are going to switch the screens so install the following react-navigation dependencies also
npm install @react-navigation/native --save
Other supporting libraries for react-navigation
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view --save
npm install @react-navigation/stack --save
This command will copy all the dependencies into your node_module directory. –save is optional, it is just to update the dependency in your package.json file.
CocoaPods Installation
After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the library but for iOS we need to install the pods. So to install the pods use
cd ios/ && pod install --repo-update && cd ..
Set up for Authentication
Before we start with this example we have to do some setup. Open your Firebase Console and click on Authentication tab form left pane.
Click “Set up sign-in method” and you will see Sign-in providers, click on the “Email/Password”
Enable “Email/Password” and Save. That will enable Email Authentication. If you want any different authentication then you can also enable the same.
Project Structure for Firebase Authentication
Please create the following project structure and copy the code given below.
You can see
- App.js contains main Navigation
- SplashScreen.js for the Splash Screen
- LoginScreen.js for the Login
- RegisterScreen.js for the Register
- HomeScreen.js, as a landing page after login/register and have logout option
Code for Firebase Authentication in React Native
Please open App.js in any code editor and replace the code with the following code
App.js
// #6 Email Authentication using Firebase Authentication in React Native App
// https://aboutreact.com/react-native-firebase-authentication/
import "react-native-gesture-handler";
// Import React and Component
import React from "react";
// Import Navigators from React Navigation
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
// Import Screens
import SplashScreen from "./pages/SplashScreen";
import LoginScreen from "./pages/LoginScreen";
import RegisterScreen from "./pages/RegisterScreen";
import HomeScreen from "./pages/HomeScreen";
const Stack = createStackNavigator();
const Auth = () => {
// Stack Navigator for Login and Sign up Screen
return (
<Stack.Navigator initialRouteName="LoginScreen">
<Stack.Screen
name="LoginScreen"
component={LoginScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="RegisterScreen"
component={RegisterScreen}
options={{
title: "Register", //Set Header Title
headerStyle: {
backgroundColor: "#307ecc", //Set Header color
},
headerTintColor: "#fff", //Set Header text color
headerTitleStyle: {
fontWeight: "bold", //Set Header text style
},
}}
/>
</Stack.Navigator>
);
};
/* Main Navigator */
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="SplashScreen">
{/* SplashScreen which will come once for 2 Seconds */}
<Stack.Screen
name="SplashScreen"
component={SplashScreen}
// Hiding header for Splash Screen
options={{ headerShown: false }}
/>
{/* Auth Navigator which include Login Signup */}
<Stack.Screen
name="Auth"
component={Auth}
options={{ headerShown: false }}
/>
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{
title: "Home", //Set Header Title
headerStyle: {
backgroundColor: "#307ecc", //Set Header color
},
headerTintColor: "#fff", //Set Header text color
headerTitleStyle: {
fontWeight: "bold", //Set Header text style
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
pages/SplashScreen.js
// #6 Email Authentication using Firebase Authentication in React Native App
// https://aboutreact.com/react-native-firebase-authentication/
// Import React and Component
import React, { useState, useEffect } from "react";
import {
SafeAreaView,
ActivityIndicator,
Text,
View,
StyleSheet,
Image,
} from "react-native";
import auth from "@react-native-firebase/auth";
const SplashScreen = ({ navigation }) => {
//State for ActivityIndicator animation
const [animating, setAnimating] = useState(true);
useEffect(() => {
setTimeout(() => {
setAnimating(false);
// Check if currentUser is set or not
// If not then send for Authentication
// else send to Home Screen
navigation.replace(
auth().currentUser ? "HomeScreen" : "Auth"
);
}, 5000);
}, []);
return (
<SafeAreaView
style={{ flex: 1, backgroundColor: "#307ecc" }}
>
<View style={styles.container}>
<Image
source={require("../Image/aboutreact.png")}
style={{
width: "90%",
resizeMode: "contain",
margin: 30,
}}
/>
<ActivityIndicator
animating={animating}
color="#FFFFFF"
size="large"
style={styles.activityIndicator}
/>
</View>
<Text
style={{
fontSize: 18,
textAlign: "center",
color: "white",
}}
>
React Native Firebase Authentication
</Text>
<Text
style={{
fontSize: 16,
textAlign: "center",
color: "white",
}}
>
www.aboutreact.com
</Text>
</SafeAreaView>
);
};
export default SplashScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
activityIndicator: {
alignItems: "center",
height: 80,
},
});
pages/LoginScreen.js
// #6 Email Authentication using Firebase Authentication in React Native App
// https://aboutreact.com/react-native-firebase-authentication/
// Import React and Component
import React, { useState, createRef } from "react";
import {
SafeAreaView,
StyleSheet,
TextInput,
View,
Text,
ScrollView,
Image,
Keyboard,
TouchableOpacity,
KeyboardAvoidingView,
} from "react-native";
import auth from "@react-native-firebase/auth";
const LoginScreen = ({ navigation }) => {
const [userEmail, setUserEmail] = useState("");
const [userPassword, setUserPassword] = useState("");
const [errortext, setErrortext] = useState("");
const passwordInputRef = createRef();
const handleSubmitPress = () => {
setErrortext("");
if (!userEmail) {
alert("Please fill Email");
return;
}
if (!userPassword) {
alert("Please fill Password");
return;
}
auth()
.signInWithEmailAndPassword(userEmail, userPassword)
.then((user) => {
console.log(user);
// If server response message same as Data Matched
if (user) navigation.replace("HomeScreen");
})
.catch((error) => {
console.log(error);
if (error.code === "auth/invalid-email")
setErrortext(error.message);
else if (error.code === "auth/user-not-found")
setErrortext("No User Found");
else {
setErrortext(
"Please check your email id or password"
);
}
});
};
return (
<SafeAreaView style={styles.mainBody}>
<ScrollView
keyboardShouldPersistTaps="handled"
contentContainerStyle={{
flex: 1,
justifyContent: "center",
alignContent: "center",
}}
>
<View>
<KeyboardAvoidingView enabled>
<View style={{ alignItems: "center" }}>
<Image
source={require("../Image/aboutreact.png")}
style={{
width: "50%",
height: 100,
resizeMode: "contain",
margin: 30,
}}
/>
</View>
<View style={styles.sectionStyle}>
<TextInput
style={styles.inputStyle}
onChangeText={(UserEmail) =>
setUserEmail(UserEmail)
}
placeholder="Enter Email"
placeholderTextColor="#8b9cb5"
autoCapitalize="none"
keyboardType="email-address"
returnKeyType="next"
onSubmitEditing={() =>
passwordInputRef.current &&
passwordInputRef.current.focus()
}
underlineColorAndroid="#f000"
blurOnSubmit={false}
/>
</View>
<View style={styles.sectionStyle}>
<TextInput
style={styles.inputStyle}
onChangeText={(UserPassword) =>
setUserPassword(UserPassword)
}
placeholder="Enter Password"
placeholderTextColor="#8b9cb5"
keyboardType="default"
ref={passwordInputRef}
onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
secureTextEntry={true}
underlineColorAndroid="#f000"
returnKeyType="next"
/>
</View>
{errortext != "" ? (
<Text style={styles.errorTextStyle}>
{" "}
{errortext}{" "}
</Text>
) : null}
<TouchableOpacity
style={styles.buttonStyle}
activeOpacity={0.5}
onPress={handleSubmitPress}
>
<Text style={styles.buttonTextStyle}>
LOGIN
</Text>
</TouchableOpacity>
<Text
style={styles.registerTextStyle}
onPress={() =>
navigation.navigate("RegisterScreen")
}
>
New Here ? Register
</Text>
</KeyboardAvoidingView>
</View>
</ScrollView>
<Text
style={{
fontSize: 18,
textAlign: "center",
color: "white",
}}
>
React Native Firebase Authentication
</Text>
<Text
style={{
fontSize: 16,
textAlign: "center",
color: "white",
}}
>
www.aboutreact.com
</Text>
</SafeAreaView>
);
};
export default LoginScreen;
const styles = StyleSheet.create({
mainBody: {
flex: 1,
justifyContent: "center",
backgroundColor: "#307ecc",
alignContent: "center",
},
sectionStyle: {
flexDirection: "row",
height: 40,
marginTop: 20,
marginLeft: 35,
marginRight: 35,
margin: 10,
},
buttonStyle: {
backgroundColor: "#7DE24E",
borderWidth: 0,
color: "#FFFFFF",
borderColor: "#7DE24E",
height: 40,
alignItems: "center",
borderRadius: 30,
marginLeft: 35,
marginRight: 35,
marginTop: 20,
marginBottom: 25,
},
buttonTextStyle: {
color: "#FFFFFF",
paddingVertical: 10,
fontSize: 16,
},
inputStyle: {
flex: 1,
color: "white",
paddingLeft: 15,
paddingRight: 15,
borderWidth: 1,
borderRadius: 30,
borderColor: "#dadae8",
},
registerTextStyle: {
color: "#FFFFFF",
textAlign: "center",
fontWeight: "bold",
fontSize: 14,
alignSelf: "center",
padding: 10,
},
errorTextStyle: {
color: "red",
textAlign: "center",
fontSize: 14,
},
});
pages/RegisterScreen.js
// #6 Email Authentication using Firebase Authentication in React Native App
// https://aboutreact.com/react-native-firebase-authentication/
// Import React and Component
import React, { useState, createRef } from "react";
import {
SafeAreaView,
StyleSheet,
TextInput,
View,
Text,
Image,
KeyboardAvoidingView,
Keyboard,
TouchableOpacity,
ScrollView,
} from "react-native";
import auth from "@react-native-firebase/auth";
const RegisterScreen = ({ navigation }) => {
const [userName, setUserName] = useState("");
const [userEmail, setUserEmail] = useState("");
const [userPassword, setUserPassword] = useState("");
const [errortext, setErrortext] = useState("");
const emailInputRef = createRef();
const passwordInputRef = createRef();
const handleSubmitButton = () => {
setErrortext("");
if (!userName) return alert("Please fill Name");
if (!userEmail) return alert("Please fill Email");
if (!userPassword) return alert("Please fill Address");
auth()
.createUserWithEmailAndPassword(
userEmail,
userPassword
)
.then((user) => {
console.log(
"Registration Successful. Please Login to proceed"
);
console.log(user);
if (user) {
auth()
.currentUser.updateProfile({
displayName: userName,
photoURL:
"https://aboutreact.com/profile.png",
})
.then(() => navigation.replace("HomeScreen"))
.catch((error) => {
alert(error);
console.error(error);
});
}
})
.catch((error) => {
console.log(error);
if (error.code === "auth/email-already-in-use") {
setErrortext(
"That email address is already in use!"
);
} else {
setErrortext(error.message);
}
});
};
return (
<SafeAreaView
style={{ flex: 1, backgroundColor: "#307ecc" }}
>
<ScrollView
keyboardShouldPersistTaps="handled"
contentContainerStyle={{
justifyContent: "center",
alignContent: "center",
}}
>
<View style={{ alignItems: "center" }}>
<Image
source={require("../Image/aboutreact.png")}
style={{
width: "50%",
height: 100,
resizeMode: "contain",
margin: 30,
}}
/>
</View>
<KeyboardAvoidingView enabled>
<View style={styles.sectionStyle}>
<TextInput
style={styles.inputStyle}
onChangeText={(UserName) =>
setUserName(UserName)
}
underlineColorAndroid="#f000"
placeholder="Enter Name"
placeholderTextColor="#8b9cb5"
autoCapitalize="sentences"
returnKeyType="next"
onSubmitEditing={() =>
emailInputRef.current &&
emailInputRef.current.focus()
}
blurOnSubmit={false}
/>
</View>
<View style={styles.sectionStyle}>
<TextInput
style={styles.inputStyle}
onChangeText={(UserEmail) =>
setUserEmail(UserEmail)
}
underlineColorAndroid="#f000"
placeholder="Enter Email"
placeholderTextColor="#8b9cb5"
keyboardType="email-address"
ref={emailInputRef}
returnKeyType="next"
onSubmitEditing={() =>
passwordInputRef.current &&
passwordInputRef.current.focus()
}
blurOnSubmit={false}
/>
</View>
<View style={styles.sectionStyle}>
<TextInput
style={styles.inputStyle}
onChangeText={(UserPassword) =>
setUserPassword(UserPassword)
}
underlineColorAndroid="#f000"
placeholder="Enter Password"
placeholderTextColor="#8b9cb5"
ref={passwordInputRef}
returnKeyType="next"
secureTextEntry={true}
onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
/>
</View>
{errortext != "" ? (
<Text style={styles.errorTextStyle}>
{" "}
{errortext}{" "}
</Text>
) : null}
<TouchableOpacity
style={styles.buttonStyle}
activeOpacity={0.5}
onPress={handleSubmitButton}
>
<Text style={styles.buttonTextStyle}>
REGISTER
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</ScrollView>
<Text
style={{
fontSize: 18,
textAlign: "center",
color: "white",
}}
>
React Native Firebase Authentication
</Text>
<Text
style={{
fontSize: 16,
textAlign: "center",
color: "white",
}}
>
www.aboutreact.com
</Text>
</SafeAreaView>
);
};
export default RegisterScreen;
const styles = StyleSheet.create({
sectionStyle: {
flexDirection: "row",
height: 40,
marginTop: 20,
marginLeft: 35,
marginRight: 35,
margin: 10,
},
buttonStyle: {
backgroundColor: "#7DE24E",
borderWidth: 0,
color: "#FFFFFF",
borderColor: "#7DE24E",
height: 40,
alignItems: "center",
borderRadius: 30,
marginLeft: 35,
marginRight: 35,
marginTop: 20,
marginBottom: 20,
},
buttonTextStyle: {
color: "#FFFFFF",
paddingVertical: 10,
fontSize: 16,
},
inputStyle: {
flex: 1,
color: "white",
paddingLeft: 15,
paddingRight: 15,
borderWidth: 1,
borderRadius: 30,
borderColor: "#dadae8",
},
errorTextStyle: {
color: "red",
textAlign: "center",
fontSize: 14,
},
});
pages/HomeScreen.js
// #6 Email Authentication using Firebase Authentication in React Native App
// https://aboutreact.com/react-native-firebase-authentication/
// Import React and Component
import React, { useEffect, useState } from "react";
import {
View,
Text,
SafeAreaView,
StyleSheet,
TouchableOpacity,
Alert,
} from "react-native";
import auth from "@react-native-firebase/auth";
const HomeScreen = ({ navigation }) => {
const [user, setUser] = useState();
useEffect(() => {
const subscriber = auth().onAuthStateChanged((user) => {
console.log("user", JSON.stringify(user));
setUser(user);
});
return subscriber;
}, []);
const logout = () => {
Alert.alert(
"Logout",
"Are you sure? You want to logout?",
[
{
text: "Cancel",
onPress: () => {
return null;
},
},
{
text: "Confirm",
onPress: () => {
auth()
.signOut()
.then(() => navigation.replace("Auth"))
.catch((error) => {
console.log(error);
if (error.code === "auth/no-current-user")
navigation.replace("Auth");
else alert(error);
});
},
},
],
{ cancelable: false }
);
};
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, padding: 16 }}>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<Text
style={{
fontSize: 20,
textAlign: "center",
marginBottom: 16,
}}
>
Firebase Auth
</Text>
{user ? (
<Text>
Welcome{" "}
{user.displayName
? user.displayName
: user.email}
</Text>
) : null}
<TouchableOpacity
style={styles.buttonStyle}
activeOpacity={0.5}
onPress={logout}
>
<Text style={styles.buttonTextStyle}>
Logout
</Text>
</TouchableOpacity>
</View>
<Text
style={{
fontSize: 18,
textAlign: "center",
color: "grey",
}}
>
React Native Firebase Authentication
</Text>
<Text
style={{
fontSize: 16,
textAlign: "center",
color: "grey",
}}
>
www.aboutreact.com
</Text>
</View>
</SafeAreaView>
);
};
export default HomeScreen;
const styles = StyleSheet.create({
buttonStyle: {
minWidth: 300,
backgroundColor: "#7DE24E",
borderWidth: 0,
color: "#FFFFFF",
borderColor: "#7DE24E",
height: 40,
alignItems: "center",
borderRadius: 30,
marginLeft: 35,
marginRight: 35,
marginTop: 20,
marginBottom: 25,
},
buttonTextStyle: {
color: "#FFFFFF",
paddingVertical: 10,
fontSize: 16,
},
});
To Run the React Native App
Open the terminal again and jump into your project using.
cd ProjectName
1. Start Metro Bundler
First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro bundler run following command
npx react-native start
Once you start Metro Bundler it will run forever on your terminal until you close it. Let Metro Bundler run in its own terminal. Open a new terminal and run the application.
2. Start React Native Application
To run the project on an Android Virtual Device or on real debugging device
npx react-native run-android
or on the iOS Simulator by running (macOS only)
npx react-native run-ios
Output Screenshots
That was how we can implement email authentication using Firebase Authentication in React Native App for Android and iOS both. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂