Google Login in React Native

ashwini gupta

29 October 2021

We are going to show you how to integrate the google sign-in in our React Native application.

Google+ sign-in allow users to sign-in by your React Native app with their existing Google account and get their profile information like name, email, profile pic, and other details.

The main advantage of integrating G+ login is, you can encourage more users to your app by providing fast & easiest way of a registration process.

The react-native-google-signin provides a wrapper around the official Google login library, providing access to the users accessToken and idToken which are required to create a Firebase credential.

Steps:-

Step 1: Configure the library.

The configure the method only needs to be called once during your app’s lifecycle.
Configuration settings can be obtained from here;

import { GoogleSignin } from 'react-native-google-signin'; async funtion bootstrap() { await GoogleSignin.configure(); }

1
2
3
4
5

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

async funtion bootstrap() {
await GoogleSignin.configure();
}

Step 2: Login with Google

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

.........
........
async googleLogin() {
  try {
     await GoogleSignin.signIn().then((data)=>{
      AsyncStorage.getItem(AppConstant.PREF_USER_ID).then(userId => {
        this.callSocialLoginAPI(data.user, userId);
        GoogleSignin.signOut();
      });
     });
  } catch (e) {
   console.log(e);
   showErrorToast(StringConstant.SOMETHING_WENT_WRONG);
  }
}

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

.........

........

async googleLogin() {

try {

await GoogleSignin.signIn().then((data)=>{

AsyncStorage.getItem(AppConstant.PREF_USER_ID).then(userId => {

this.callSocialLoginAPI(data.user, userId);

GoogleSignin.signOut();

});

} catch (e) {

console.log(e);

showErrorToast(StringConstant.SOMETHING_WENT_WRONG);

}

Step 3: Parse response of GoogleSignin.signIn() and get current Google user profile information like name, email, profile pic, and other details.

Step 4: Call your domain Social Login API callSocialLoginAPI and validate Google User.

Sources – https://github.com/react-native-community/react-native-google-signin