¿Qué es un ID de cliente?
Un ID de cliente de Google (o ClientID) es un identificador único que se asigna a una aplicación/usuario. Se utiliza para autenticar clientes y servidores usando OAuth (Auth 2.0).

Para obtener un ID de cliente de Google, abre Google Cloud Console y comienza un nuevo proyecto. Para este tutorial, llamaremos al proyecto "Inicio de sesión de GoogleReact", pero puedes elegir el nombre que prefieras.

Después de crear el proyecto, navegue hasta la sección Credenciales en el menú API y Servicios. Aquí encontrará un panel donde el nombre de su proyecto actual debería estar visible en la esquina superior izquierda, cerca del logotipo de Google Cloud.

Ahora, antes de crear sus credenciales, vayamos a la pantalla de consentimiento de OAuth para configurarla.

Configure una pantalla de consentimiento de inicio de sesión de Google.

La pantalla de consentimiento, como su nombre lo indica, es una página que requiere que el usuario inicie sesión a través de una biblioteca externa o de terceros. Esta ventana emergente informa al usuario que está abandonando la página raíz de su aplicación y otorgando acceso a una página de terceros. ejemplo de una pantalla de consentimiento de inicio de sesión de Google que se muestra a continuación

En pocas palabras, cuando utilizas OAuth 2.0 para la autorización, tu aplicación solicita al usuario que autorice uno o más ámbitos de acceso utilizando su cuenta de Google. Los alcances de acceso incluyen cualquier información o actividad a la que su aplicación esté autorizada a acceder o realizar en la cuenta del usuario.

Para configurar la página de consentimiento de Google para tu aplicación React, navega hasta la pestaña "Pantalla de consentimiento de OAuth" en el menú de la izquierda de tu Google Cloud Console.

Una vez en esta pestaña, seleccione "externo", la única opción permitida a menos que esté utilizando una empresa o aplicación verificada por Google, luego haga clic en el botón "Crear" para generar su pantalla de consentimiento.

A continuación, en la misma página, proporcione un nombre para su solicitud y una dirección de correo electrónico para recibir actualizaciones sobre el estado del proyecto.

Puedes dejar las necesidades y opciones restantes en blanco por ahora, pero si tienes los detalles disponibles, puedes agregarlos durante esta fase.

Por el momento, puedes saltarte las secciones de registro restantes. Simplemente desplácese hacia abajo en cada sección, haga clic en Guardar y luego regrese al panel una vez completado.

Después de diseñar la página de consentimiento de OAuth, debemos publicar la aplicación antes de experimentar con ella o asegurarnos de que la autenticación funcione. De forma predeterminada, su estado es "Prueba" y, después de la publicación, pasa a producción.

Una vez que hayas marcado tu aplicación como "En producción", todos los que tengan una cuenta de Google podrán acceder a ella.

Genera tu ID de cliente web.

Ahora, regresaremos a la opción Credencial para acceder a la página donde puedes crear tu ID de cliente web.
En la pantalla, seleccione CREAR CREDENCIALES en la parte superior de la página y luego haga clic en el ID del cliente de OAuth.

Se le pedirá que elija un tipo de solicitud como se muestra a continuación. Vaya a la aplicación web si está siguiendo estos pasos para React (estamos usando el ID de cliente de Google para la web).

A continuación, elegiremos un nombre para nuestra ID de cliente para identificar o especificar el enlace de ID específico a una sola aplicación; se utiliza este nombre. Para distinguir entre ID web, iOS y Android, podemos poner "ID web", "ID Android", "ID iOS", etc. en sus convenciones de nomenclatura:

A continuación, presentaremos dos tipos de URL: orígenes de JavaScript autorizados y URL de redireccionamiento autorizados.

La “URL de orígenes de JavaScript autorizados” es la URL desde la que inicia sesión su aplicación. Para los desarrolladores de React, es localhost (localhost:3000) o su URL alojada si ha alojado su aplicación.

La "URL de redireccionamiento autorizada" es el enlace al que Google devolverá al usuario después de que haya iniciado sesión correctamente. Por ejemplo, puede devolverlo a su enlace original o redirigirlo a un enlace diferente. Deberá agregar la URL aquí.

Agregue las siguientes URL a los orígenes de JavaScript autorizados y a las URL de redireccionamiento autorizadas: http://localhost:3000 y http://localhost, respectivamente:

Para crear una ID de cliente web, deberá hacer clic en el botón "CREAR". Volverá a la página de inicio, donde podrá ver sus credenciales recién creadas. Para copiar su nueva identificación de cliente web, presione el ícono Copiar.

Ahora que hemos creado con éxito nuestra ID de cliente web, accederá a nuestra aplicación React y agregará su ID de cliente al archivo .env.