CÓMO IMPLEMENTAR GOOGLE LOGIN EN REACT NATIVE CON FIREBASE
Introducción a Google Login en React Native
La autenticación es un componente esencial en el desarrollo de aplicaciones móviles modernas, ya que garantiza una experiencia de usuario segura y fluida. Implementar Google Login en una aplicación React Native utilizando Firebase permite a los desarrolladores ofrecer un proceso de inicio de sesión rápido y confiable, eliminando la necesidad de formularios de registro largos. Este tutorial detalla paso a paso cómo integrar Google Sign-In en una aplicación React Native, configurando Firebase para gestionar la autenticación en plataformas iOS y Android. Desde la creación del proyecto hasta la implementación de funciones de inicio y cierre de sesión, este artículo proporciona una guía completa para desarrolladores que buscan mejorar la experiencia de usuario en sus aplicaciones móviles.
Ventajas de Usar Google Sign-In
El uso de Google Sign-In en aplicaciones móviles tiene múltiples beneficios. Primero, simplifica el proceso de autenticación, ya que los usuarios pueden iniciar sesión con sus cuentas de Google existentes, lo que reduce la fricción en el registro. Segundo, es un método seguro y confiable, respaldado por la infraestructura de Google. Además, los usuarios tienden a confiar más en proveedores conocidos como Google en comparación con aplicaciones desconocidas. Por último, mejora la experiencia de usuario al minimizar los pasos necesarios para acceder a la aplicación, lo que puede aumentar las tasas de registro y retención.
Creación del Proyecto en Firebase
Para comenzar, es necesario configurar un proyecto en Firebase. Dirígete al Firebase Console y crea un nuevo proyecto. Asigna un nombre al proyecto, como “instamobile-google-login-demo”, y completa los pasos iniciales para configurarlo. Este proyecto servirá como base para gestionar la autenticación de Google en tu aplicación React Native.
Configuración del Proyecto React Native
El primer paso es crear un proyecto React Native. Abre una terminal y ejecuta el siguiente comando para inicializar el proyecto:
npx react-native init instamobile-google-login-demo
Una vez creado, instala el paquete necesario para implementar Google Sign-In:
yarn add @react-native-community/google-signin
Este paquete proporciona las funciones necesarias para gestionar la autenticación de Google en la aplicación. A continuación, importa los módulos necesarios en tu archivo App.js:
import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from "@react-native-community/google-signin";
import { useState, useEffect } from "react";
Gestión de Estados para Autenticación
Para manejar el estado de autenticación y la información del usuario, utiliza el hook useState de React. Define dos estados: uno para el estado de inicio de sesión y otro para almacenar la información del usuario:
const [loggedIn, setLoggedIn] = useState(false);
const [userInfo, setUserInfo] = useState([]);
Estos estados controlarán si el usuario está autenticado y almacenarán los datos obtenidos de Google tras un inicio de sesión exitoso.
Implementación de la Función de Inicio de Sesión
Crea una función asíncrona para manejar el proceso de inicio de sesión con Google. Esta función verifica los servicios de Google Play, solicita el inicio de sesión y actualiza el estado de autenticación:
const _signIn = async () => {
try {
await GoogleSignin.hasPlayServices();
const { accessToken, idToken } = await GoogleSignin.signIn();
setLoggedIn(true);
} catch (error) {
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
alert("Inicio de sesión cancelado");
} else if (error.code === statusCodes.IN_PROGRESS) {
alert("Inicio de sesión en progreso");
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
alert("Servicios de Google Play no disponibles");
} else {
console.error(error);
}
}
};
Configuración Inicial de Google Sign-In
Utiliza el hook useEffect para configurar el objeto de Google Sign-In al iniciar la aplicación. Especifica los permisos necesarios (como el acceso al correo electrónico) y el ID del cliente web proporcionado por Firebase:
useEffect(() => {
GoogleSignin.configure({
scopes: ["email"],
webClientId: "TU_WEB_CLIENT_ID.apps.googleusercontent.com",
offlineAccess: true,
});
}, []);
Reemplaza TU_WEB_CLIENT_ID con el ID de cliente web que se encuentra en la configuración de tu proyecto Firebase.
Implementación de la Función de Cierre de Sesión
Para permitir que los usuarios cierren sesión, implementa una función que revoque el acceso y limpie los datos de autenticación:
const signOut = async () => {
try {
await GoogleSignin.revokeAccess();
await GoogleSignin.signOut();
setLoggedIn(false);
setUserInfo([]);
} catch (error) {
console.error(error);
}
};
Esta función asegura que las credenciales del usuario se eliminen correctamente, permitiendo un cierre de sesión seguro.
Renderizado de la Interfaz de Usuario
Diseña la interfaz de usuario para mostrar el botón de Google Sign-In y, una vez autenticado, los datos del usuario junto con un botón de cierre de sesión. Utiliza componentes como View, Button y Text:
import {
StatusBar,
SafeAreaView,
ScrollView,
View,
Button,
Text,
} from "react-native";
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<GoogleSigninButton
style={{ width: 192, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Dark}
onPress={_signIn}
/>
<View style={{ marginTop: 20 }}>
{!loggedIn && <Text>No has iniciado sesión</Text>}
{loggedIn && (
<View>
<Text>Bienvenido</Text>
<Button
onPress={signOut}
title="Cerrar Sesión"
color="red"
/>
</View>
)}
</View>
</View>
</ScrollView>
</SafeAreaView>
</>
);
Este código crea una interfaz simple con un botón de Google Sign-In que se transforma en un botón de cierre de sesión tras autenticarse.
Configuración de Proyectos Nativos para iOS
Para iOS, asegúrate de que las dependencias necesarias estén instaladas. Ejecuta el siguiente comando en la carpeta del proyecto:
cd ios && pod install
Abre el archivo .xcworkspace en Xcode y verifica que los pods, incluido @react-native-community/google-signin, estén correctamente integrados. Luego, configura el archivo GoogleService-Info.plist descargado desde Firebase y añádelo al proyecto en Xcode. Copia el ID de cliente revertido (REVERSED_CLIENT_ID) del archivo GoogleService-Info.plist y agrégalo a las URL Types en la pestaña Info del proyecto en Xcode.
Configuración de Proyectos Nativos para Android
En Android, asegúrate de que el módulo nativo esté correctamente vinculado. Si usas React Native 0.60 o superior, el enlace automático debería funcionar. De lo contrario, ejecuta:
react-native link @react-native-community/google-signin
Actualiza el archivo android/build.gradle con las siguientes configuraciones:
buildscript {
ext {
buildToolsVersion = "33.0.0"
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33
googlePlayServicesAuthVersion = "20.7.0"
}
dependencies {
classpath 'com.android.tools.build:gradle:7.3.1'
classpath 'com.google.gms:google-services:4.4.2'
}
}
allprojects {
repositories {
mavenLocal()
google()
jcenter()
maven { url "$rootDir/../node_modules/react-native/android" }
}
}
Añade la dependencia en android/app/build.gradle:
dependencies {
implementation(project(':react-native-community_google-signin'))
}
Verifica que el módulo esté incluido en android/settings.gradle:
include ':react-native-google-signin', ':app'
project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')
En MainApplication.java, asegúrate de que el paquete de Google Sign-In esté registrado:
import co.apptailor.googlesignin.RNGoogleSigninPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new RNGoogleSigninPackage()
);
}
Configuración de Firebase para iOS
Descarga el archivo GoogleService-Info.plist desde el Firebase Console al crear una aplicación iOS. Añádelo al proyecto en Xcode. Luego, configura las URL Types en Xcode con el REVERSED_CLIENT_ID del archivo GoogleService-Info.plist. En el archivo AppDelegate.m, importa el SDK de Firebase y configura la inicialización:
#import <Firebase.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
// Resto del código
}
Finaliza la instalación ejecutando:
cd ios && pod install
Configuración de Firebase para Android
Crea una aplicación Android en Firebase utilizando el nombre del paquete de tu aplicación, que puedes encontrar en MainApplication.java. Genera la clave SHA-1 ejecutando:
cd android/app && keytool -exportcert -keystore debug.keystore -list -v
Descarga el archivo google-services.json desde Firebase y colócalo en la carpeta android/app. Añade el plugin de Google Services en android/app/build.gradle:
apply plugin: 'com.google.gms.google-services'
Instalación del Módulo de Autenticación de Firebase
Instala el módulo de autenticación de Firebase ejecutando:
yarn add @react-native-firebase/app @react-native-firebase/auth
Para iOS, reinstala los pods:
cd ios && pod install
Para Android, no se requieren pasos adicionales si usas React Native 0.60 o superior debido al enlace automático.
Activación de Google Sign-In en Firebase
En el Firebase Console, ve a la sección de Autenticación y habilita el proveedor de Google. Configura el correo electrónico de soporte del proyecto y guarda los cambios. Esto activará la autenticación de Google para tu aplicación.
Integración de Firebase en el Inicio de Sesión
Modifica la función de inicio de sesión para integrar las credenciales de Google con Firebase. Importa el módulo de autenticación y actualiza la función _signIn:
import auth from "@react-native-firebase/auth";
const _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) {
console.error(error);
}
};
Seguimiento del Estado del Usuario
Para rastrear el estado de autenticación del usuario, utiliza el método onAuthStateChanged de Firebase en el hook useEffect:
useEffect(() => {
GoogleSignin.configure({
scopes: ["email"],
webClientId: "TU_WEB_CLIENT_ID.apps.googleusercontent.com",
offlineAccess: true,
});
const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
return subscriber;
}, []);
function onAuthStateChanged(user) {
setUserInfo(user);
if (user) setLoggedIn(true);
}
Muestra los datos del usuario en la interfaz:
{
!userInfo && <Text>No has iniciado sesión</Text>;
}
{
userInfo && (
<View>
<Text>Bienvenido {userInfo.displayName}</Text>
<Button onPress={signOut} title="Cerrar Sesión" color="red" />
</View>
);
}
Cierre de Sesión con Firebase
Actualiza la función de cierre de sesión para incluir la eliminación de las credenciales de Firebase:
const signOut = async () => {
try {
await GoogleSignin.revokeAccess();
await GoogleSignin.signOut();
await auth().signOut();
setLoggedIn(false);
setUserInfo([]);
alert("Sesión cerrada con éxito");
} catch (error) {
console.error(error);
}
};
Conclusiones
Este tutorial ha detallado cómo implementar Google Login en React Native utilizando Firebase para gestionar la autenticación de manera eficiente y segura en plataformas iOS y Android. Desde la configuración inicial del proyecto en Firebase y React Native hasta la integración de funciones de inicio y cierre de sesión, se han cubierto todos los pasos necesarios para ofrecer una experiencia de usuario fluida. Los desarrolladores pueden aprovechar estas herramientas para mejorar las tasas de registro y retención, proporcionando un método de autenticación confiable y ampliamente aceptado. Con la flexibilidad de Firebase, esta implementación puede adaptarse a otras plataformas de desarrollo móvil, como Flutter, Swift o Kotlin, utilizando un enfoque arquitectónico similar.