Google SignIn tutorial for React Native

A straightforward approach to creating Google Sign In for a React Native app that works for both iOS and Android.

Update Jun 14, 2024: If you want to implement with firebase, I’ve written a tutorial for it: https://dev.to/thechaudhrysab/google-signin-in-react-native-using-firebase-auth-2nop

Update May 12, 2022: In @react-native-google-signin/google-signin: 7.2.2. There is no androidClientId in the configure params. I’ll update the article accordingly, but for now please refer to https://github.com/react-native-google-signin/google-signin if you face any issues.

UPDATED: Nov 26, 2021, and tested the code still works. Made some updates to the final code as well as I added a possible error fix. The implementation is NOT using firebase and is implemented in a React Native CLI project and not expo.

Assuming you have already created a React Native project and have the UI in place. We’ll first configure keys that are required and after that, we’ll add the functionality to a button press event in our app.

Generating the required Keys

Go to https://console.cloud.google.com/ and create a New Project

The navigate to APIs & Services → Credentials

Click on CREATE CREDENTIALS → OAuth client ID

From the Application Type dropdown select iOS

Give this key a Name (convention is to have a name without any caps the screenshot below is just shared as an example)and Bundle ID (same as in your info.plist file of iOS project) and click CREATE.

You’ll now see the key in your credentials under OAuth 2.0 Client IDs

For iOS we also need to add a URL scheme. Click on the Name of the key you just created., in my case the name is DECIDER-RN-iOS-App-client and you’ll. be taken to a page like this:

Here copy the iOS URL scheme given on the right side and open your React Native iOS project in XCode.

Select your app from the TARGETS section, then select the Info tab, and expand the URL Types section. Click on. the + button and paste the copied iOS URL scheme here.

That’s it for iOS setup next we’ll create a key for android.

Click on CREATE CREDENTIALS → OAuth client ID and this time from Application type select Android.

Same as before giving it a name and copy the exact Package name as per your AndroidManifest.xml file.

A new thing here is it’s asking for an SHA-1 certificate fingerprint.

SHA-1 signing certificate fingerprint restricts usage to your Android apps.
Learn more

To create an SHA-1 fingerprint Open your React-Native Project and from its terminal first, do cd android and then run this command:

keytool -keystore app/debug.keystore -list -v

NOTE: The above command will give you a DEV key. To get an SHA-1 key for PROD use the above command but replace debug.keystore with your release.keystore and use that SHA-1. I suggest making two keys one for DEV and one for PROD.

If it asks you for the password, the password is android press enter and you’ll see

Copy the SHA1 (hidden with green) and paste the SHA-1 key in the Google Cloud Console ad click on CREATE.

Great now you have two client IDs one for iOS and one for Android.

Implementing Google Sign In for React Native App

We’ll need to install the Google SignIn package. So first install this package

npm i @react-native-google-signin/google-signin

Don’t forget to do pod install after installing the above library.

In the file where you want to show Google Sign In, first import:

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

Add the following code which is a button component. When this button is pressed it’ll send a call to Google Sign In

<Button title={'Sign in with Google'} onPress={() =>  {
    GoogleSignin.configure({
        androidClientId: 'ADD_YOUR_ANDROID_CLIENT_ID_HERE',
        iosClientId: 'ADD_YOUR_iOS_CLIENT_ID_HERE',
    });
GoogleSignin.hasPlayServices().then((hasPlayService) => {
        if (hasPlayService) {
             GoogleSignin.signIn().then((userInfo) => {
                       console.log(JSON.stringify(userInfo))
             }).catch((e) => {
             console.log("ERROR IS: " + JSON.stringify(e));
             })
        }
}).catch((e) => {
    console.log("ERROR IS: " + JSON.stringify(e));
})
}} />

On the button press, I’m doing everything. For functionalities like getCurrentUser() or signOut() you can check out the package you installed https://www.npmjs.com/package/@react-native-google-signin/google-signin which has those code snippets, main thing was to generate keys which you have already done. Here is the screenshot of my console log where I’m getting the logged-in user info

Congrats 🙌 🎉! you have successfully implemented google sign-in for your react native project.

Possible Errors

You might face some issues, so I’ve shared solutions to some commonly known ones here:

1: One possible error on android is DEVELOPER_ERROR which will occur if the SHA1 key for android is not implemented correctly. There are many ways you can find on the internet but to generate the key but the one mentioned in this article works and all the others I tried didn’t work.

2: You should be getting null in idToken but if you need the idToken then you need to create a new OAuth client ID credential for the web application and then in the code where we have added iOS and android keys GoogleSignin.configure({... you need to add these two as well:

...
offlineAccess: true,
webClientId: 'YOUR_WEB_APPLICATION_CLIENT_ID_HERE',
...

By doing so you’ll start getting idToken in the userInfo object when the user logs in.

3. If you get Exception ‘Your app is missing support for the following URL schemes:’ import the import statement below in the AppDelegate.m:

#import <GoogleSignIn/GIDSignIn.h>

Build the project once in XCode to make sure it builds successfully and then run the project from VSCode. You’ll also need to check if the iOS URL scheme part above is correctly implemented.

As always if you find this helpful share and press the 👏🏻 button so that others can find it too. If you see a typo feel free to highlight it or if you’re stuck drop a comment and I’ll try my best to help you.

https://www.buymeacoffee.com/chaudhrytalha

All my tutorials are free but if you feel like supporting you can buymeacoffee.com/chaudhrytalha

Happy Coding 👨🏻‍💻