Nextjs Autenticación con Json Web Tokens (JWT), y Rutas Protegidas con Middlewares

[@FaztCode]

Coders, este video ha sido editado por un editor, así que si tienen algún problema, con algún corte o algo que se hizo mal en la edición. Por favor comenten el error en que minuto, en un nuevo comentario para poder ver el error y evitar que suceda a futuro. Gracias por ver :)

[@davidjacobs7966]

Vaya, vaya asi que el equipo de Fatz code va creciendo. ya lo vamos a ver Fatz y estaremos reportando los errores para que luego vayas y lo azotes para aprenda hacer un buen editor y se porte bien. ; )

[@code_castle]

Gracias por querer darnos contenido de calidad y estar pendiente de que se cumpla.

[@daedsoft]

Está bien, pero los cortes son muy rápidos y toca ser muy preciso para pausar y leer el código.

[@NicolasoC-xb4yx]

Que Genio! Te mereces 5k likes. Una ayuda enorme! Gracias

[@AlexisSniffer]

da este error JWSSignatureVerificationFailed: signature verification failed, alguien ha encontrado la solución? "next": "13.4.12", "jose": "^4.14.4",

[@gersonrodrr]

Buen video Fazt, gracias a tí evité comprar cursos costosos, todo lo que enseñas es contenido premium

[@breimerct]

Estaba esperando este video!!! He crecido mucho como desarrollador gracias a tus videos! Te amo k-bron!!!

[@johandryloyo4647]

X2

[@cosmoscrew2]

Que rápido fazt! No tiene mucho que me respondiste el comentario donde te pedía esto Muchas gracias!

[@gabrielemilianofacio6754]

el minuto 57:17 es algo que te puede tener girando sobre ti mismo semanas sin avanzar. Muchisimas gracias FaztCode

[@SonGoku-pc7jl]

Fazt ha sido una clase magistral, he disfrutado mucho y ya tengo ganas de mañana arrancar con eso metiendo mongodb o a ver donde. Muchisimas gracias por explicarnoslo todo y explicarnoslo tan bién. Disfruto muchisimo aprendiendo contigo y cada dia me sirve más :) por cierto lo que dices del corte es en 1:02:48 cuando next nos dice que al match general le pongamos :path* :)

[@luisfernandosierra5871]

Este video lo estaba esperando hace mucho , muchas gracias. Excelente aporte

[@HackeRandomClips]

nunca habia podido entender de forma generalizada este tema hasta que me tope con este video.

[@daedsoft]

Últimamente Fazt me salva la vida más de lo que merezco, jajaja. Gracias por este tutorial.

[@MrBraianzzz]

Me saco el sombrero de lo excelente que están editados los videos. 👏 Kudos for you Fazt!

[@arnoldcruz4360]

Fazt te luciste con este video y con todos los que haces. Espero esos próximos ejemplos siguiendo este enfoque. 😁👌

[@Deus-lo-Vuilt]

Gracias por el video Fazt , justo mis palabras preferidas , ejemplo practico y donde voy a enseñarles

[@joaquinbustelo7889]

Muchas gracias Fazt!, lo quise hacer con vite y aprendi un monton de cosas que no sabía porque tube muchos errores al mandar las cookies y tambien al recibirlas pero pude resolver de apoco cada problema

[@aaronvigil8480]

Que maestro. No sabes cuánto lo esperaba. Sos gigante, Fazt. Saludos desde Argentina.

[@FaztCode]

Gracias Aaron, Saludos :)

[@fedex457]

Chaboon! haber escuchado el tutorial en castellano creo que me hizo conectar mas facil los conocimientos, porque gracias a la parte de middleware pude resolver algo que me tenia trabado hace unos dias, sos crack!! gracias por la explicacion!

[@karlosorozco8344]

¡Gracias! Excelente video, sigue con este canal, comparte más de nextjs!

[@abnermartinez3268]

Super genial video para aprender autenticación en next espero hagas pronto mas video de next, Gracias FaztGod!!!

[@victorrivasrios7653]

Bro este tutorial está brutal, de los mejores que he visto

[@jonhjaider1000]

Que buen vídeo bro, gracias. Venía haciendo mis propios middlewares haciendo uso del getInitialProps y algunas veces se volvía un poco complicado manejar esto 🙌

[@TinoReyna1984]

Buenísimo. Mucho más fácil que con React puro, jeje... Y si le sumamos Context o Redux, recontra power. Tu video vale oro.

