Google Sign-in for React-Native Android

Part ɪɪ: React-Native UI│Story 08: User Sign-in component and Google Sign-in implemented for iOS platform

Bharat Tiwari

Published in

Fullstack with React-Native, AWS Serverless and Google oAuth2 Sign-In

7 min readFeb 4, 2019

GIT : Repo | Feature/Story branch| PR

Earlier in the series, we created a Firebase project for our app in firebase console and added an iOS app to it to register for Google SignIn service for iOS platform.

In this post we would add an Android app to our app’s firebase project to register Google SignIn service for Android platform.

Obtain the SHA1 Hash of our app’s debug/dev version

Android requires that all app APKs be digitally signed with a certificate before they can be installed. And you need to sign your Android App Bundle before you can upload it to the Play Console.

When you are finally ready to release your app, you can either opt to use Google Play to securely manage and store your app signing key or you can opt to manage and secure keystore and app signing key on your own.

For debug mode i.e when we are running our project from Android studio IDE, Android studio creates a debug keystore and certificate and using this certificate it would automatically sign up the app to debug. (Learn more about app signing here.)

We can easily obtain the SHA1 hash of this debug keystore.

Open the notewordy/android project in Android Studio.

$ open -a /Applications/Android\ Studio.app ./android

With the app project open in Android Studio, make sure you have its Gradle pane open. You can open it by selecting from top main menu ➛ View ➛ Tool Windows ➛ Gradle.

The Gradle pane should now be open in Android studio. In the Gradle window, expand to project ➛project (root) ➛ Tasks android ➛ signing report. Right click on signing report and click Run android [signingReport] option.

Once the report is run, you would be able to see the SHA1 hash of the key in the Run window of Android studio.

📌 🅝🅞🅣🅔 # 1 : Note down this SHA1 hash of the debug keystore.

Add Android App to Firebase project

Go to the app’s Firebase project dashboard.
Click on Add app and then click on Android button

3. Register Android App

Enter Android package name = com.jsifiedbrains.notewordy
App Nick Name = NoteWordy Android App
Debug signing certificate = SHA1 hash of your Android signing keystore that we obtained and noted down above 👇

Click on Register App button

Get configuration file

After you register the app, a config file would be generated. Download the file and store it in a folder where you would remember it.

📌 🅳🅾🆆🅽🅻🅾🅰🅳 2 :google-services.json file for Android

You can stop here at step # 2 of Adding the Android app to Firebase, no need to follow next steps.

Setting up OAuth 2.0

We added an Android App to our Firebase Project. Next we have to register this Android App for OAuth 2.0 so that it can be used for Google SignIn services:

Go to the Google Cloud Platform Console.
From the projects list, select the project we created in Firebase console i.e. noteWordy.
From the left side panel menu, select API & Services. and select Credentials from the sub-menu.

👆 Add the SHA1 hash key noted down in Note # 1.

Add 𝚐𝚘𝚘𝚐𝚕𝚎-𝚜𝚎𝚛𝚟𝚒𝚌𝚎𝚜.𝚓𝚜𝚘𝚗 to Android project

(Follow the instructions from here or just follow along below)

Go back to the notewordy project in Android Studio ( or open the notewordy/android project in Android Studio if you don’t have it already open.)

$ open -a /Applications/Android\ Studio.app ./android

2. Copy-Paste the google-services.json file for the Firebase Android app we downloaded above to the app folder of the android project i.e. place the file in <project_root>/android/app folder.

3. Update android/build.gradle with below code thats in bold 👇

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
        googlePlayServicesAuthVersion = "15.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.2.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"
        }
    }
}

👆make sure you use the latest version of com.google.gms:google-services, else there may be some build errors.

4 . Update android/app/build.gradle 👇

...
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:23.0.1"
    implementation "com.facebook.react:react-native:+"
    implementation(project(":react-native-google-signin"))
}apply plugin: 'com.google.gms.google-services' // <--- this should be the last line

5 . Check that react-native link linked the native module

in android/settings.gradle you should have have the below code thats in bold 👇

...
include ':react-native-google-signin', ':app'
project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-signin/android')

in MainApplication.java you should have 👇

...
...
import co.apptailor.googlesignin.RNGoogleSigninPackage;
...  public class MainApplication extends Application implements ReactApplication {......@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNGoogleSigninPackage() //<-- this needs to be in the list
      );
    }
  ......}

With all the changes done above, build the project in Android Studio to make sure its building successfully :

This completes the Google SingIn configuration for Android. Now lets run the app on Android and check if Google SignIn is working on Android.

Make sure an android simulator/AVD is running or an Android device is connected. With react-native app’s root folder as pwd on the terminal, run the command:

$ react-native run-android

👏 Superb!!! Now, our android users can also sign in to our app using their Google Accounts.

Web ClientId for Google Sing-in

We would also need to get a Web ClientId for Google SignIn services.

Why we need Google Sign-in ClientId for Web for mobile platform?

To access AWS resources like the serverless API, we have to get our signed in Google user authenticated with AWS Federated Identity Pool as well (with OIDC as authentication provider). To authenticate with AWS Identity Pool, we need to provide it with the idToken issued by Google Sign-in services for the user’s session.
We are going to use the plugin react-native-google-signin to sign-in to google account. This plugin needs a webClientId to be provided in its configuration to get idToken issued by google when signing in as discussed here.

1 . Logged in with your Google Developer’s account, go to Google Cloud Platform Console.

2 . From the projects list, select the project we created in Firebase console i.e. noteWordy.

3 . From the left side panel menu, select API & Services and select Credentials from the sub-menu.

4 . Under the OAuth Client Ids section, check if there is any existing Web Client already created for the oAuth services like in below screen-shot.

(If you don’t see a Web Client registered for your app, you can easily create one like explained here)

📌 🅝🅞🅣🅔 # 2: Note down this Web Client ID

That’s it. In the next post, we would add redux to our app to have the data shared across the app’s various components.

← Prev:Routing, Home Screen┈🏠┈ Next: Add Redux→