How to implement Google Login using React Native Firebase?
OAuth is a popular open standard for internet users. The main purpose of this platform is to grant access to applications or websites without sharing the password. This can be done using the React native firebase. So here, we will discuss how to authenticate users with their Google accounts with an authentication module in Firebase in a Non-Expo React Native app. So here we will learn how to make Google login using React native Firebase.
Development Environment:
The initial step is to set up the environment and create a new React App. It is recommended to follow React Native CLI Quickstart rather than the Expo CLI Quickstart.
Cloning the starter Code:
To make Google Login using React Native Firebase. You can clone the starter code from the repository on GitHub. This is to focus more on the authentication module.
Follow Repository README for instructions. After that, refer to the GitHub Repository for the final code.
Folder Structure:
Here we will set up 2 screens in the screens/directory:
- Authentication.js: Here Screen with a Google sign-in button to initiate the sign-process.
- Authenticated.js: The screen will be visible only if he is logged in.
Setting up the Firebase Project:
To implement Google login React Native firebase, we need to set up a firebase project.
Now open the Firebase console and sign in to your account. Later on, create a new project.
Here you require clicking on the Android icon. This will add an Android app to your Firebase project.
Here you will find the package name in the AndroidManifest.xml file. It will be located in android/app/src/main.
The package name in AndroidManifest.xml
You will also require the Debug signing certificate SHA-1. For this run the following command in the project directory.
cd android && ./gradlew signingReport It will generate the signing certificate of the app.
Task :app:signingReport
Variant: debugUnitTest
Config: debug
Store: C:\Users\Mohan\.android\debug.keystore
Alias: AndroidDebugKey
MD5: 5F:BB:9E:98:5E:E7:E6:29:19:28:61:4F:42:B9:74:AB
SHA1: 9E:61:75:0E:5C:F4:EB:B4:EB:9D:B3:13:5F:50:D6:AB:2E:4E:12:0D
SHA-256
6C:BB:49:66:18:B9:7F:74:49:B5:56:D0:24:43:6A:1B:41:91:97:A3:2E:7C:4A:6E:59:40:8F:5C:74:6F:CC:93
Valid until: Friday, December 23, 2050 Copy and paste the SHA1 value into the Firebase console. Download the google-services.json file on the next step. Put this file in the android/app directory.
It will contain configurations that will enable the app to access firebase services. After adding the file it will ask you to add some configurations to the build.gradle files.
Now add the google-services plugin as a dependency inside the android/build.gradle file.
buildscript {
dependencies {
// … other dependencies
classpath ‘com.google.gms:google-services:4.3.3’
}
} Execute the plugin by adding the following to your android/app/build.gradle file.
Apply plugin: ‘com.android.application’
Apply plugin: ‘com.google.gms.google-services’ Further to configure Firebase for iOS through additional steps.
Install the @react-native-firebase/app package in our app to complete the set up for Firebase.
npm install @react-native-firebase/app Setting up Firebase Authentication:
Now get to the Authentication section in the dashboard and click on the Get Started button. It will enable the authentication module in the project. The firebase authentication setup is also crucial to create a Google login with react native firebase.
After that, you should enable the phone authentication in the sign-in method. Press saves once you enable it.
Now, move to the application and install the auth module. After that, install the @react-native-firebase/auth package in the app.
Npm install @react-native-firebase/auth Now using the Firebase Android BoM, declare the dependency for the authentication module in the android/app/build.gradle file.
dependencies {
// Add these lines
implementation platform(‘com.google.firebase:firebase-bom:26.3.0’)
implementation ‘com.google.firebase:firebase-auth’
} Module is set up in the app with this firebase authentication module.
Sign-in:
Now we are moving towards sign in for Google Login using React native firebase. The wrapper around the official Google sign-in library is google-sign in. We use this library to implement credentials and then sign in with Firebase.
The first step is to initialize the Google SDK. This can be done using the webClientId that can be found in the google-services.json file in android/app as client/oauth_client/client_id property.
OAuth Client ID
To authenticate Google login with react native firebase, we need to import the google-sign library and Firebase auth module in App.js.
import auth from ‘@react-native-firebase/auth’;
import { GoogleSignin } from ‘@react-native-community/google-signin’;
}); To initialize the SDK, call the GoogleSignin.configure method with the webClientId. You need to do it outside the App() function.
GoogleSignin.configure({
webClientId:
‘260759292128-4h94uja4bu3ad9ci5qqagubi6k1m0jfv.apps.googleusercontent.com’,
}); We have initialized the Google SDK. Next we will work on authenticating the user.
Here I have set up a function called onGoogleButtonPress in the App.js file. This function will pass down to the authentication screen as a prop. Later on, it will be set as the onPress property of the Google sign-in button.
When the Google sign-in button is pressed by the user, the function in the App.js file will be called.
Let’s write the code to sign in the user in the onGoogleButtonPress function.
async function onGoogleButtonPress() {
// Sign-in Process here
} We need to get the user’s idToken from Google using the GoogleSignin.signIn() method. Here we will use the await keyword to wait for the promise to get resolved.
// Get the users ID token
const { idToken } = await GoogleSignin.signIn(); We will create a Google credential with idToken.
const googleCredential = auth.GoogleAuthProvider.credential(idToken); From the Firebase auth module, we should use the signInWithCredential method. This will enable the user to sign-in to the application.
return auth().signInWithCredential(googleCredential); So the complete code will be like this:
async function onGoogleButtonPress() {
const { idToken } = await GoogleSignin.signIn();
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
return auth().signInWithCredential(googleCredential);
} Display Authenticated Screen:
The authentication state of the user changes inside the app upon the onAuthStateChanged trigger. For this listener, you can set an event handler.
This handler will receive the user object. When the user is signed-out the object will be set to null.
Using auth().currentUser, you can access the current authenticated users details. Displayname, email and photoURL will be present in the user object. They were copied from Google to Firebase.
Here To identify whether the user is authenticated or not, we will create a stack to track. Here we will set the default value to false.
const [authenticated, setAutheticated] = useState(false); Now we will set the authenticated state to true. If the user object is not null in the onAuthStateChanged handler.
auth().onAuthStateChanged((user) => {
if(user) {
setAutheticated(true);
}
}) We should display the Authenticated screen component if the user is authenticated.
if (authenticated) {
return <Authenticated />;
}
return <Authentication onGoogleButtonPress={onGoogleButtonPress} />; I’m using auth().currentUser in the Authenticated screen to display the email address, name and also users profile picture.
const user = auth().currentUser;
return (
<View style={styles.screen}>
<Text style={styles.title}>You’re Logged In</Text>
<Image source={{ uri: user?.photoURL }} style={styles.image} />
<Text style={styles.text}>{user?.displayName}</Text>
<Text style={styles.text}>{user?.email}</Text>
<View style={{ marginTop: 30 }}>
<Button title=”Signout” onPress={() => auth().signOut()} />
</View>
</View>
); Sign Out:
To enable the user to sign out from the auth modules, we should use the signOut method. This will be a crucial method to invoke Google login using react native firebase.
Import the auth module in Authenticated.js
import auth from ‘@react-native-firebase/auth’; Now call the signOut method when the user presses the signout button.
<Button title=”Signout” onPress={() => auth().signOut()} /> The auth module will sign out the user from the application once the user presses the button. It will trigger the onAuthStateChanged listener. Instead of the user object, the handler will receive the null.This is how the user will sign out in the Google login using React Native Firebase process.
Here we should set the authenticated state to false if we receive null.
auth().onAuthStateChanged((user) => {
if(user) {
setAuthenticated(true);
} else {
setAuthenticated(false);
}
}) So here we end with our process. The whole mechanism is about making your Google login easy using React firebase. Are you looking to hire React Native developer? Connect with us.
