Cómo configurar el inicio de sesión de Google en React Native y Firebase

El inicio de sesión de Google es una excelente función de inicio de sesión para ofrecer a los usuarios de su aplicación. Les facilita crear una cuenta e iniciar sesión.

Y lo que es aún mejor, Firebase hace que sea extremadamente fácil para los desarrolladores agregar soporte para el inicio de sesión de Google. Pero configurar el entorno React Native puede crear algunos desafíos, que se tratan en su totalidad en este tutorial.

React Native y Firebase SDK hacen que la implementación del inicio de sesión de Google sea bastante sencilla. Creemos una aplicación simple que solo tenga un botón de inicio de sesión de Google. Una vez que el usuario inicia sesión correctamente en Google, mostraremos la información del usuario recuperada de su cuenta de Google, así como un botón para cerrar sesión.

También puede agregar el inicio de sesión de Facebook a su aplicación si está interesado en brindar aún más opciones de inicio de sesión a sus usuarios. Puede consultar esta guía para iniciar sesión en Facebook en React Native con Firebase si desea obtener más información sobre cómo configurar el inicio de sesión en Facebook.

¿Por qué utilizar un botón de inicio de sesión de Google en aplicaciones móviles?

  1. El uso de Google u otros terceros puede hacer que su proceso de autenticación sea fluido y amigable. Los usuarios no tienen que perder tiempo en el proceso de registro, lo que mejorará enormemente sus tasas de registro y retención.
  2. Es seguro y protegido.
  3. Los usuarios confían en Google o Facebook más que en un sitio o aplicación desconocidos en Internet.
  4. Proporciona una buena experiencia de usuario. Como usuario, tenemos poca paciencia para cualquier acción o trabajo que necesitemos hacer, especialmente en una aplicación bastante desconocida que estamos probando por primera vez.

Sin más preámbulos, pasemos directamente a la parte de desarrollo de aplicaciones de este tutorial.

Configurando el Proyecto Firebase

Ve a Firebase Console y crea un proyecto de Firebase:

crear un nuevo proyecto de base de fuego

Aquí, necesitaremos configurar el nombre del proyecto de Firebase y el identificador de la aplicación, así que primero creemos la aplicación React Native.

Creando el proyecto React Native

Primero, necesitamos crear un proyecto React Native usando el siguiente comando:

react-native init instamobile-google-login-demo

Aquí, hemos dado el nombre del proyecto como instamobile-google-login-demo . Ahora, necesitamos instalar el paquete react-native-google-signin usando el siguiente comando:

yarn add react-native-google-singin

El react-native-google-signinpaquete se utiliza para implementar funciones de autenticación de Google en la aplicación React Native. Ahora, necesitamos importar los módulos y componentes necesarios del paquete respectivo como se muestra en el fragmento de código a continuación:

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

A continuación, necesitamos crear los estados para manejar el estado de autenticación y la información del usuario. Para eso usamos el useStatemódulo como se muestra en el siguiente fragmento de código:

const [loggedIn, setloggedIn] = useState(false); const [userInfo, setuserInfo] = useState([]);

Ahora, necesitamos crear una función de inicio de sesión para manejar la autenticación como se muestra en el fragmento de código a continuación:

