Google Login Using React Native

Description

 

In this article we will learn how to implement Google Login in React Native. I will explain this step by step. I assume that you have basic knowledge of React js. So let’s start our implementation.

 

Output

 

 

Prerequisite

• Getting Started React Native: https://reactnative.dev/docs/getting-started
• Required Plugin: https://www.npmjs.com/package/react-native-google-signin

To create fa Futter app follow the following steps,

 

Step 1

 

First step is to create a new React Native app. Following is the command for that:

npx react-native init GPlusLogin
cd GPlusLogin

Step 2

 

Then, run the app. I am running the project on my device using the following command:

react-native run-android

So now we are having a default app run on our device.

 

Step 3

 

Now, we will install a plugin to implement Google login in React native app. Following is the plugin installation command for that:

npm i react-native-google-signin

Step 4

 

Follow the documentation for Android and ios project setup.

 

Step 5

 

Once Android setup is done by following Step 4, you have google-service.json file. Place the generated configuration file (google-services.json) into <YOUR_PROJECT_ROOT>/android/app

 

Step 6

 

Update android/build.gradle with

buildscript {
...
    dependencies {
        ...
        classpath('com.google.gms:google-services:4.3.3') // ADD THIS
    }
...
}

Step 7

 

Update android/app/build.gradle with

android {
   ...
   signingConfigs {
        release { // CHANGE FROM debug TO release
           storeFile file('debug.keystore')
           storePassword 'android'
           keyAlias 'androiddebugkey'
           keyPassword 'android'
       }
   }
}
dependencies {
   ...
}
apply plugin: 'com.android.application' // ADD THIS
apply plugin: 'com.google.gms.google-services’ // ADD THIS

Step 8

 

Great -- you are done with setup. Now we will programmatically implement Google login, silent login and logout. So below is the programming for that. Open App.js and place it into it.

import React, { useEffect, useState } from 'react';
import {
 StyleSheet,
 View,
 StatusBar,
 TouchableOpacity,
 Text,
 Image
} from 'react-native';
import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';
GoogleSignin.configure({
 webClientId: '--------------.apps.googleusercontent.com', // client ID of type WEB for your server (needed to verify user ID and offline access)
 });
const App: () => React$Node = () => {
 const [isLoggedIn, setIsLoggedIn] = useState(false)
 const [userInfo, setUserInfo] = useState(null)
 useEffect(() => {
   getCurrentUserInfo();
 }, []);
 const getCurrentUserInfo = async () => {
   try {
     const userInfo = await GoogleSignin.signInSilently();
     console.log(userInfo);
     setIsLoggedIn(true);
     setUserInfo(userInfo);
   } catch (error) {
     if (error.code === statusCodes.SIGN_IN_REQUIRED) {
       // user has not signed in yet
     } else {
       // some other error
     }
   }
 };

 const _signIn = async () => {
   try {
     await GoogleSignin.hasPlayServices();
     const userInfo = await GoogleSignin.signIn();
     console.log(userInfo);
     setIsLoggedIn(true);
     setUserInfo(userInfo);
   } 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
     }
   }
 };

 const _signOut = async () => {
   try {
     await GoogleSignin.revokeAccess();
     await GoogleSignin.signOut();
     setIsLoggedIn(false);
   } catch (error) {
     console.error(error);
   }
 }
 return (
   <>
     <StatusBar barStyle="dark-content" />
     <View style={styles.container} >
       {
         !isLoggedIn ?
           <GoogleSigninButton
             style={{ width: 192, height: 48 }}
             size={GoogleSigninButton.Size.Wide}
             color={GoogleSigninButton.Color.Dark}
             onPress={_signIn}
           /> :
           <>
             <Text>Email: {userInfo ? userInfo.user.email : ""}</Text>
             <Text>Name: {userInfo ? userInfo.user.name : ""}</Text>
             <TouchableOpacity style={styles.signOutBtn} onPress={_signOut}>
               <Text style={styles.signOutBtnText}>Signout</Text>
             </TouchableOpacity>
           </>
       }
     </View>
   </>
 );
};

const styles = StyleSheet.create({
 container: { flex: 1, justifyContent: "center", alignItems: "center" },
 signOutBtn: {
   backgroundColor: "#556688",
   padding: 10,
   borderRadius: 10
 },
 signOutBtnText: {
   color: "white"
 }
});

export default App;

Step 9

 

Great you are done with it. Now run and check the app.

 

Conclusion

 

In this article we have learned how to integrate Google Login using React Native.