How to implement sign-in with google in react-native

6 min readOct 28, 2020

How to login with google using firebase in react-native:

For login with google, npm provide a great plugin which is react-native-google-sign in, there is some step that follows carefully to implement google login, so let’s start the integration of “How to implement sign-in with google in react-native“.

Register project on firebase and setup firebase.
Setup google develope account.
Setup Communication between Firebase and google developer.
Implement this plugin in project. — react-native-google-signin
Then testing the login feature

so let’s start to implement a google login

1) Register project on firebase and setup

For registering the project with firebase we need to follow all steps which are defined in this tutorial please follow this step by step. https://www.itechinsiders.com/2019/09/how-to-send-firebase-notification-in-react-native/
Enable Google Login in Firebase after setup firebase
Authentication → Sign-In Method → Google, and click the Enable toggle.
It’s something that looks like…

Note : Save the web client id because we need it in other steps, this web client id and client id which we generate using google developer account are must be the same, this is a most important part of this setup.

2) Setup google develope account

So let’s start to set up a google account, for register your project with Google, follow these steps

Go to Google Developer Console to set up your app.
Log in to your Google account and create a new project.

Screen is like…

Select the project then go into sidemenu->credentials and add a new credential, which is like

You’ll need to set a product name for your app. Do that by pressing the configure consent screen button.

Add web application and android both
Provide the name of the project and save it, the screen is like

Authenticating Your Client

Then open the terminal on your computer and type:
For mac/Linux — key tool -list -v \

-alias androiddebugkey -keystore ~/.android/debug.keystore

For windows —
keytool -list -v \-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore
Ask about password: android(for both)
It shows certificate like — Certificate fingerprint: SHA1: DA:39:A3:EE:5E:6B:4B:0D:32:55:BF:EF:95:60:18:90:AF:D8:07:09
https://developers.google.com/android/guides/client-auth Clicking Create gives you your Android Client ID (you’ll need this in your code later)”

After all the setup go to credentials menu, it looks like

Note: which name is highlighted copy that client id and match this id with firebase WebClient id which we save in step 1, this is a most important part.

3)Check and Setup Communication between Firebase and google developer

copy the SH1 key and add it into firebase
now we again goto firebase console add the key and set up the support mail, the screen looks like

And then again download the google-services.json file.

4) Implement this plugin in project– react-native-google-signin —

Now we are ready to implement google login with our project, so first, we need to install this plugin in our project

npm install react-native-google-signin –save

Now we link this plugin with our project

react-native link   react-native-google-signin

After this it must check all library is link properly, then start next step
Now we configure the google setting in our project, componentDidMount

GoogleSignin.configure({
  // scopes: ['https://www.googleapis.com/auth/drive.readonly'], // 
   what API you want to access on behalf of the user, default is email 
   and profile
   webClientId: "1069313016635-haqprteis.apps.googleusercontent.com", 
   // client ID of type WEB for your server (needed to verify user ID 
   and offline access)
   offlineAccess: true, // if you want to access Google API on behalf 
   of the user FROM YOUR SERVER
   hostedDomain: '', // specifies a hosted domain restriction
   loginHint: '', // [iOS] The user's ID, or email address, to be 
   prefilled in the authentication UI if possible. [See docs here]. 
  (https://developers.google.com/identity/sign- 
 in/ios/api/interface_g_i_d_sign_in.html#a0a68c7504c31ab0b728432565f6e33fd)
  forceConsentPrompt: true, // [Android] if you want to show the authorization prompt at each login
 accountName: '', // [Android] specifies an account name on the device that should be used
iosClientId: '1069313016635-h2c1fnoik1la1jdbpg7uegv5l5s6kjtu.apps.googleusercontent.com', // [iOS] optional, if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
})

Explanation:

scopes: This tells what API you want to access on behalf of the user, leave it blank for just email and profile access. For more API access, you might have to get your app verified, or you’ll see this warning when logging in.
webClientId: Client ID of type WEB for your server needed to verify user ID and offline access. This is what we copied from Firebase console in Step 2.
offlineAccess: If you want to access Google API on behalf of the user from your server.
hostedDomain: Specifies a hosted domain restriction for auth.
loginHint: Only for iOS — The user’s ID, or email address, to be prefilled in the authentication UI if possible. (See docs here)
forceConsentPrompt: Only for Android — if you want to show the authorization prompt at each login.
accountName: Only for Android — Specifies an account name on the device that should be used.
iosClientId: Only for iOS — Optional, if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist). Of course, if you omit this, yourGoogleService-Info.plist needs to be correctly configured in XCode.
Now we need to import the plugin where we need to setup.

import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';

google provide default design and button of google login

render() {
<GoogleSigninButton style={{width:192,height:48}} size={GoogleSigninButton.Size.Wide} color={GoogleSigninButton.Color.Dark} onPress={this._signIn} disabled={this.state.isSigninInProgress}/> 
}

Design looks like —

async loginwithGoogle() { 
 GoogleSignin.signOut()
 try {
  await GoogleSignin.hasPlayServices();
     GoogleSignin.signIn().then((user) => { 
        this.setState({ googleUserInfo : user });
           console.log('sigedin user========',user)
   })
}