[@againstretrotopy]

Fazt, este video pudo ahorrarme dos días de googlear anteayer jajaja. Pero igual gracias, gran video. Amo tu contenido

[@maurolobo3450]

Excelente video!! Estoy con Nextjs 14, cambie algunas cositas por el App Router pero tu explicacion me sirvio muchisimo!!

[@YorchCb]

Literalmente me acabas de salvar, tenía ese error por usar jwt en vez de jose, siempre un genio !

[@adammoussa3239]

I don't speak your language but I understood every word, thanks for your help :)

[@programando_con_valor491]

Excelente aportación Fazt, gracias ...

[@Gomplayer12]

Siiiiiii!!!!!! estuve buscando muchas formas y tutoriales para poder proteger rutas. Gracias por el tutorial. voy a ver como aplico esto con tu tutorial de react con firebase pero en nextjs.

[@santiagocortes8684]

Impecable explicacion como siempre, super util toda la info que subis, gracias y saludos!

[@nihil_um]

Gran explicación. Por fin he podido entender, de forma clara, cómo funcionan los middlewares en Nextjs Gracias y un saludo.

[@Seven9717]

justo lo que nesesitaba para implementar en mi siguiente proyecto... muchas gracias fazt

[@GregoMartocci]

Gracias Fazt code, te juro que me re salvaste con esto, justo lo que necesitaba

[@benjaoliva3383]

Muy bueno video Fazt, muy claro y conciso, directo al grano !!

[@lucasgazzola]

Es increíble la calidad de la explicación! Grande!

[@starckops8692]

GRACIAS POR TODO FAZT!!!! algún día te invitare un café

[@jorgemaikelperezguedes1982]

excelente video fazt eres todo un crack, eres mi profesor favorito

[@luishernandosendoyaserrato2544]

Excelente y claro. Mil gracias por el contenido, eres inspirador.

[@miguelvasquez9849]

Increíble, para dummies. Muchas gracias.

[@necesidaddelocura]

Vi que varios tuvieron el mismo problema que yo de que la cookie no se almacenaba automáticamente al utilizar un servidor con Express. La solución es configurar el cors del server colocando app.use(cors({ origin: true, credentials: true })); y en el fetch de Next colocar en la opción credentials: 'include'. Si usan axios seria withCredentials: true

[@rafaelalvarez5668]

amigo tienes el repo de esa implementacion?

[@famicucci23]

Buenas!! tengo el mismo problema. Con esto que decís pude finalmente almacenar la cookie. El tema es que cuando quiero llamar al valor de la cookie con req.cookies obtengo un objeto vacío. Alguien sabe porqué?

[@lucianosantillan164]

me salvaste bro

[@joshsanders2479]

Has mejorado mucho la calidad de los tutoriales.

[@alfred5406]

Muy buen video, justo lo que buscaba

[@developeragg]

Felicidades! - Muchas gracias.

[@jampietri583]

Amazing. Thank you very much. Middleware was always badly explained on next.js website and example codes.

[@axelvalles255]

Buen video, me aclaraste muchas cosas sobre la autenticación en ssr

[@jesus_84_]

Maestro de maestros.

[@guatherodson6918]

Rayos nextjs verdaderamente es un unicornio

[@SaRaSa2012]

Excelente super bien explicado y ameno, gracias!!!

[@joaquinivanledesmasedran9048]

Al querer iniciar la sesion con la contraseña y mail me dice credenciales invalidas aunque sean las mismas que estan en el condicional 21:50

[@enzoagustinlopez9103]

Excelente video!!! 👏👏

[@kevkev9824]

Logre hacer el tutorial en typescript :3 queda mucho mejor, eres un crack!

[@josiaschirino8380]

Saludos bro. Como hiciste para setear las cookies. A mi no me funciona.

[@kevkev9824]

@@josiaschirino8380 te lo diría si recordara lo que hice hace 9 meses xD

[@antonioislasromero5539]

Maravilloso ❤

[@luchonicolosi4750]

PERO QUE BUEN VIDEO HERMANO.

[@tostaostr8168]

el mejor lugar de youtube es este

[@sandrosimon]

Otro video del legendario Fazt muy buenísimo. Tenía una duda: más o menos en el minuto 18:00 mencionas aquello de serializar. ¿Significa darle un formato especial a algún dato? ¿Es necesario hacerlo siempre? Gracias.

[@alvaroustarez4570]

Gracias Fazt!!!

[@kev153]

