Get Started with React Native + Google Sign In.

How to Set up Google Login in React Native & Firebase.

How to add google sign in react native (Firebase)

Google sign in is a secure Login feature to implement in your React Native App, I will be showing you guys how you can add sign in with Google to your app in a few simple steps

I will be using a React Native Community supported package called react-native-community/google-signin .

Note : This post is made for react-native >= 0.60, if you are using react-native <= 0.59.x then this is not for you

Features

Support all 3 types of authentication methods (standard, with server-side validation, or with offline access (aka server-side access))

Promise-based API consistent between Android and iOS

Typings for TypeScript and Flow

Native signin buttons

Versions

React Native 0.61.5

react-native-community/google-signin 4.0.0

First, create the App using this command in terminal

npx react-native init TypeYourAppNameHere

Navigate to RNGoogleSignInDemo in the terminal like this

cd TypeYourAppNameHere

Now install react-native-community/google-signin

yarn add @react-native-community/google-signin OR npm install --save @react-native-community/google-signin

Since React Native >= 0.60 AutoLinking is supported, we don't need to run linking command.

We do need to do some configuration on the native side but I promise it will be easy.

There are two ways to do this, with or without Firebase and I will be using the one with the Firebase.

Firebase

Search for Firebase and go to Firebase Console

Create a project [ I have already created ] by clicking on Add Project .

Type your project name after that click Continue

Type your project Name after that click Continue

Choose whether you want to add Analytics or not. By default, it’s enabled. Press Continue.

Choose whether you want to add Analytics or not it’s up to your preferences. By default, it’s enabled. Press Continue.

Now your project is created.

Click the android icon in the firebase Console Dashboard

Click the android icon in the firebase Console Dashboard

Fill in the following fields of “Add Firebase to your Android app” to generate config file ( i.e. google-services.json)

Android package name

Debug signing certificate SHA-1

For App’s Package name you can find in android/app/main/AndroidManifest.xml file

For Debug signing certificate SHA-1

In terminal type command for Debug SHA1 (root of the project)

Mac/Linux

keytool -J-Duser.language=en -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Windows

Change the directory to the JDK bin directory. The path of the JDK depends upon the operating system you are using

cd C:\Program Files\Java\jdk1.8.0_121\bin

Now we have to run the following command using the keytool.exe file in JDK/bin

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

If you don’t like terminal then you can use Android Studio instead

When you are done registering your android app with firebase then Download the Config file and place it in android/app

Add Firebase SDK in Project-level build.gradle i.e. android/build.gradle

buildscript {

ext {

buildToolsVersion = "28.0.3"

minSdkVersion = 16

compileSdkVersion = 28

targetSdkVersion = 28

googlePlayServicesAuthVersion = "18.0.0" // Add this line

}

repositories {

google()

jcenter()

}

dependencies {

classpath("com.android.tools.build:gradle:3.4.2")

classpath 'com.google.gms:google-services:4.3.3' // Add this line

// NOTE: Do not place your application dependencies here; they belong

// in the individual module build.gradle files

}

}

Add Google Play Services plugin in App-level build.gradle (android/appp/build.gradle):

apply plugin: 'com.google.gms.google-services' // Add at end of the file

e.g.

In firebase, you will need to enable Google option in SignIn Method section

While enabling Google, do copy the Web Client ID from there, we need this later on.

Let’s get our hands dirty with the code

I will be making a simple app of just two components to App.js (already exists by default) and second will be Home.js.

Import Public Api of @react-native-community/google-signin

import {

GoogleSignin,

GoogleSigninButton,

statusCodes,

} from '@react-native-community/google-signin';

But before you can use above imports you need call once, configure of GoogleSignin. You can call it in ComponentDidMount life Cycle method or you can use useEffect Hook



GoogleSignin.configure({

webClientId: WebClientID, // client ID of type WEB for your server(needed to verify user ID and offline access)

offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER

forceCodeForRefreshToken: true, // [Android] related to `serverAuthCode`, read the docs link below *.

accountName: '', // [Android] specifies an account name on the device that should be used

});

Sign in function

signIn = async () => {

try {

await GoogleSignin.hasPlayServices();

const info = await GoogleSignin.signIn();

console.warn({userInfo: info});

setUserInfo(info);

} catch (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

}

}

};

Sign out function

signOut = async () => {

try {

await GoogleSignin.revokeAccess();

await GoogleSignin.signOut();

setUserInfo(null); // Remember to remove the user from your app's state as well

} catch (error) {

console.error(error);

}

};

Demo App Preview

Do check the official Docs and if you have any questions let me know.

I hope you like this post and I will be posting more post soon and most importantly All suggestions are welcome.