Next Auth V5 - Credentials (Email y Password), JWT, Roles y verificación de email
HTML-код
- Опубликовано: 14 июл 2024
- En este tutorial veremos como implementar Next Auth en su versión 5 en un proyecto de Next.js v.14. Aplicaremos Credentials para autenticar usuarios con email y contraseña, almacenarlos en bases de datos Postgres y gestionando roles y rutas protegidas. Utilizaremos Prisma ORM y shadcn para los componentes de React con TailwindCSS.
Cursos en UDEMY:
🧨 HTML + CSS + Bootstrap 5 + JS: bit.ly/3iyMBh3
🧨 React + Next 14 + Firebase: bit.ly/3JCSsht
🧨 Vue 3 + Firebase: bit.ly/3IwyHGJ
🧨 HTML y CSS (gratis): bit.ly/3PM4x5U
⭐ Video #02: Auth.js + OAuth (Google y Github): • Next Auth V5 - OAuth (...
⭐ Código github: github.com/bluuweb/example-ne...
⭐ Website: bluuweb.dev
⭐ Discord: bit.ly/3lpz7J2
Contenido:
00:00:00 Introducción
00:01:44 Next 14 tutorial
00:14:59 Login Form
00:29:28 Auth.js instalación
00:35:32 Prisma ORM
00:48:56 Credentials Auth.js
01:08:48 Prisma Schema
01:26:29 Register Form
01:36:21 Roles de usuario
01:43:03 Middlewares rutas protegidas
01:46:47 Verificación de email
#nextjs14 #prisma #reactjs
Redes Sociales:
💩 / bluuweb
💩 / bluuweb_youtube
💩 / bluuweb
💩 / bluuweb
💩 Regala un Cafecito para bluuweb: www.paypal.me/bluuweb
Mi Setup:
⭐️ Teclado Mecánico: amzn.to/3Ns6fdK
⭐️ Audífonos: amzn.to/3pwrzqt
⭐️ Micrófono: amzn.to/3JH4tV7
⭐️ Monitor: amzn.to/3NTt8Iu
⭐️ Procesador: amzn.to/3raD4EC
⭐️ Tarjeta de Video: amzn.to/437t78b
Hola, video 2 ya listo! 👉🏽 Auth.js + OAuth: ruclips.net/video/_-dqdMBh24k/видео.html
MUCHAS MILES DE GRACIAS!
Justo andaba buscando algo similar.
EXCELENTE TODO CLARO!
Te ganaste un fiel seguidor.
Gracias, saludos!
Muy bueno, impresionante .. lo que explicas y como lo haces .. Abrazo
Muchas gracias! Saludos Michel
Porfin encuentro uno que funciona sin bugs la ptm XD
y lo mejor de todo es que esta en español, muchas gracias, aprendi bastante
Buena pregunta, lo que pasa que onboarding@resend.dev es un email para realizar pruebas, y esas pruebas en estricto rigor solo las debes hacer a tu email de cuenta registrada. Espero orientar. Saludos
Oh tio blu, regresaste !!! 🎉 Se te extrañó mucho.
Siii poco a poco subiendo videos y volviendo al ritmo 🙌🏾 saludos
Que tutorial más intenso. ¿Caundi te veremos en directo?
Jajajaja estudie mucho para hacerlo 🤓
Estoy medio complicado para los directos, StarLink no tiene mucho ancho de banda en subida, así que haré algunas pruebas y les comento. Saludos Jesus!!
Me salvaste la vida con este tutorial, sos un crackkkkkkkkk
Grande Franco! Saludos
Grande bluuu! como siempre justo andaba buscando esto!!1
Excelente !!! 🎉 un gran abrazo !!
Buenisimo!
Gracias! Nos vemos pronto 🥳
Está excelente, muchas gracias, maestro. Sería genial si pudieras incluir en otro video explicándonos cómo recuperar la contraseña utilizando esta versión de Auth.js. ¡Gracias, maestro!
Super, lo vamos a estudiar para incluir. Saludos !
Estas armando el objeto NextAuth 2 veces, una en auth.ts y otra en el middleware. Creo que solamente habría que importar el auth de auth.ts
Hola, al parecer si pero está sacado todo de la documentación oficial: authjs.dev/guides/edge-compatibility#split-configauthjs.dev/guides/edge-compatibility#split-config
Cualquier cosa me avisas.
Saludos!
Bluuweb que pasaria si quiero que el token que genero cuando ingreso expire en un determinado tiempo.
Hola aquí la documentación oficial de lo que preguntas: authjs.dev/concepts/session-strategies
Aunque así debería ser (me apoyé en la IA), espero ayudar. Saludos!
export default NextAuth({
// ... otras opciones de configuración
session: {
strategy: "jwt",
maxAge: 3600, // Tiempo en segundos (1 hora en este ejemplo)
},
// ... más opciones de configuración
})
Es importante tener en cuenta que cuando usas la estrategia JWT (JSON Web Token), Auth.js utiliza tokens de corta duración por defecto para mejorar la seguridad . Esto significa que el token se renovará automáticamente si el usuario sigue activo, pero si no hay actividad durante el período especificado en maxAge, el token expirará y el usuario tendrá que iniciar sesión nuevamente .
Si necesitas un control más preciso sobre la expiración del token, puedes utilizar los callbacks jwt y session para personalizar aún más este comportamiento . Por ejemplo:
callbacks: {
jwt({ token, user }) {
if (user) {
token.customExpiration = Date.now() + 3600 * 1000; // 1 hora desde ahora
}
return token;
},
session({ session, token }) {
session.customExpiration = token.customExpiration;
return session;
},
},
Este enfoque te permite establecer una fecha de expiración personalizada para cada token.
Recuerda que configurar un tiempo de expiración demasiado largo puede representar un riesgo de seguridad, mientras que uno demasiado corto podría afectar negativamente la experiencia del usuario . Es importante encontrar un equilibrio adecuado para tu aplicación específica.
@@bluuweb Gracias!
Me estoy confundiendo, hace poco comencé con NextJS. AuthJs v5 es la continuación de NextAuth v4, o son paquetes completamente independientes ?
Hola, aquí tienes todos los detalles de la migración de v4 a v5: authjs.dev/getting-started/migrating-to-v5
espero ayudar. Saludos
Hola, tengo este error:
Module '"next-auth"' has no exported member 'NextAuthConfig'. Did you mean to use 'import NextAuthConfig from "next-auth"' instead?ts(2614)
pueden ayudarme?