Hola Fazt gracias por el video, fue muy valioso, despues de la version 12.2 de next no he visto ningun video en youtube con info actualizada sobre los middlewares hasta ahora. Podrias subir un video usando los middlewares de next usando todo lo q ofrecen ? Te lo agradeceria un monton 🙏🏻😭

[@d13-s8b]

Grazie!!

[@kevincueva4419]

Epa! lo voy a replicar en python 👊

[@marxeballos]

Te quiero Fazt 🥰

[@sebastianvillarpando3109]

Muy buen video 😃

[@gposoft]

EXCELENTE saludos

[@MarlonHersal]

Buenisimos aporte bro.

[@santi_cendra_music]

Consutla @fazt como hacemos en el logout para eliminar las cookies del lado del cliente?

[@carlossierra173]

esto si me dio problemas esta semana sobre todo por el caso de verify jwt. Lo que hice que lo comunique por fetch desde mi backend a parte, es mas lento pero se me hace eficiente porque tengo front y back por separado. pd: seria bueno que hicieras un video sobre edge functions

[@elemda_ms]

Tengo el back-end separado del front-end, a la hora de recuperar las cookies me sale "undefined", ¿Cómo puedo hacer para que me traiga la cookie?, leí en StackOverflow que si están separados no se puede extraer una cookie y que es mejor hacerlo a través del LocalStorage, ¿eso es cierto?

[@AndresGarcia-tg7zk]

muy buen video !!

[@kaelinvoker0914]

Ojala algun día haga una aplicación completa con estas tecnologías

[@MiguelÁngelFernándezRodríg-q6b]

fazt al ejecutar el codigo y correrlo en produccion en el middleware no me reconoce las cookies en la primera renderizacion de la pagina por lo que me envia al login siempre aun despues de authenticarme, lo reconoce despues de refrescar el navegador , por que ocurre esto y como podria arreglar el problema

[@rderk]

Hola Fazt espero leas mi comentario, me encuentro desesperado porque estoy usando el bakcend en un localhost distinto al frontend con Vite, entonces las cookies se guardan en el servidor y no se almacenan en el lado del cliente, me gustaria saber como puedo enviarle al cliente la cookie y almacenarla ya que he estado investigando en español e ingles pero no encuentro lo que necesito :C

[@rafaelperez7029]

te amo bro gracias

[@simonhblanco]

Excelente tutorial..... Una consulta, si quisiera que el dashboard, solo pueda ser visto por una sola pestaña, es decir, si una vez logueado, intento abrir la misma información en otra pestaña, se debe controlar esto en el middleware ?

[@TornVeil7]

Muchas gracias hermano

[@blackwolf0011]

Wow como siempre excelente!!! Muchas gracias por tu tiempo, por cierto. Cómo se llama el tema que usas para VS code? Se ve genial

[@FaztCode]

Este tema se llama Ayu 😃

[@blackwolf0011]

@@FaztCode muchas gracias!

[@madmaxdios]

Muchas gracias!

[@thebigj3957]

fazt, una pregunta, al querer hacer un auto redirect, se podría hacer con el middleware? o tendría que hacerlo con el userRouter().push()? al intentar hacerlo con el middleware se vuelve loquisimo. Grcias!

[@asismelgarejo]

Mi backend está con Nest.js, como haría para pasarle las cookies en el middleware?

[@alant.695]

puedo hacer lo de la cookie igual en express sin nest ? es que al front no me llega la cookie no la crea

[@kevkev9824]

seria genial que implementes un proyecto de next con redux :3

[@FaztCode]

Voy a tratar de hacer uno muy pronto :)

[@TornVeil7]

@@FaztCode Por favor!

[@rafaelalvarez5668]

Buaaaa seguir este curso con la nueva actualizacion de next js13, fue todo un reto :0 JAJAJ si tienen dudas con gusto se las respondo

[@urielquiroz3842]

Excelente video, solo que tengo el back por separado y me causa problemas en mi ambiente de producción, en local funciona correctamente pero en producción cuando manipulo el token no me envía hacia el login y cuando recargo la pagina me manda al login aunque exista el token valido

[@edgardcarrillo8414]

Videazo!

[@brankoalvarez8632]

Buen video, pero yo cuando hago el setHeader no me manda la cookie? sera porque tengo antes un cookie parser o el expresssession?

[@miguelvasquez9849]

Tengo una duda. No es inseguro que el front sea quién proteja las rutas? O sea una persona no podría modificar el JS para poder acceder a esas rutas?