_signIn = async () => { try { await GoogleSignin.hasPlayServices(); const {accessToken, idToken} = await GoogleSignin.signIn(); setloggedIn(true); } catch (error) { if (error.code === statusCodes.SIGN_IN_CANCELLED) { // user cancelled the login flow alert('Cancel'); } else if (error.code === statusCodes.IN_PROGRESS) { alert('Signin in progress'); // operation (f.e. sign in) is in progress already } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) { alert('PLAY_SERVICES_NOT_AVAILABLE'); // play services not available or outdated } else { // some other error happened } } };

A continuación, necesitamos inicializar la configuración del objeto de inicio de sesión de Google aprovechando la useEffectfunción:

useEffect(() => { GoogleSignin.configure({ scopes: ['email'], // what API you want to access on behalf of the user, default is email and profile webClientId: '418977770929-g9ou7r9eva1u78a3anassxxxxxxx.apps.googleusercontent.com', // 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 }); }, []);

Por último, necesitamos una función que maneje la acción de cierre de sesión. Para eso, vamos a implementar el signOutmétodo como se muestra en el fragmento de código a continuación:

signOut = async () => { try { await GoogleSignin.revokeAccess(); await GoogleSignin.signOut(); setloggedIn(false); setuserInfo([]); } catch (error) { console.error(error); } };

Ahora, también necesitamos renderizar los componentes en la pantalla. Para eso, vamos a hacer uso de varios componentes como Viewy Button:

return (           {!loggedIn && You are currently logged out} {loggedIn && (  )}      );

Ahora bien, si ejecutamos nuestro proyecto en el emulador obtendremos los siguientes resultados:

primera pantalla de inicio de sesión de google

Bastante dulce, ¿verdad? Hemos completado la implementación (tanto la interfaz de usuario como la lógica empresarial) a nivel de React Native en nuestro proyecto.

Como puede ver, tenemos un botón "Iniciar sesión con Google" que se convierte en un botón para cerrar sesión una vez que la operación de inicio de sesión se completa con éxito.

Ahora vamos a configurar el paquete Google SignIn y la aplicación Firebase.

Configuración de proyectos nativos de iOS y Android

Hay algunos pasos de configuración que debemos seguir antes de que el proyecto funcione por completo. En su mayoría, están relacionados con el lado nativo real de la aplicación.

Para iOS

Aquí, en VSCode (o cualquier Terminal) simplemente ejecute cd ios && pod install. Luego, abra el archivo .xcworkspace en Xcode (desde la carpeta ios) y asegúrese de que los Pods estén incluidos:

instalar google login lib en xcode

Para Android

1. Primero, necesitamos vincular el módulo nativo.

  • En RN> = 0.60 no debería necesitar hacer nada gracias al enlace automático.
  • En RN <0,60 correr .react-native link react-native-google-signin

2. Actualice android / build.gradle con la siguiente configuración:

buildscript { ext { buildToolsVersion = "27.0.3" minSdkVersion = 16 compileSdkVersion = 27 targetSdkVersion = 26 supportLibVersion = "27.1.1" googlePlayServicesAuthVersion = "16.0.1" // <--- use this version or newer } ... dependencies { classpath 'com.android.tools.build:gradle:3.1.2' // <--- use this version or newer classpath 'com.google.gms:google-services:4.1.0' // <--- use this version or newer } ... allprojects { repositories { mavenLocal() google() // <--- make sure this is included jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } }

3. Actualice android/app/build.gradlecon la siguiente configuración:

... dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.android.support:appcompat-v7:23.0.1" implementation "com.facebook.react:react-native:+" implementation(project(":react-native-community_google-signin")) // <--- add this dependency }

Verifique que react-native linkvinculó el módulo nativo, ¡pero solo si lo utilizó react-native link!

En android/settings.gradle  deberíamos tener las siguientes configuraciones:

... include ':react-native-google-signin', ':app' project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')

A continuación, MainApplication.javadeberíamos tener el paquete de Google agregado como en el siguiente fragmento de código:

import co.apptailor.googlesignin.RNGoogleSigninPackage; // <--- import public class MainApplication extends Application implements ReactApplication { ...... @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new RNGoogleSigninPackage() // <-- this needs to be in the list ); } ...... }

Configurando Firebase

Para iOS

Now, we need to get started on the Firebase configuration. In Firebase, we need to set up a Google cloud app. But when we set up the authentication method on Firebase this also creates an Google cloud app.

First, we need to create Firebase iOS app in order to obtain GoogleServiceinfo.plist as shown in the screenshot below:

agregar un nuevo nombre de aplicación de base de fuego

Next, we copy the GoogleService-info.plist file to the Xcode project as shown in the screenshot below:

agregar plist del servicio de Google a xcode

Now, we need to add the reversed client ID present in the GoogleService-info.plist file to the URL Types, as shown in the screenshot below:

obtener la identificación de cliente inversa de xcode

Next step is to go to InfoURL Types then fill the URL Schemes as shown in the screenshot below:

agregar esquema de URL a xcode

For Android

First, we need to create an Android app on Firebase. For that, we need a package name and certificate SHA-1 from our app. Then, we can register the Firebase app as shown below:

crear una nueva aplicación de base de fuego para Android

We can get the package name in MainApplication.java of our project as highlighted in the code snippet below:

averiguar el nombre del paquete en la aplicación de Android

Next, we can get the SHA-1 key in the Keystore file. In the android/app directory, we can run the command:

cd android/app ; keytool -exportcert -keystore debug.keystore -list -v

Then, the SHA-1 key will appear, as shown in the screenshot below:

generar sha1 para registrar la aplicación de Android en firebase

After successfully creating the Firebase setup app, we need to download the google-services.json file and copy it to the directory, as shown in the screenshot below:

agregar el servicio json de Google a la carpeta de la aplicación Android

Now, the final step is to set up a Google sign-in component in Android.

Installing the React Native Firebase Package

In order to install react-native-firebase package version 6, we need to run the following command in our project command prompt:

# Using npm npm install --save @react-native-firebase/app # Using Yarn yarn add @react-native-firebase/app

The @react-native-firebase/app module must be installed before using any other Firebase service.

For iOS

We already have GoogleService-Info.plist added to Xcode. What is left is to allow Firebase on iOS to use the credentials. The Firebase iOS SDK must be configured during the bootstrap phase of your application.

To do this, we need to open our /ios/{projectName}/AppDelegate.m file, and add the following:

At the top of the file, we need to import the Firebase SDK:

#import 

Within your existing didFinishLaunchingWithOptions method, we need to add the following to the top of the method:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Add me --- \/ if ([FIRApp defaultApp] == nil) { [FIRApp configure]; } // Add me --- /\ // ... }

Finally, we need to run the following command to finalize the installation of the CocoaPods package:

cd ios ; pod install

That's it. Now we have completed the installation of the main Firebase package on iOS

For Android

We need to configure Firebase with Android credentials. To allow Firebase on Android to use the credentials, the google-services plugin must be enabled on the project. This requires modification to two files in the Android directory.

First, add the google-services plugin as a dependency inside your android/build.gradle file:

buildscript { dependencies { // ... other dependencies classpath 'com.google.gms:google-services:4.2.0' // Add me --- /\ } } Lastly, execute the plugin by adding the following to the very bottom of your /android/app/build.gradle file: apply plugin: 'com.google.gms.google-services'

React Native Firebase Authentication Module

After the installation completes, we need to set up the parent Firebase package. Next, we need to install the child module for authentication. For that, we need to open a terminal and run the following command:

yarn add @react-native-firebase/auth

For iOS

We just need to install the pods again in the command prompt:

cd ios/ && pod install

For Android

You can follow the instructions on the official document which is only required if you are using React Native <= 0.59 or need to manually integrate the library.

Activating Google Sign-in on Firebase

We need to go to the Firebase console. Then, in the Authentication section, we need to click on Google as shown in the screenshot below:

método de autenticación en firebase

Next, we need to enable the setup with the following configuration and save the configuration as shown in the screenshot below:

activar el correo electrónico de soporte del proyecto

In App.js, we need to import auth from the Firebase package as shown in the code snippet below:

import auth from '@react-native-firebase/auth';

Next, we need to integrate authentication config to the sign-in function. After a successful login, we store the accessToken and idToken to Firebase. Now, we can try to login with Google on our demo React Native app.

_signIn = async () => { try { await GoogleSignin.hasPlayServices(); const {accessToken, idToken} = await GoogleSignin.signIn(); setloggedIn(true); const credential = auth.GoogleAuthProvider.credential( idToken, accessToken, ); await auth().signInWithCredential(credential); } catch (error) {

Now we have successfully completed the integration of Google Sign-in in our React Native app:

resultado del inicio de sesión de google con react native

We can see new data that is added to the Firebase Console:

firebase authentication console

Tracking User Status

In order to check the user’s login status, we use Firebase Auth. For that, we need to add the onAuthStateChanged method to useEffect in order for it to run in every componentDidMount event call.

Also, we need to pass a callback to the function named onAuthStateChanged as an argument as shown in the code snippet below:

useEffect(() => { ............. const subscriber = auth().onAuthStateChanged(onAuthStateChanged); return subscriber; // unsubscribe on unmount }, []);

In the function onAuthStateChanged, we handle local state data as shown in the code snippet below:

function onAuthStateChanged(user) { setUser(user); console.log(user); if (user) setloggedIn(true); }

Now, we need to store the user data for the state. Then, try to display the user’s data after a successful login. For that, we need to use the following piece of code:

{!user && You are currently logged out} {user && (  Welcome {user.displayName}   )}

We will get the following result in our simulator:

result on show auth username

Firebase Sign Out

For signing out, we need to remove all the user’s credentials and revoke the Google sign-in token.

First, we need to wait for the GoogleSignin module to revoke the access and sign out. Then, we call the signOut method of Firebase auth in order to successfully logout.

The overall code implementation is provided in the code snippet below:

signOut = async () => { try { await GoogleSignin.revokeAccess(); await GoogleSignin.signOut(); auth() .signOut() .then(() => alert('Your are signed out!')); setloggedIn(false); // setuserInfo([]); } catch (error) { console.error(error); } };

As a result, we can now perform logout operations as shown in the code snippet below:

firebase react native sign out result

Conclusion

In this tutorial, we learned how to set up Google Login, along with storing an access token, by leveraging Firebase into our React Native project.

First, we created the React Native project with all the necessary components and function configurations. Then, we learned how to configure the Google Sign In and Firebase for both Android and iOS platforms. Finally, we set up the Firebase in React Native app using a Firebase package and displayed the user data along with sign out button.

You can download the complete source code of this tutorial from Github.

The best part is that Firebase & Google Auth are supported across all the mobile development languages, such as Flutter, Swift or Kotlin. The configuration steps and the architectural approach is exactly the same.

Next Steps

Now that you have learned about setting up Firebase Google Login in React Native apps, here are some other topics you can look into:

  • How to Build a React Native App with Firebase Backend
  • Firebase & React Native - Notificaciones push | Almacenamiento de Firebase
  • Más métodos de autenticación en React Native y Firebase - Google Login | Iniciar sesión en Facebook | Autenticación OTP por SMS del teléfono

Si te gustó este tutorial de React Native, dame una estrella en el repositorio de Github y compártelo con tu comunidad. Puede consultar aún más proyectos React Native gratuitos en Instamobile. ¡Salud!