1. Configurar y usar NextAuth.js en el directorio de aplicaciones Next.js 13
En este tutorial, lo guiaré a través de la configuración de la autenticación en su directorio de aplicaciones Next.js 13 usando NextAuth.js. Vale la pena señalar que mientras usamos el paquete NextAuth en este tutorial, puede estar utilizando el paquete Auth.JS para cuando lea esto, ya que las bibliotecas ahora son intercambiables.
Temas cubiertos
- Configurar el proyecto Next.js 13
- Configuración de la siguiente ruta API de autores
- Crear botones reutilizables
- Tres formas de obtener los datos de la sesión de NextAuth
- Obtenga la sesión en un componente del servidor
- Obtenga la sesión en una ruta API
- Obtenga la sesión en un componente del cliente
- Integrar una base de datos
- Configurar postgresql
- Configurar prisma orm
- Implementar el código de autenticación de NextAuth
- Almacene las llaves personalizadas en el JWT
- Diferentes formas de proteger las rutas
- Protección de ruta del lado del cliente
- Protección de ruta del lado del servidor
- Proteger una ruta API
- Protección de ruta del middleware
- Implementar la lógica de registro de la cuenta
- Cree la ruta API para registrar a los usuarios
- Crea el componente de formulario
- Crear la página de registro de la cuenta
Lea el artículo completo aquí: https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/
2. Next.js - Use páginas de inicio de sesión y registro personalizadas para NextAuth.js
En este artículo, aprenderá cómo integrar páginas de inicio de sesión y registro personalizadas con NextAuth.js en el nuevo directorio de aplicaciones Next.js 13. Asumiré que ya ha configurado NextAuth en su proyecto y que solo está buscando una manera de integrar sus páginas de inicio de sesión y registro personalizadas.
Temas cubiertos
- Ejecute el proyecto NextAuth en su computadora
- Prueba el proyecto NextAuth
- Registrar una cuenta
- Inicie sesión en su cuenta
- Acceder a una página protegida
- Configurar el punto final de la API de NextAuth
- Crea la página de inicio de sesión personalizada
- Crea el formulario de inicio de sesión
- Crea la página de inicio de sesión
- Crea la página de registro personalizado
- Crea el formulario de registro
- Crear la página de registro de la cuenta
- Crea el controlador API para el registro de la cuenta
- Conclusión
Lea el artículo completo aquí: https://codevoweb.com/nextjs-use-custom-login-and-signup-pages-for-nextauth-js/
3. Next.js - Agregue Google y GitHub OAuth2 usando NextAuth.js
En este artículo, aprenderá cómo integrar los proveedores de Google y GitHub OAuth con NextAuth.js en el nuevo directorio de aplicaciones Next.js 13. Vale la pena señalar que estoy usando una solicitud de extracción específica recomendada por el equipo de NextAuth que es compatible con el nuevo directorio de aplicaciones Next.js 13.
Temas cubiertos
- Ejecute el proyecto NextAuth localmente
- Explore el flujo de Github y Google Oauth
- Inicie sesión con Google OAuth2
- Iniciar sesión con Github Oauth
- Configurar NextAuth con Google y Github OAuth
- Implemente el Google y Github OAuth2
- Crear el formulario del lado del cliente
- Crea el componente de la página del lado del servidor
- Cómo generar las credenciales de Google OAuth2
- Cómo generar las credenciales de Github Oauth
- Conclusión
Lea el artículo completo aquí: https://codevoweb.com/nextjs-add-google-and-github-oauth2-using-nextauth-js/
