Cómo añadir login con Google a tu aplicación #reactjs #nextjs

En este tutorial, te enseñaré cómo integrar la autenticación de Google en tu proyecto NextJS 13 de manera fácil y rápida, permitiéndote ofrecer un sistema de inicio de sesión seguro y confiable a los usuarios de tu aplicación web.

¡No te pierdas ningún detalle y sigue el vídeo para implementar este potente sistema de autenticación en tu proyecto!

[00:00] Introducción
[01:07] Explicación proyecto
[02:50] Librería @react-oauth/google
[03:50] NextJS 13 y “use client”
[04:49] Obtener clientId de Google
[06:55] Iniciar sesión gracias a GoogleLogin
[09:15] Decodificar credentials para obtener el email
[11:15] Inicio de sesión con oneTap
[13:26] Validar token en el servidor
[15:30] Route handlers de NextJS 13

Comenzaremos con una breve introducción y una explicación general del proyecto que vamos a desarrollar juntos, detallando las funcionalidades que se incluirán y cómo abordaremos cada sección del proceso.

Luego, exploraremos la librería @react-oauth/google, que facilitará la integración con Google y permitirá un flujo de trabajo más sencillo. A continuación, nos adentraremos en las novedades de NextJS 13 y cómo aprovecharlas en tu proyecto, especialmente en relación con la funcionalidad "use client".

Te guiaré en el proceso de obtener tu clientId desde la consola de Google, un paso fundamental para poder vincular tu aplicación con los servicios de autenticación de Google. Posteriormente, implementaremos el componente GoogleLogin, que permitirá a los usuarios iniciar sesión en tu aplicación utilizando sus cuentas de Google.

Aprenderás a decodificar las credenciales proporcionadas por Google y extraer información relevante, como el email del usuario, para poder almacenarla en tu base de datos o utilizarla en otras partes de tu aplicación.

Además, te enseñaré cómo implementar el inicio de sesión con un solo toque (oneTap).

Para asegurar la seguridad de tu aplicación, te mostraré cómo validar el token proporcionado por Google en el servidor, evitando posibles vulnerabilidades y garantizando que solo los usuarios autorizados puedan acceder a las áreas protegidas de tu aplicación.

Finalmente, aprenderás a manejar rutas utilizando los "route handlers" de NextJS 13, una característica que te permitirá estructurar de manera eficiente tu aplicación y mejorar su escalabilidad.

¡No olvides suscribirte y darle like al vídeo si te ha resultado útil!

Deja tus comentarios si tienes alguna pregunta o sugerencia para futuros tutoriales.

💛 ¡Hasta la próxima!

[Chinchu]

Qué pasada tu canal, soy nueva en React y ahora que cambió a Next me veo perdida y aún asi tu canal me ayudó muchismo. Resumidos y bien explicados

[marcoalayn]

Oro puro, Muchisimas Gracias!!! ya me suscribi !!!🙌

[codeale]

Una pasada la librería voy a probarla enseguida, el nuevo estilo de las miniaturas del canal está súper chulo. Un saludo crack.

[andresmunoz]

Una pregunta, ¿Cómo hago para cerrar sesión?

[robertorossa]

Probe la libreria y al usar un movil desde web cuando se seleciona el boton para que te permita ingresar o seleccionar el usuario queda en blanco. Experimentaste esto?

[santiagousca]

cuando le doy a iniciar session con cuenta no cambia el usuario selccionado
xq

[VictorNuñez-uq]

Muy buen tu canal, y tu contenido, con casualidad, sabes si la creacion del id client y las llamadas de verificacion del token, tiene algun costo? Gracias en todo caso por el video

[felipeaguilar]

Esa librería sólo funciona utilizando next js?

[leonardoplaza]

Estoy usando variables de entorno y me da error. A alguien mas le sucede?

[chris-zlrr]

how do you speak in spanish but code in english