Implementing Google Sign-In using Firebase with React Native.

 

1. Install react-native google-signin package

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

2. 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.

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.

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

Now open project setting from firebase, 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.

3. Android Installation

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

buildscript {    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion =  21
        compileSdkVersion = 33
        targetSdkVersion = 33        ndkVersion = "23.1.7779620"        kotlinVersion = "1.7.0"        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        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin: $kotlinVersion"
    }
...
allprojects {
    repositories {
        mavenLocal()
        google() // <--- make sure this is included
        jcenter()
    }
}

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.

4. 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();
    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
      }
    }
  };