FirebaseAuth Implementation - Google

Before you start

• Have Firebase installed in project
• Have CocoaPods installed in project
• Have React Native Firebase installed in project
  • Complete the Getting Started section in their document.
  • Make sure you complete both iOS & Android setup!!!
• Ensure the “Google” sign-in provider is enabled on the Firebase Console.

SHA1 key for Android

The debug signing certificate is optional to use Firebase with your app, but is required for Dynamic Links, Invites and Phone Authentication. To generate a certificate run cd android && ./gradlew signingReport. This generates two variant keys. You have to copy both ‘SHA1’ and ‘SHA-256’ keys that belong to the ‘debugAndroidTest’ variant key option. Then, you can add those keys to the ‘SHA certificate fingerprints’ on your app in Firebase console.

Install & Setup google-signin

Install the package using yarn:

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

or npm:

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

For Expo guide, check Expo setup | React Native Google Sign In (react-native-google-signin.github.io)).

For Web guide, check Web setup guide | React Native Google Sign In (react-native-google-signin.github.io)

iOS setup

Link the native module

Run pod install in ios/ directory to install the module.

Get an OAuth client ID

Go to this page, then in Get an OAuth client ID section and Create an OAuth client ID.

Follow the wizard and input your project’s information, and on this section, select iOS and input your ios app bundle ID.

Then you will get the Client ID as below:

You should now have a CLIENT_ID and REVERSED_CLIENT_ID. Don’t forget update your GoogleService-Info.plist in your project by downloading from Firebase Console.

Xcode configuration

• Configure URL types in the Info panel (see screenshot)
  • add a URL with scheme set to your REVERSED_CLIENT_ID (found inside GoogleService-Info.plist or Google Cloud console)
• If you need to support Mac Catalyst, you will need to enable the Keychain Sharing capability on each build target. No keychain groups need to be added.

Optional: modify your app to respond to the URL scheme

This is only required if you have multiple listeners for openURL - for instance if you have both Google and Facebook OAuth (as seen in the code snippet below).

Because only one openURL method can be defined, if you have multiple listeners for openURL, you must combine them into a single function in your AppDelegate.mm like so:

• Open AppDelegate.mm in your project [/ios/YOUR_PROJECT_NAME/]
• Add an import: #import <GoogleSignIn/GoogleSignIn.h>
• Add a method to respond to the URL scheme. This is just an example of a method that you can add at the bottom of your file if you’re using both FBSDKApplicationDelegate and RNGoogleSignin :

// AppDelegate.mm
- (BOOL)application:(UIApplication *)application openURL:(nonnull NSURL *)url options:(nonnull NSDictionary<NSString *,id> *)options {
  return [[FBSDKApplicationDelegate sharedInstance] application:application openURL:url options:options] || [GIDSignIn.sharedInstance handleURL:url];
}

Here is what it should look like:

Android Setup

Get an OAuth client ID

Go to this page, then in Get an OAuth client ID section and Create an OAuth client ID.

Follow the wizard and input your project’s information, and on this section, select Android and input your ios app bundle ID, and the SHA-1 you just create.

Then you will get the Client ID as below:

You should now have a CLIENT_ID and WEB_CLIENT_ID. Don’t forget update your GoogleService-Info.json in your project by downloading from Firebase Console.

Google project configuration

After setting up your SHA-1, you should see there’s a debug.keystore in \android\app\. and make sure it is include in android/app/build.gradle:

Add google-services

Update android/build.gradle with:

buildscript {
    ext {
        buildToolsVersion = "a.b.c"
        minSdkVersion = x
        compileSdkVersion = y
        targetSdkVersion = z
        googlePlayServicesAuthVersion = "20.7.0" // <--- use this version or newer
    }
// ...
    dependencies {
        classpath 'com.google.gms:google-services:4.4.0' // <--- use this version or newer
    }
}

Here is what it should like:

Update android/app/build.gradle with:

apply plugin: 'com.google.gms.google-services'

Here is what it should like:

This ends the setup for Firebase.

Usage

Before triggering a sign-in request, you must initialize the Google SDK using your any required scopes and the webClientId, which can be found in the android/app/google-services.json file as the client/oauth_client/client_id property (the id ends with .apps.googleusercontent.com). Make sure to pick the client_id with client_type: 3

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

GoogleSignin.configure({
  webClientId: '', // Your webClientID 
});

Once initialized, setup your application to trigger a sign-in request with Google using the signIn method.

Here is a sample code:

import React from 'react';
import { Button } from 'react-native';

import auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-google-signin/google-signin';

const onGoogleButtonPress = async () => {
  // Check if your device supports Google Play
  await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
  // Get the users ID token
  const { idToken } = await GoogleSignin.signIn();

  // Create a Google credential with the token
  const googleCredential = auth.GoogleAuthProvider.credential(idToken);

  // Sign-in the user with the credential
  return auth().signInWithCredential(googleCredential);
}

const GoogleSignIn = () => {
  return (
    <Button
      title="Google Sign-In"
      onPress={() => onGoogleButtonPress().then(() => console.log('Signed in with Google!'))}
    />
  );
}

Upon successful sign-in, any onAuthStateChanged listeners will trigger with the new authentication state of the user.

If you are testing this feature on an android emulator ensure that the emulate is either the Google APIs or Google Play flavor.

References

1. Hello from React Native Google Sign In | React Native Google Sign In (react-native-google-signin.github.io)
2. React Native Firebase | React Native Firebase (rnfirebase.io)