Implementar inicio de sesión con Google en React

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

https://devcodelight.com:3000

Para vite

https://devcodelight.com:5137

También añadimos la de nuestra web

http://devcodelight.com

En URI de redireccionamiento autorizados

Ponemos

https://devcodelight.com/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/