Nextjs NextAuth Prisma Login y Registro
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- Aprende a crear un sistema básico de Autenticación usando Nextjs, Prisma y NextAuth, para este ejemplo usaremos el modulo credentials de Prisma además que desarrollaremos interfaces para aceptar correo y contraseña de un usuario y comprobarlo con un base de datos SQL. Para este ejemplo se usara Sqlite, aunque esto es exactamente lo mismo para PostgreSQL, MySQL y cualquier otra base de datos SQL, ya que prisma al ser un ORM nos permite utilizar cualquier otra base de datos SQL sin necesidad de cambiar mucho el esquema.
Código del ejemplo:
github.com/faz...
Documentación del Prisma y NextAuth:
www.prisma.io/...
Curso Recomendados
Curso de React: • Curso de Reactjs desde...
Curso de Nextjs: • Curso de Nextjs desde ...
🛒 Fazt Web
Tienda Online: store.faztweb....
⭐ Cursos Recomendados
Curso de Nodejs ⮕ fazt.dev/nodejs
Curso de Python⮕ faztweb.com/py...
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
Github ⮕ github.com/fazt
Twitter ⮕ / fazttech
Whatsapp ⮕ www.whatsapp.c...
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef2...
Namecheap ⮕ namecheap.pxf....
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
Notion ⮕ affiliate.noti...
Puedes encontrar la lista de tutoriales de React en:
faztweb.com/ne...
#nextjs #pwa #javascript
Parce, estos tutoriales son oro puro. Siento que me leiste la mente con el stack de tecnologias porque son justo las que voy a usar para un proyecto. Mil gracias por este contenido de tan buena calidad, me servió muchisimo para saber como usar el next-auth que voy a aplicar en mi proyecto.
oro de donde?, tiene montones de errores y lo peor es que no tiene la decencia de decirnos que los cuales son, puedo vulnerar ese login hasta con los ojos cerrados
Muchas gracias por explicar la logica detras de cada linea, a los novatos como yo nos sirve mucho🙌
Solución de dos problemas. Por si a alguien le sucede lo mismo que a mi siguiendo paso a paso el video:
1. Si crearon un archivo middleware.ts y después lo cambiaron a middleware.js, eso generó sin querer un archivo llamado "ts.config.json" (o algo así). Deben eliminarlo porque sino les va a botar un error con las importaciones hechas con "@/libs/db" por ejemplo.
2. En alguna parte del video se muestra que en las variables de entorno (.env) hay un NEXTAUTH_URL y un NEXTAUTH_SECRET. Para generar ese secret deben correr el comando "npx auth secret" en su terminal y les creará un secret hash. Entonces lo copian NEXTAUTH_SECRET="shgfdkasdghasgddasjd=493849=" y póngalo PRIMERO y segundo el NEXTAUTH_URL.
Gracias por el video.
45:48
amigo me sale este error
GET /api/auth/error?error=Configuration 500 in 1299ms
[next-auth][error][NO_SECRET]
next-auth.js.org/errors#no_secret
GET /api/auth/error?error=Configuration 500 in 18ms
Muchisimas gracias por este tutorial. A mi me ha servido para poder realizar un trabajo un poco complicado, ya que el trabajo que realize en el curso que estudie para obtener el certificado de desarrollador web lo hice con html, css3, js y php y lo estoy pasando todo a next.js react y tailwind css. He visto muchos videos tuyos, de los cuales he aprendido muchisimas cosas. Muchisimas gracias por compartir tus conocimientos con los amantes de la programación.
Estoy comenzando a utilizar Next.js y fui directo a tu canal, gracias por excelente material. 🙏
muchas gracias Fazt, últimamente no me siento bien, muchos problemas personales, pero la satisfacción de que aprendas algo nuevo y te salga bien, es muy gratificante, saludos y espero que te encuentres bien
Un gusto saber que te sirva Leonel. Mucha fuerza y recuerda que no hay mal que dure 100 años.
Coders, He creado 2 videos extras relacionado a este proyecto para los miembros del canal.
1. Despliegue de este proyecto en Railway: th-cam.com/video/8NK82xMlwng/w-d-xo.html
1. Creacion un proyecto adicional con NextAuth, Typescript, Prisma, validaciones y despliegue. th-cam.com/video/qOAUm_rAE-E/w-d-xo.html Este es otro ejemplo mas extenso tambien con un CRUD y usando una biblioteca de componentes llamada Radix UI, este video es para los miembros del Canal:
Muchísimas gracias por tus tutoriales, explicas muy bien, basicamente todas las cosas que he aprendido a hacer fue gracias a tus videos, a veces veo otros tutoriales y se me olvidan, pero los tuyos jamás
Gracias y saludos!
Muchas gracias Fazt. Estuve buscando videos que expliquen bien y el tuyo fue lo mejor que encontré. Sos groso, sabelo.
Fazt estos videos son muy buenos ayudan a mejorar la logica se programación.
Excelente guía, bastante completo y bien explicado :D
Agradezco el tutorial, lo hice cambiando la db a sql server, muy bien explicado y completo
Excelente contenido!!! Recien estoy iniciandome con React y Next.js. Vengo de otro framework poco conocido llamado OpenUI5, y me está costando un poco React con Next.js pero con tus videos todo va mucho mejor! Gracias por este contenido
Excelente el tutorial! Muy claro todoo. Qué metodo recomendarías en el caso que el usuario olvide su contraseña? Muchas Gracias por el aporte!
Hola Fazt agradecerte por este video, la verdad usar este paquete ssimplifica mucho el trabajo y esfuerzo al desarrollar. Para mi proyecto de carrera me cree mi propio Login y vaya que hay varias cosas que contemplar y bueno me costo hacerlo.
Muchas gracias nuevamente.
Gracias a ti Ariel por comentar, un gusto que te haya servido
Yo usaba una configuración distinta en next auth pero definitivamente la que usaste (que es como recomienda la doc) está mejor
Gracias de nuevo fazt, estaba buscando algo con postgres y prisma, eres lo máximo.
Excelente video, gracias por todos ellos. Tengo problemas con la generación de roles, algún video o documentación para hacerlo en Next.js
Un 10 por el vídeo, aunque en las validaciones, no pondría si la contraseña es errónea, ya que das pistas a que ese usuario existe, lo correcto sería poner un mensaje de "usuario o contraseña errónea" 😉😉
Así es, No es buena idea dar tanta información del error
Excelente video como siempre Fazt! Es mejor usar API folder para hacer endpoints, o usar server actions que ya no es experimental? Usando next 14, Gracias
Muchas gracias fazt, estos videos son oro puro
Gracias a ti Zbros :)!
ufff brutal justo lo que buscaba, mil gracias.
La pregunta mía sería si en el login también se podría poner los botones de los provider de goolge y de git ?
Si claro tambien puedes añadir en providers a google y Github
Tengo una consulta fazt, como hacer para vincular mi pagina de login con las credential de NextAuth?, muchas gracias, siempre voy a estar agradecido por tus videos, son oro puro
A veces me asustas😂, ayer estuve buscando en tu canal este video de next Prisma auth y sacas hoy este😅. Te amo
El video perfecto en el momento perfecto
Fazt! Cómo siempre super agradecido! Increible material!! Abrazo grande
Muchas gracias, excelente tutorial, todo un crack...
A mi punto de vista la creación de tablas o una ER del lado del FrontEnd no es lo adecuado, ya que la lógica de crear "Capas de programación" es separar por seguridad cada uno de ellas, si deseas crear una tabla o una ER para eso esta el manejador de la Base de datos, ahora muchas de las cosas que se requieren al momento de crear una aplicación, a veces es adecuado crear funciones o procedures del lado de la Base de datos y eso para optimizar los procesos y no saturar al BackEnd o al FrontEnd.
Lo que voy a disfrutar esto, que grande
Gracias fazt , me han venido super bien los videos usando Prisma se agradece :3 , estaré al pendiente tambien de tus proximos videos, de casualidad el video que comentas en 01:30 de como desplegarlo y demás se agregara a los miembros? un saludo bro
bro muy bueno el video, pero tambien se podria hacer desde server action ?
Buen video, he estado utilizando prisma en un proyecto y me surgio un problema para crear un proyecto con arquitectura multitenant, mi pregunta es como aplicar multitenant en diferentes bases de datos
Muy bueno! Que opinas de al momento de registrar usar server actions en remplazo a hacer un fetch desde la route?
Si es puramente Nextjs lo haria con ese enfoque, pero por lo general en mi caso cuando crece una aplicacion tiendo a separar el backend con otro framework y el tener con server actions lleva mas trabajo al momento de migrar, asi que prefiero seguir usando la API que es la mas forma mas generica de enviar datos.
@@FaztCode Genial! Muchas gracias Fazt! Para cuando un cursito de Django? O Django y Next?😁
esta genial pero pregunta veo que todo lo haces tsx me refiero toda esa lógica lo vera las personas?.. ya que en c# se hace el api uno le da las confirmaciones ya que en el front seria muy peligroso, por favor ilumíname
Muchas gracias por enseñarnos tu sabiduria, lo estoy implementando en mi proyecto.
57:44 a mi siempre me devuelve error: "cofiguration" y ok: "true", aunque lo haga identico como tu, siempre me sale eso.
pd: yo estoy usando auth.js v5, es casi lo mismo la unica diferencia es el auth.ts pero nomas por el nombre del archivo xd
Tengo que l mismo error actualmente
@@MonarchAI hay un cambio con la versiones, ahora es diferente, te recomiendo el tutorial de auth.js de blueweeb, yo segui ese tutorial y ya termine mi login bien.
@@raul1533-kx9de Ya estoy usando la versión 5, este tutorial me sirvió, funciona el login y registro, pero next-auth sigue teniendo unos bugs con respecto a los mensajes de error, voy a ver el de auth.js de blueweeb, muchas gracias 😄
te amo como no tienes idea jajajaja gracias
Como siempre, buen video! 🚀🚀
Te hago una pregunta si tengo el back separado ¿es recomendable usar nexthauth?
puedes hablar sobre arquitectura exagonal con cualquier tecnologia dando un ejemplo,gracias
Haz un video explicando como usar nextjs con roles :c que redirija a una pagina diferente dependiendo del rol por favor🙏🙏🙏
Olviden el comentario anterios. Ya lo resolví
vine por cobre y encontre oro con diamante !!
eres el mejor
Como puedo expandir las propiedades del user? Ya que solo viene con email, image y name
que usarías para que los usuarios puedan recuperar contraseña si la olvidaron ?
También me preguntaba los mismo. Que se puede usar en ese caso?
Esta dando algunos errores, uno es la configuracion de nextauth al redireccionar con el middleware, y solicita agregar la variable NO_SECRET. Tal vez sea por las nuevas actualizaciones. Es importante dar mantenimineto a proyectos donde se use nextjs
gracias you are the best....
que extension usas para que tus comparadores de IF se vean asi?
Como le puedo hacer para agregar otra validacion en el [...nextauth], ya que quiero que valide las credenciales buscando en otra tabla (admin) en la base de datos y he visto que es "creando otro provider" pero solo toma en cuenta el primero que ya esta creado para user
me sale este error a la hora de ir a la dirección de api/auth/signIn
este es el error: (Error: This action with HTTP GET is not supported by NextAuth.js) por favor necesito ayuda
tengo un error parecido pero me sale: TypeError: next_auth_providers_credentials__WEBPACK_IMPORTED_MODULE_1__ is not a function
Es decir no esta reconociendo CredentialsProvider
*Agosto 2024* y Next-auth no quieren arreglar el bug del status code 200 y ahora hay un bug que no devuelve el error personalizado en el atributo error, todos son error Configuration o CallbackRouteError, este segundo error es grave, no me permite enviar mensajes personalizados, lo mínimo que puedo hacer es "Usuario o contraseña incorrecto para todos los errores"
una consulta, si esto lo quiero agregar a un proyecto que ya tiene primsa como DB, de hecho es el que hiciste la To-Do List con el CRUD, debo crear el modelo prisma desde cero o lo puedo agregar al mismo en donde estan las tareas ?
Hola Julian, no es necesario crear todo el esquema desde cero, solo añades un model mas con los datos que quieras relacionar, aqui he creado un ejemplo completo de autenticación y crud tambien usando nextjs:
th-cam.com/video/qOAUm_rAE-E/w-d-xo.html
@@FaztCode muchas gracias genio!!
Brutal ❤ thx
Al hacer el logueo del usuario, en vez de redirigirme al /dashboard me da este error:
Server error
There is a problem with the server configuration.
Check the server logs for more information.
No sé si hice mal alguna configuración.
Para el tema de proteger el api de nextjs ya lo hace o tocaria agragar otra configuracion.
Lo protege tambien si añades la ruta /api, en tu middleware, cualquier ruta que añadas lo validará
Hay version para nextauth v5 con prisma y tailwind?
Muchas gracias por el tutorial!
Alguien más tiene el error [next-auth][error][JWT_SESSION_ERROR] decryption operation failed
Me sale al añadir en el navbar la parte de:
const session = await getServerSession(authOptions);
Sale null este console.log(session);
A diferencia de fazt, estoy usando TypeScript, no sé si tenga que agregar algo.
cual es el tema de tu visual studio code?
por que cuando se utiliza getServerSession solo trae name y email , y no trae el id, que paso si al encontrar el usuario userfound retornaba name, email y el id , como hacer para q tambien obtener el id ???
Hola Fazt, he tenido problemas al integrar el middleware, por que cuando hago el archivo solo me marca Server error There is a problem with the server configuration. Check the server logs for more information. y no me deja acceder a dashboard cuando ingreso.
yo tengo el mismo problema :(
Puede ser que te haga falta añadir el secret de Nextauth, este es indispensable para que funcione:
stackoverflow.com/questions/70979516/there-is-a-problem-with-the-server-configuration-nextauth
Fue correcto, muchas gracias @@FaztCode
@@FaztCode Gracias, tenia el mismo problema.
No puedo agregar una fecha o modificarla con prisma. Estoy usando SQLlite pero no puedo. Me da error y no encuentro solución, alguien sabe?
Podrías hacer uno con Jwt
Alguno sabe si funcionaria con otros proveedors de autenticación como keycloack o google ?
Mielda, se supone que las librerías deberían de simplificarlo y next-auth se me hace más complicado😢
Hola fazt puedes hacer un login registro con django y react me serviria de mucha ayuda porfaaa
En react puro o con lagun framework como next?
Y que BD o autenticacion piensas usar?
@@LaloPacheco147 react con vite y la base de datos es mysql
Ya tiene videos parecidos viejos. Pero en si es lo mismo que aqui, react manda la peticion a tu back de python y python lo registra en la BD y devuelve una peticion al front :)
Como es posible este suceso jaja, tengo 2 pestañas abiertas, "Nextjs, Mongodb Autenticacion" y "Nextjs Prisma" 😅😅
Observo que Nextjs y Prisma es una excelente herramienta para aprender a desarrollar y crear cosas básicas, pero para crear una aplicación profesional y seria, veo que no es optimo y congruente.
una vez iniciada la base de datos y creado el modelo user ir a 11:47
react hook form 13:45
hago esto porque se me olvida como usar nextauth jaja
Están buenas tus notas :)
Que consola utilizas? jaja te autocompleta como copilot
Es esta Mejorando el Powershell de Windows con OhmyPosh, Windows Terminal y NerdFonts
th-cam.com/video/d9y0l7yY404/w-d-xo.html
4:43