How to integrate Google authentication in React Native

We all know how useful react native and firebase are so without wasting time let’s jump directly to the coding part.

Create a react native project

Open the terminal and write the following command

react-native init GAuthApp 

Open the project folder and launch VS code

cd GAuthApp 
code .

Let’s install some libraries now

Open terminal in VSC

This is how you can do it

Type in following commands

npm i @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signin

We installed necessary firebase libraries and a google sign in library. If you want to explore the library further, here it is

Create Firebase project

Go to Firebase Console and click Add Project

Enter project name and create project

On the home page there will be an option to add your app

Look for this

Click on android icon

Enter the package name of the app. We can find it in

Project folder -> Android -> App -> Src -> Main -> AndroidManifest.xml

In that file search for ‘package’

Here it is

Let’s get back to firebase console, after entering package name, click ‘Next’ on all things and lastly click ‘Continue to Console’.

Link Firebase with the app

We’ll need SHA1 key , to get that write the below code in VSC terminal

cd android && gradlew signingReport

Now copy the SHA1 that belongs to debugAndroidTest and then head to Firebase console go to project settings

Here’s how you can do that

In here, we can add the SHA1 in the Add fingerprint section

After adding, download the google-services.json and put it in the App folder

Project Folder -> Android -> App -> Put the json file here

Enable google sign-in in Firebase console

On the left panel, look for Authentication. Click on that and then go to Sign-in methods

Find Google in that list and enable it

Here’s how it will look

Copy the web client ID, we will need it later.

Now we’ll have to add couple of things in our code

In our Project Folder/android/build.gradle, we have to add google-services plugin

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.4'
    // Add me --- /\
  }
}

Then in our Project folder/android/app/build.gradle file, add the following

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

Let’s code the Login screen

Import GoogleSignIn and initialize it

import { GoogleSignin } from '@react-native-community/google-signin';

GoogleSignin.configure({
  webClientId: 'Your_webclientID_copied_from_firebase_console',
});

Our onPress method will be implemented as following

async function onGoogleButtonPress() {
const { idToken } = await GoogleSignin.signIn();
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
ToastAndroid.showWithGravity(
"logged in successfully",
ToastAndroid.LONG,
ToastAndroid.CENTER );
return auth().signInWithCredential(googleCredential);
}

Here’s the entire code of login.js

import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
StatusBar,
TouchableOpacity,
ToastAndroid,
} from "react-native";
import { GoogleSignin } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';
GoogleSignin.configure({webClientId: 'Your_webclientID_copied_from_firebase_console',});
Login =()=>{
async function onGoogleButtonPress() {
const { idToken } = await GoogleSignin.signIn();
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
ToastAndroid.showWithGravity(
"logged in successfully",
ToastAndroid.LONG,
ToastAndroid.CENTER );
return auth().signInWithCredential(googleCredential);
}
return(
<View style={styles.container}>
<StatusBar backgroundColor={'#413175'}  barStyle={'light-content'}/>
<TouchableOpacity style={styles.btnContainer}
onPress={() => onGoogleButtonPress().then(() => console.log('Signed in with Google!')).catch((er)=>
{
ToastAndroid.showWithGravity(
"Error"+er,
ToastAndroid.LONG,
ToastAndroid.BOTTOM
);
console.log('Error',er)})
}>
<Text style={styles.btnText}>Sign In with Google</Text>
</TouchableOpacity>
</View>
)
}
export default Login;
const styles= StyleSheet.create({
container:{
flex:1,
backgroundColor:'#413175',
alignItems:'center',
justifyContent:'center'
},
btnContainer:{
backgroundColor:'#483a78',
alignSelf:'center',
height:60,
width:'70%',
borderRadius:30,
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
elevation:40,
},
btnText:{
marginHorizontal:5,
color:'#fff',
fontSize:20,
fontFamily:'SFUIText-Semibold'
},
})

Conclusion

That’s a wrap to the no nonsense guide to integrate Google login in a react native app. Let me know what else should I cover in this tutorial series.

Github

Here’s the Github link of the project.

Reference

A good guide on anything related to Firebase and React Native