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:
  1. npx react-native init GPlusLogin
  2. cd GPlusLogin
Step 2
Then, run the app. I am running the project on my device using the following command:
  1. 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:
  1. 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
  1. buildscript {
  2. ...
  3. dependencies {
  4. ...
  5. classpath('com.google.gms:google-services:4.3.3') // ADD THIS
  6. }
  7. ...
  8. }
Step 7
Update android/app/build.gradle with
  1. android {
  2. ...
  3. signingConfigs {
  4. release { // CHANGE FROM debug TO release
  5. storeFile file('debug.keystore')
  6. storePassword 'android'
  7. keyAlias 'androiddebugkey'
  8. keyPassword 'android'
  9. }
  10. }
  11. }
  12. dependencies {
  13. ...
  14. }
  15. apply plugin: 'com.android.application' // ADD THIS
  16. 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.
  1. import React, { useEffect, useState } from 'react';
  2. import {
  3. StyleSheet,
  4. View,
  5. StatusBar,
  6. TouchableOpacity,
  7. Text,
  8. Image
  9. } from 'react-native';
  10. import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';
  11. GoogleSignin.configure({
  12. webClientId: '--------------.apps.googleusercontent.com', // client ID of type WEB for your server (needed to verify user ID and offline access)
  13. });
  14. const App: () => React$Node = () => {
  15. const [isLoggedIn, setIsLoggedIn] = useState(false)
  16. const [userInfo, setUserInfo] = useState(null)
  17. useEffect(() => {
  18. getCurrentUserInfo();
  19. }, []);
  20. const getCurrentUserInfo = async () => {
  21. try {
  22. const userInfo = await GoogleSignin.signInSilently();
  23. console.log(userInfo);
  24. setIsLoggedIn(true);
  25. setUserInfo(userInfo);
  26. } catch (error) {
  27. if (error.code === statusCodes.SIGN_IN_REQUIRED) {
  28. // user has not signed in yet
  29. } else {
  30. // some other error
  31. }
  32. }
  33. };
  35. const _signIn = async () => {
  36. try {
  37. await GoogleSignin.hasPlayServices();
  38. const userInfo = await GoogleSignin.signIn();
  39. console.log(userInfo);
  40. setIsLoggedIn(true);
  41. setUserInfo(userInfo);
  42. } catch (error) {
  43. console.log(error);
  44. if (error.code === statusCodes.SIGN_IN_CANCELLED) {
  45. // user cancelled the login flow
  46. } else if (error.code === statusCodes.IN_PROGRESS) {
  47. // operation (e.g. sign in) is in progress already
  48. } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
  49. // play services not available or outdated
  50. } else {
  51. // some other error happened
  52. }
  53. }
  54. };
  56. const _signOut = async () => {
  57. try {
  58. await GoogleSignin.revokeAccess();
  59. await GoogleSignin.signOut();
  60. setIsLoggedIn(false);
  61. } catch (error) {
  62. console.error(error);
  63. }
  64. }
  65. return (
  66. <>
  67. <StatusBar barStyle="dark-content" />
  68. <View style={styles.container} >
  69. {
  70. !isLoggedIn ?
  71. <GoogleSigninButton
  72. style={{ width: 192, height: 48 }}
  73. size={GoogleSigninButton.Size.Wide}
  74. color={GoogleSigninButton.Color.Dark}
  75. onPress={_signIn}
  76. /> :
  77. <>
  78. <Text>Email: {userInfo ? userInfo.user.email : ""}</Text>
  79. <Text>Name: {userInfo ? userInfo.user.name : ""}</Text>
  80. <TouchableOpacity style={styles.signOutBtn} onPress={_signOut}>
  81. <Text style={styles.signOutBtnText}>Signout</Text>
  82. </TouchableOpacity>
  83. </>
  84. }
  85. </View>
  86. </>
  87. );
  88. };
  90. const styles = StyleSheet.create({
  91. container: { flex: 1, justifyContent: "center", alignItems: "center" },
  92. signOutBtn: {
  93. backgroundColor: "#556688",
  94. padding: 10,
  95. borderRadius: 10
  96. },
  97. signOutBtnText: {
  98. color: "white"
  99. }
  100. });
  102. 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.