Añadir Google Sign Auth inicio de sesión con Google en React Native y Expo

Tiempo de lectura: 5 minutos

Hoy vamos a aprender cómo podemos implementar la autenticación con Google para poder hacer inicio de sesión con una cuenta Google mediante Google Sign en nuestra APP de React Native.

Teniendo nuestro proyecto React Native inicializado. Vamos a utilizar la librería (https://docs.expo.dev/versions/latest/sdk/auth-session/ ).

Antes de nada abrimos app.json y añadimos los campos «name» y «slug«:

"expo": {
    "name": "Nombre_app",
    "slug": "Nombre_app",

Y dentro de app.json en el apartado de iOS:

 "ios": {
      "bundleIdentifier": "com.nombre_app",

También hay que añadir el package en Android:

  "android": {
      "package": "com.nombre_app",

Ahora, hay que iniciar sesión en Google Developer Center (https://cloud.google.com/developers?hl=es-419):

Pulsas en > Comenzar gratis y te unes.

Una vez dentro, pulsas en consola.

Dentro de la consola, tienes que crear un nuevo proyecto. Pulsas en el cajón que aparece arriba a la izquierda del título dónde pone Google Cloud (en mi caso aparece ya un proyecto):

Te abre una nueva ventana y eliges Proyecto Nuevo:

Ahora añadimos el nombre que queramos y pulsar en create.

Una vez creado, seleccionamos nuestro proyecto.

Ahora pulsamos en menú de navegación:

Ahora pulsamos en APIs y servicios y seleccionamos Credenciales:

Ahora pulsamos en Crear Credenciales y elegimos ID de cliente OAuth:

Podemos crear un credencial WEB:

Como estamos utilizando la librería de Auth-Expo, tenemos que añadir esta dirección en Orígenes autorizados de JavaScript

https://auth.expo.io

Ahora tenemos que indicar la dirección de nuestra APP para redireccionar:

Ponemos nuestro nombre de usuario de expo y el campo de slug que hemos configurado en el primer paso.

https://auth.expo.io/@nombre_usuario_expo/Nombre_app

Y pulsamos en crear:

Y nos crea la clave de cliente y clave privada.

Ahora copiamos el Client ID y creamos un nuevo archivo javascript (clientsIDLogin.js) que copiamos en la carpeta util de nuestra app (si no existe la carpeta, puedes crearla o crear otra similar).

import { Platform } from "react-native";

export function clientIDLogin() {
    
    var objDevuelto =  {
        clientId: "cliente_web",
        iosClientId: "cliente_ios",
        androidClientId: "cliente_android",

    };
    return objDevuelto ;
}

Tendremos que ir completando este archivo con los Client ID de cada plataforma:

Ahora elegimos Android:

Añadimos tipo de app Android, indicamos el nombre que queramos para identificar la clave y en nombre de paquete ponemos el contenido de package que hemos completado antes en app.json

Ahora falta rellenar la huella SHA-1 del certificado con el que firmamos la APP.

Para obtenerla vamos al terminarl de VS Code y escribimos:

expo credentials:manager -p android

Ahora pregunta si queremos utilizar el directorio actual.

Pulsamos Y

Ahora nos pedirá si queremos subir nuestra clave KeyStore:

Elegimos y podemos generar nuestra clave o subir nuestra propia clave.

Si generamos una nueva, se generará y se almacenará en Expo.

Ahora pulsamos en Go Back to experience overview.

Y ahora devolverá el certificado fingerprint:

Es el qué tenemos que copiar y pegar dentro de Huella Digital que nos pide:

También podemos ir a nuestro dashboard de Expo y pulsar en Credentials, ahí dentro tendremos los certificados.

También tenemos que activar Esquema de URI personalizado para que funcione con esta librería. Para ello vamos a Configuración Avanzada > Habilitar el esquema de URI personalizado

Una vez generado, añadimos el client id a nuestro archivo clientsIDLogin.js.

Ahora vamos a crear el cliente iOS:

Indicamos tipo de aplicación iOS, indicamos el nombre que queramos para identificar nuestra clave y en ID del paquete indicamos el bundleIdentifier.

Una vez creado, lo añadimos al fichero clientsIDLogin.js que hemos creado.

Después instalamos la librería expo-auth-session usando el siguiente comando:

npx expo install expo-auth-session expo-random 

También instalamos expo-web-browser:

npx expo install expo-web-browser

Y para iOS además tendremos que hacer:

npx pod-install

Ahora vamos a nuestra screen de iniciar sesión y añadimos lo siguiente:

import React, { useState, useEffect } from "react";
import * as GoogleAuth from 'expo-auth-session';
import * as NavegadorExterno from 'expo-web-browser';

import {clientIDLogin} from '../util/clientsIDLogin';

//inicializamos antes del render:
NavegadorExterno.maybeCompleteAuthSession();

const Login = ({ navigation, route }) => {

     const [acessToken, setAccessToken] = useState(null);
    const [objUser, setObjUser] = useState(null);
    const [request, responser, promtAsyc] = GoogleAuth.useIdTokenAuthRequest(
        clientIDLogin(),
    );

 useEffect(() => {
       if (responser?.type === 'success') {
            setAccessToken(responser.authentication.accessToken);
            if (accessToken) {
                obtenerDatosUsuarioGoogle();
            }
        }

    }, [responser, accessToken] 
    );

 async function obtenerDatosUsuarioGoogle() {
        const response = await fetch('https://www.googleapis.com/userinfo/v2/me', {
            headers: { Authorization: `Bearer ${accessToken}` },
        });
        const objUser = await response.json();
        setObjUser(objUser);
        //Validar el login:
        //login(objUser.email, objUser.id);
    }



    return (
        <View style={styles.contenedor}>
           <Button
 onPress={() => { promtAsync(); }}
  title="Iniciar sesión Google"
/>
        </View>
    )
};

export default Login;

Recuerda que para poder probar que todo funciona, tendrás que ejecutar la APP como nativa (Como crear un build development usando Expo EAS con React Native)