Implementing Google Sign-In using Firebase with React Native.

Hello, this will be my first time to post about React Native. There’s already a lot of guide about this, but there might be some changes in some part of android’s environment and stuff. While it’s still fresh in my mind, I decided to share about how to do it in the simplest way. Let’s just get started!

Requirements

• This article will be using pure react-native init (not expo)
• Already have a prepared project and screen
• React Native > 0.60 is already installed

Implementation Flow

• Make an example screen for Login and Landing page
• Firebase Configuration to setup the authentication and app setup
• @react-native-community/google-signin package implementation in React Native Project
• Run the app

1. Make a simple screen

I’ve already make a simple example screen, here how it looks like. Just ignore the facebook button, because we will be focusing on login with gmail.

2. Install react-native google-signin package

We will be using @react-native-community/google-signin package, you can type the code below in your project’s terminal:

yarn add @react-native-community/google-signin

After the package is installed, it’s time to setup Firebase configuration.

3. Firebase Configuration

Now, we need to create Firebase Project first. You can open the link here to open Firebase Console. After that, page like this will be displayed and just click create a project button.

Fill the requirements with your project name, or you can just use your app’s name.

After that, click the android logo here to add an android app in this project

It will display a page like this.

Note:

• To find Android package name, you can find it from the file here (yourProject -> android -> app -> src -> main -> java -> yourPackageName -> yourAppName -> MainActivity.java). The word after package is your app package name.

• Just skip SHA-1 for now

Next, download google-services.json, it will be required when we setup in Android folder later.

Just skip the firebase sdk setup, and skip the next step also.

Now, we will set the SHA-1 from here, click Project Overview then Project settings

You can get your SHA-1 fingerprint just by follow this guide (first answer) here. If you don’t have keystore yet, you need to make one, follow this guide here to make it. Just comment if you’re confused about it, I will try to help.

Now, we will back to React Native project.

4. Android Installation

A. Update the code in android/build.gradle with

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
        googlePlayServicesAuthVersion = "16.0.1" // <--- use this version or newer
    }
...
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2' // <--- use this version or newer
        classpath 'com.google.gms:google-services:4.1.0' // <--- use this version or newer
    }
...
allprojects {
    repositories {
        mavenLocal()
        google() // <--- make sure this is included
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

B. Update the code in android/app/build.gradle with

...
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:23.0.1"
    implementation "com.facebook.react:react-native:+"
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0' // <-- add this; newer versions should work too
}
apply plugin: 'com.google.gms.google-services' // <--- this should be the last line

C. Copy google-services.json file (downloaded from Firebase configuration before) to yourProject -> android -> app. Complete guide here.

5. Setup Google Login Method

The configuration is already completed, from Firebase to Android folder in React Native Project. Now, it’s time to play around with the code. You can use the method below.

const GoogleLogin = async () => {
    GoogleSignin.configure({
      scopes: ['profile', 'email'], // what API you want to access on behalf of the user, default is email and profile
      webClientId:
        'YOUR WEB_CLIENT_ID', // client ID of type WEB for your server (needed to verify user ID and offline access)
      offlineAccess: true,
    });
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
     
    } catch (error) {
      console.log(error);
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        // user cancelled the login flow
      } else if (error.code === statusCodes.IN_PROGRESS) {
        // operation (e.g. sign in) is in progress already
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        // play services not available or outdated
      } else {
        // some other error happened
      }
    }
  };

The question will be, where to get WEB_CLIENT_ID? You can just open your Firebase console again, click Authenthication from the left-side tab.

Choose Sign-in method from the top-side tab, and copy the Web Client ID there to your code.

My code is look like this at the end.

Login Screen:

Landing Page Screen:

6. Testing in app

Run the app like usual with

react-native run-android

It works!

Bugs Dictionary

This section will contain about some bugs or errors you might encounter while implement this.

A. DEVELOPER ERROR:

• You put the wrong WEB_CLIENT_ID in your code
• You don’t copy google-services.json file correctly
• You register the wrong SHA-1 fingerprint in your Firebase Project. There’s two kind of SHA-1 fingerprint, one for testing and the other one for app. You might accidentally register the testing one, the solution is here. Follow the second answer and open it via Android Studio for the complete SHA-1 data.
• If that still doesn’t work, add your app’s SHA-26 to Firebase Project.

B. SIGN IN — IN PROGRESS

• It could be DEVELOPER_ERROR in disguise. When you try attempt to login more than once, the second error will be SIGN IN — IN PROGRESS. In fact, the main problem is still DEVELOPER_ERROR.
• You will get SIGN_IN-IN_PROGRESS message if the authenticate process is not over yet but you’re trying to sign in again.

Extra Note:

• This implementation is only for debug app, if you want to use it on release app, you need to do an extra step to achieve it. First, you need to create your own keystore to signed-build it into either to .aab or .apk file (to deploy it to Play Store)
• Then, in your Google Play Console, go to App Signing page, copy the your SHA-1 app from there and register it to your Firebase Project like the method we use in this tutorial
• You don’t need ANDROID_CLIENT_ID to implement this
• @react-native-community/google-signin’s repository: here

If you have any advice or suggestions for my future articles, feel free to comment, thanks for reading!