Implementar inicio de sesión con Google en React

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo podemos implementar inicio de sesión con Google Sign y React, además compatible con Next.js.

Lo primero que tenemos que hacer es instalar la librería React Oauth2 Google

npm install @react-oauth/google@latest

Una vez instalado tenemos que crear nuestras credenciales para ello:

Vamos a Google Cloud Platform (https://cloud.google.com/) y pulsamos en Consola

Ahora seleccionamos nuestro proyecto (si ya lo tenemos creado por Firebase) o creamos uno nuevo.

Ahora buscamos: oauth clients

Elegimos External:

Rellenamos el nombre de la aplicación y los datos solicitados:

Después rellenamos Información de contacto del desarrollador:

Pulsamos en guardar y continuar.

En la siguiente pantalla no tocamos nada y volvemos a pulsar en guardar y continuar.

Lo mismo para la información opcional.

Ahora tenemos que añadir las claves permitidas, para ello vamos a Credenciales

Pulsamos en Crear Credenciales y Elegimos ID de cliente de OAuth y creamos una nueva de tipo web.

Copiamos el código que utilizaremos más adelante.

En origenes autorizados añadimos la dirección:

Para next.js/react:

http://localhost:3000

Para vite:

http://localhost:5137

También añadimos la de nuestra web:

http://devcodelight.com

En URI de redireccionamiento autorizados:

Ponemos:

http://localhost/callback

Ahora creamos un nuevo archivo en nuestro proyecto llamado GoogleSigninUtils.tsx

Y aquí dentro añadimos nuestro código:

export const GoogleSigninClientId = "XXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com"

*Indicamos el nuestro.

Vamos a nuestro archivo principal index.tsx o _app.tsx (next.js) y envolvemos nuestra APP con el provider:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { GoogleOAuthProvider } from "@react-oauth/google"
import {GoogleSigninClientId } from "@GoogleSigninUtils"

ReactDOM.createRoot(document.getElementById('root')).render(
  <GoogleOAuthProvider clientId={GoogleSigninClientId}>
      <App />
  </GoogleOAuthProvider>
)

Y ahora creamos un component llamado BotoGoogleSignin.tsx

import React from 'react';
import { GoogleLogin,  CredentialResponse } from '@react-oauth/google';

interface Props {
    onSuccess: (response: CredentialResponse) => void;
    errorMessage: () => void;
}

const LoginGoogle: React.FC<Props> = ({ onSuccess, errorMessage }) => {
    return (
        <div>
            <GoogleLogin onSuccess={onSuccess} onError={errorMessage} />
        </div>
    )
};

export default LoginGoogle;

Y para invocarlo utilizamos:

<LoginGoogle onSuccess={(response) => {
                  console.log('Google Login Success:', response);
                }
                } errorMessage={() => {
                  console.log('Google Login Error:');
                }
                } />

Y ahora, al ejecutarlo veremos que aparece esto:

Y al pulsar nos deja iniciar sesión.

Nos devolverá un token en formato JWT.

Para decodificarlo puede seguir este tutorial: https://devcodelight.com/?p=7898

Una vez obtenido, tendrá los datos del usuario que podremos validar con un servidor back.

Por ejemplo:

Python: https://devcodelight.com/verificar-token-de-google-auth-google-sign-usando-python/