Implementar Inicio de Sesión Google en Android con React Native y Expo y validar con un servidor en Python

Tiempo de lectura: 4 minutos

Hoy vamos a aprender cómo podemos implementar inicio de sesión Google Sign usando React Native y Expo de forma sencilla.

Lo primero que haremos es utilizar esta librería @react-native-google-signin/google-signin

La instalamos:

npx expo install @react-native-google-signin/google-signin

Una vez instalada vamos a configurarla.

Primero crearemos nuestro manejador en Typescript:

import React from "react";
import { View, Button, Text, StyleSheet } from "react-native";
import {
  GoogleSignin,
  SignInResponse,
  statusCodes,
} from "@react-native-google-signin/google-signin";

// Configuración inicial de Google
GoogleSignin.configure({
  webClientId: "TU_WEB_CLIENT_ID.apps.googleusercontent.com", // TODO: añade tu clientId de Google
  iosClientId: "TU_IOS_CLIENT_ID.apps.googleusercontent.com", // opcional si usas iOS
  scopes: ["profile", "email"],
});

// Función para cerrar sesión
export async function cerrarSesionGoogle() {
  try {
    const currentUser = await GoogleSignin.getCurrentUser();
    if (currentUser) {
      await GoogleSignin.signOut();
      console.log("Sesión cerrada exitosamente");
    } else {
      console.log("No hay una sesión activa");
    }
  } catch (error) {
    console.error("Error al cerrar sesión:", error);
  }
}

// Componente de login con Google
const GoogleAuthentication: React.FC = () => {
  const handleGoogleLogin = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo: SignInResponse = await GoogleSignin.signIn();

      const data = userInfo.data;
      const idToken = data?.idToken;
      const user = data?.user;

      console.log("Información del usuario:", userInfo);

      if (idToken) {
        console.log("idToken:", idToken);

        // TODO: aquí puedes enviar el idToken a tu servidor para validarlo
        // Por ejemplo con axios:
        // await axios.post("https://miapi.com/loginGoogle", { token: idToken });

        // TODO: aquí podrías guardar datos de sesión en AsyncStorage o Context
      }
    } catch (error: any) {
      console.log("Error en login con Google:", error);

      switch (error.code) {
        case statusCodes.SIGN_IN_CANCELLED:
          console.log("El usuario canceló el login");
          break;
        case statusCodes.IN_PROGRESS:
          console.log("Login en progreso");
          break;
        case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
          console.log("Google Play Services no disponibles");
          break;
        default:
          console.log("Otro error:", error);
      }
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login con Google (Ejemplo Genérico)</Text>
      <Button title="Iniciar sesión con Google" onPress={handleGoogleLogin} />
      <View style={{ marginTop: 10 }} />
      <Button title="Cerrar sesión" onPress={cerrarSesionGoogle} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
  title: { fontSize: 18, marginBottom: 20 },
});

export default GoogleAuthentication;

Y ahora vamos a crear el código que nos permitirá iniciar sesión.

webClientId: «TU_WEB_CLIENT_ID.apps.googleusercontent.com», // TODO: añade tu clientId de Google

para ello tenemos que ir a la consola de Firebase

Una vez dentro elegimos el proyecto y pulsamos en descripción general > Authentication

Aquí debemos habilitar la autenticación Google pulsando en Método de acceso

Elegimos Google y habilitamos:

Ahora tendremos qué añadir la clave SHA de nuestros ceritifcados.

Para ello usamos este comando:

keytool -list -v -keystore android/app/debug.keystore -alias androiddebugkey -storepass android -keypass android

Con este comando obtenemos el certificado sha de la clave de firma para el entorno de desarrollo.

Si queremos la de producción podemos aplicar el mismo comando con la clave de producción y alias y contraseña correctos o bien descargarlo desde expo.

Una vez tenemos la clave SHA la copiamos en el apartado correspondiente: configuración del proyecto > general > tus apps

Una vez tengamos las claves pegadas tenemos que generar nuestro código de cliente. Para ello simplemente volvemos a Google Sign y Abrimos Configuración SDK Web

Copiamos este código y es el que tenemos que utilizar en el código del cliente:

webClientId: "TU_WEB_CLIENT_ID.apps.googleusercontent.com",

Una vez añadido vamos a validar la llamada.

Para ello tenemos que enviar el token obtenido una vez se hace login google a un servidor en este caso en Python.

 console.log("Información del usuario:", userInfo);

      if (idToken) {
        console.log("idToken:", idToken);

        // TODO: aquí puedes enviar el idToken a tu servidor para validarlo
        // Por ejemplo con axios:
        // await axios.post("https://miapi.com/loginGoogle", { token: idToken });

El código de validación será el siguiente:

def validar_token_google(tokenId):
    CLIENTS_IDs = ["",
                   ""]

    #print(f"El token para validar es: {tokenId}")

    try:
        id_info = id_token.verify_oauth2_token(tokenId, requests.Request())
        # Or, if multiple clients access the backend server:
        # idinfo = id_token.verify_oauth2_token(token, requests.Request())

        #print(f"La información del token es: {id_info}")

        # Verificar que el client id es correcto
        if id_info["azp"] not in CLIENTS_IDs:
            raise ValueError("El cliente no es válido.")

        userid = id_info["sub"]
        # print(f"El usuario es: {userid}")
        # Si llega a este punto, el token es válido
        return id_info
    except ValueError as e:
        # El token no es válido
        print(f"Error de validación: {e}")
        return -1

Aqui tenemos que añadir la variable: CLIENTS_IDs = ["", ""]

Para ello tenemos que decodificar el token obtenido (idToken) desde esta web: https://www.jwt.io/

Y tenemos que obtener el valor del campo azp y lo añadimos al array de variables posibles. Si tenemos más clientes podemos añadir más.

Esto verificará correctamente el token.