Hermano te tengo que decir que no suelo comentar en videos de youtube. Estaba perdiento la cabeza con la configuración de auth.js y tu video me ha salvado la vida, enormes gratitudes hacía ti. Que Dios te bendiga. me suscribo.
36:22 como complemento al truquito, si ponen (npx prisma init --datasource-provider mysql) pueden elegir una base de datos especifica... Como siempre excelente contenido y gracias❤❤
Nunca había comentado antes en un video pero, me he encontrado muchos videos parecidos y creo que eres el primero que explica algo tan a la perfección y entendible para cualquiera, muchas gracias por tu gran trabajo compartiendo tu conocimiento, he estado indagando mucho e incluso seguí tu curso al pie de la letra pero con mi propio código y se puede integrar a la perfección tu paso a paso, nuevamente, muchas gracias y mucho exito! pd: no olviden descomentar la parte de auth.ts, verificar sus variables en .env y sobre todo cuando quieran registrar un correo a través de resend u otro servicio parecido en entorno de desarrollo recuerden usar el mismo correo con el que se registraron como prueba para la verificacion de cuenta.
Sí les sale este error "⨯ Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again." y ya tienen la bd creada, más las credenciales bien colocadas en el archivo .env. Ejecuten en la terminal el comando "npx prisma introspect" para que genere los modelos correspondientes y luego "npx prisma generate". Con esto se tendría que ir el error, y posteriormente podrán visualizar las credenciales. Por ejemplo, en el vídeo esta la carpeta dashboard/page.tsx, al ir a localhost:puerto/dashboard se tienen que ver las credenciales que hayan puesto como ejemplo.
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!
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
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!!
Vengo del curso de Udemy, excelente contenido querido blue, hay alguna manera de integrar Auth a el proyecto de Strapi con Nextjs para autenticar usuarios en la tienda de libros?
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!
Hola, le hago una pregunta, si yo ya tengo una logica para autorizar al usuario en un back end en next.js con prisma, puedo utiilizar ese servicio? o si o si tengo que hacerle desde next?
Compa, llevo dias en esta lucha, cada vez que intento hacer el comando npx auth secret, me sale este error: node:internal/modules/cjs/loader:1140 const err = new Error(message); ^ Error: Cannot find module 'zod' Lo raro es que ya esta instalado el zod se supone pero sigue diciendo que no esta instalado, sabes que sera? Iluminame compa porfavor!! PD: Se que se puede generar manual, pero no quiero quedar con la duda de como resolver tal problema
Te consulto, estoy con un problema desde hace 2 o 3 dias, tengo una navbar que solo se renderiza si existe la session, el problema es que la primera vez que el usuario se loguea nunca se renderiza, tengo que recargar la pagina para que aparezca. Sabes porque sucede esto? La navbar es un client component y ya lo envolví en el SessionProvider, pero aun asi sigue teniendo este comportamiento raro
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.
Hermano, pude hacer excelente el tutorial.. pero luego configuré Next-Intl, una libreria de internacionalización, y este tiene un middleware también.. podrías ayudarme a cómo configurar ambos middlewares para que funcionen? middleware de authjs: import authConfig from "@/auth.config" import NextAuth from "next-auth" export const { auth: middleware } = NextAuth(authConfig) export const config = { matcher: [ // Skip Next.js internals and all static files, unless found in search params // Omita los elementos internos de Next.js y todos los archivos estáticos, a menos que se encuentren en los parámetros de búsqueda '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', // Always run for API routes '/(api|trpc)(.*)', ], } middleware de next-intl: import createMiddleware from 'next-intl/middleware'; import {routing} from './i18n/routing'; export default createMiddleware(routing); export const config = { matcher: ['/', '/(es|en|it)/:path*'] };
![Authentication with Next Auth V5 and NextJS 14 [EASY] - API Routes, Server & Client Components](http://i.ytimg.com/vi/qDRQ2EaWsNM/mqdefault.jpg)
![Authentication with Next Auth V5 and NextJS 14 [EASY] - API Routes, Server & Client Components](/img/tr.png)
Hola, video 2 ya listo! 👉🏽 Auth.js + OAuth: ua-cam.com/video/_-dqdMBh24k/v-deo.html
Hermano te tengo que decir que no suelo comentar en videos de youtube. Estaba perdiento la cabeza con la configuración de auth.js y tu video me ha salvado la vida, enormes gratitudes hacía ti. Que Dios te bendiga. me suscribo.
36:22 como complemento al truquito, si ponen (npx prisma init --datasource-provider mysql) pueden elegir una base de datos especifica... Como siempre excelente contenido y gracias❤❤
Que de rato que no hacia un curso contigo, cuenta con mi estrella.
Nunca había comentado antes en un video pero, me he encontrado muchos videos parecidos y creo que eres el primero que explica algo tan a la perfección y entendible para cualquiera, muchas gracias por tu gran trabajo compartiendo tu conocimiento, he estado indagando mucho e incluso seguí tu curso al pie de la letra pero con mi propio código y se puede integrar a la perfección tu paso a paso, nuevamente, muchas gracias y mucho exito!
pd: no olviden descomentar la parte de auth.ts, verificar sus variables en .env y sobre todo cuando quieran registrar un correo a través de resend u otro servicio parecido en entorno de desarrollo recuerden usar el mismo correo con el que se registraron como prueba para la verificacion de cuenta.
La verdad que sos muy bueno, Gracias
Muy bueno, impresionante .. lo que explicas y como lo haces .. Abrazo
Muchas gracias! Saludos Michel
Oh tio blu, regresaste !!! 🎉 Se te extrañó mucho.
Siii poco a poco subiendo videos y volviendo al ritmo 🙌🏾 saludos
Sí les sale este error "⨯ Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again." y ya tienen la bd creada, más las credenciales bien colocadas en el archivo .env.
Ejecuten en la terminal el comando "npx prisma introspect" para que genere los modelos correspondientes y luego "npx prisma generate". Con esto se tendría que ir el error, y posteriormente podrán visualizar las credenciales.
Por ejemplo, en el vídeo esta la carpeta dashboard/page.tsx, al ir a localhost:puerto/dashboard se tienen que ver las credenciales que hayan puesto como ejemplo.
MUCHAS MILES DE GRACIAS!
Justo andaba buscando algo similar.
EXCELENTE TODO CLARO!
Te ganaste un fiel seguidor.
Gracias, saludos!
Saludos, super video. Una ves subido a producción no me funciona el login, sin embargo, en local todo a la perfección
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 !
Grande bluuu! como siempre justo andaba buscando esto!!1
Excelente !!! 🎉 un gran abrazo !!
Me salvaste la vida con este tutorial, sos un crackkkkkkkkk
Grande Franco! Saludos
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
Buenisimo!
Gracias! Nos vemos pronto 🥳
no hay implementación de autenticación de doble factor (2FA) , si lo hubiera como seria el proceso ?
Thank You very much! ❤
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!!
Vengo del curso de Udemy, excelente contenido querido blue, hay alguna manera de integrar Auth a el proyecto de Strapi con Nextjs para autenticar usuarios en la tienda de libros?
Estaría chevere una actualización con el back de Nestjs y Authjs😄
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!
Hola, le hago una pregunta, si yo ya tengo una logica para autorizar al usuario en un back end en next.js con prisma, puedo utiilizar ese servicio? o si o si tengo que hacerle desde next?
Compa, llevo dias en esta lucha, cada vez que intento hacer el comando npx auth secret, me sale este error:
node:internal/modules/cjs/loader:1140
const err = new Error(message);
^
Error: Cannot find module 'zod'
Lo raro es que ya esta instalado el zod se supone pero sigue diciendo que no esta instalado, sabes que sera? Iluminame compa porfavor!!
PD: Se que se puede generar manual, pero no quiero quedar con la duda de como resolver tal problema
Te consulto, estoy con un problema desde hace 2 o 3 dias, tengo una navbar que solo se renderiza si existe la session, el problema es que la primera vez que el usuario se loguea nunca se renderiza, tengo que recargar la pagina para que aparezca. Sabes porque sucede esto?
La navbar es un client component y ya lo envolví en el SessionProvider, pero aun asi sigue teniendo este comportamiento raro
Asi tengo el layout :
{children}
y asi el sidebar :
const session = useSession()
if(!session.data) return null
Es bastante simple
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!
Hermano, pude hacer excelente el tutorial.. pero luego configuré Next-Intl, una libreria de internacionalización, y este tiene un middleware también.. podrías ayudarme a cómo configurar ambos middlewares para que funcionen?
middleware de authjs:
import authConfig from "@/auth.config"
import NextAuth from "next-auth"
export const { auth: middleware } = NextAuth(authConfig)
export const config = {
matcher: [
// Skip Next.js internals and all static files, unless found in search params
// Omita los elementos internos de Next.js y todos los archivos estáticos, a menos que se encuentren en los parámetros de búsqueda
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
}
middleware de next-intl:
import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
export default createMiddleware(routing);
export const config = {
matcher: ['/', '/(es|en|it)/:path*']
};
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
no usen aun Next Auth V5 en produccion, falla en casi todo, esperen nuevos cambios