[@lucaslopez4086]

Excelente video. Si bien ya sabia utilizar jwt este video me saco varias dudas que tenia. Estoy queriendo usar express-session pero no le termino de entender. Podrías hacer un video de ejemplo de este? Saludos!

[@facundoscaine7707]

Sos Crack!

[@cristiandariovila6321]

Buenas! antes que nada gracias por tus videos! te hago una consulta... baje tu repositorio e inclui en el layout principal un navbar con Links a las distintas paginas creadas (login, dashboard, home) y aca empezo un problema, porque al navegar por los links noto que no siempre pasa por el middleware(puse un console.log para verificar los pasos) entonces al hacer logout y despues entrar al link de dashboard me ingresa cuando no deberia(y obviamente al solicitar lodatos de usario tira error)... tienen q pasar varios segundo(incluso talv vez un minuto) para q al darle click al link vuelva a pasar por el middleware... sera q es una configuracion de los middleware o del componente Link de next? gracias

[@cesaraar]

Excelente video master, es posible que tengas algun video donde uses la ruta "pages/api/auth/[...nextauth].js" que da next js para hacer login contra una base de datos mysql. gracias por todo

[@danielzapata9099]

grande crack 👍

[@RigobertoEHernandezArguelles]

Fazt todo muy bien pero el uso del middlewareme dejo inservible el router.push en las rutas protegidas, tengo que acceder manualmente a ellas desde el url, ya no puedo con botones o router.push

[@Antony-ez8cx]

Muy buen video, solo tengo una pregunta, al momento de ingresar desde otro computador en la misma red, no envia la cookie al cliente, pero desde mi propio computador si lo realiza

[@RCanaCH]

Si va a hacer un proyecto, puede implementar la estrategía de refresh token para que no tengan acceso al token y, en el backend, nestjs junto con TypeORM y Postgres

[@angelsrt3]

fazt no se si haya un video que hable sobre el concempo de cluster en node js

[@FaztCode]

Hola Angel, aun no, pero si tengo un ejemplo listo, esta semana voy a publicarlo :)

[@Gomplayer12]

De tu tutorial React & Firebase Login con API Context (Firebase Authentication) ¿Cómo consigo el token o el cookie para aplicar lo de este tutorial? Estoy tratando de convertir el codigo de ese tutorial a este pero usando nextjs.

[@albertowong5069]

Que extensión utilizas para el autocompletado ? es copilot?

[@MrRevillod]

Aplicar jwt en Express JS para validar usuarios y sesiones sería similar?

[@alfred5406]

Como se llama la extensión que usas para que te muestre el posible código que vas a usar??

[@aramabdulrahman2087]

lots of thanks.. please next do the same but with supabase or firebase

[@misterioss.a305]

Gracias crack:)

Hola Fazt! muchas gracias por tu contenido siempre bueno! Solo queria agregar que tal como muestras en el video proteges rutas pero cuando vuelves a /login te lo permite lo cual no debe pasar. Trate de redireccionar cuando el pathname es /login a / pero no fue posible en el middleware pero la solucion con la que pude hacerlo es desde la page login propiamente, tomando el context.req.cookie del getServerSideProps lo cual me permitio conocer si existe un cookie, luego validarlo y redireccionarlo a / sino return : {props:{}}. Si existe otra solucion que no encontre por favor compartirla! gracias!🙃

[@code_castle]

Genial crack

[@akiles1004]

Alguien mas le sale en el navegador localhost te redirecciono demaciadas veces cuando ponen el middleware y no hay un token

[@lucaslopez4086]

Tengo un problema. Intento seguir el ejemplo todo bien. Aunque tengo mi backend en NodeJS y mi front en NextJS. Pero al hacer el post del login no me guarda las cookies en el navegador, pero en el postman por ej si me las guarda en los headers. En la respuesta también me muestra las cookies en los headers pero simplemente no se me guardan automáticamente en las cookies. Alguna idea?

[@ismaelgrimaldo2125]

dónde puedo ver tu código?

[@cosmoscrew2]

En tu petición debes agregar una configuración Si usas axios puedes buscar sobre la opción withCredentials y ponerla en true En caso de fetch, debes poner la opción de credentials con el valor de include

[@rderk]

lo pudiste solucionar bro? tengo el mismo inconveniente ya que para el frontend estoy usando vite y cuando hago el login se guarda en el backend y en el navegador no se guarda para volverlo a usar debido a que se ejecutan en distintos localhost :C