Añadir Google Sign Auth en React Native y Expo

Tiempo de lectura: 5 minutos

Hoy vamos a aprender cómo podemos implementar la autenticación con Google 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.

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:

npm install --save expo-web-browser

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)