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 :)
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. ; )
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
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* :)
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
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é?
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 🙌
Si a alguien le da el siguiente error: [JWSInvalid: Compact JWS must be a string or Uint8Array] { code: 'ERR_JWS_INVALID', name: 'JWSInvalid' } Lo mas probable es que se esté pasando un objeto y no un string que es lo que se espera, en ese caso prueben extrayendo de la variable jwt la propiedad "value" haciendo algo como lo siguiente: await jwtVerify(jwt.value, new TextEncoder().encode("secret")); De esta forma le pasamos solo el valor y no el objeto completo Espero le sirva a alguien, ya que yo me tarde como hora y media en darme cuenta de ello jajaja. ¡Saludos!
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!
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 🙏🏻😭
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.
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.
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
Год назад+1
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!🙃
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 ?
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?
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
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
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!
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!
Genial clase, maestro! Solo creo que ha quedado pendiente ver como comprobar que el token ha caducado o no en el middleware para mandar al login a los expirados. Con jwt ya lo hemos visto, pero con jose veo que no me da error cuando el token ya ha caducado...
Es curioso pero parece que cuando hacía el destructuring de {payload}=jswVerify(...) la libreria jose no arrojaba error por tiempo expirado, al guardar todo lo que retorna parece que si. Luego de ahí extraigo el payload. ¿No es extraño?
Hola gracias por el contenido, podrías enseñar como usar el Middleware con firebase al iniciar sesión, Nextjs en su version 13 cambio mucho. Ojala puedas. saludos y gracias por enseñar.
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
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
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
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
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.
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
Muy buen video, aunque me quedé con ganas de saber como sería la autenticación mediante el ROL del usuario, por ejemplo, que hubiera páginas que sólo pudiera acceder un administrador y no un usuario común, cualquier ayuda se agradece :).
Hola Fazt, primero que todo quisiera agradecerte por todo el contenido que haces, explicas muy bien y se entiende todo de forma clara, por otra parte quisiera preguntarte como podria proteger o restringir el acceso a /login si el usuario ya esta autenticado, es decir, ya el usuario inicio sesion y esta la cookie en el navegador y el usuario digito en la barra de navegacion la ruta /login pero como ya esta autenticado que no le permita el acceso sino hasta despues de que se eliminen las cookies o haga logout?
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 :)
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. ; )
Gracias por querer darnos contenido de calidad y estar pendiente de que se cumpla.
Está bien, pero los cortes son muy rápidos y toca ser muy preciso para pausar y leer el código.
Que Genio! Te mereces 5k likes. Una ayuda enorme! Gracias
da este error JWSSignatureVerificationFailed: signature verification failed, alguien ha encontrado la solución? "next": "13.4.12", "jose": "^4.14.4",
Buen video Fazt, gracias a tí evité comprar cursos costosos, todo lo que enseñas es contenido premium
nunca habia podido entender de forma generalizada este tema hasta que me tope con este video.
el minuto 57:17 es algo que te puede tener girando sobre ti mismo semanas sin avanzar. Muchisimas gracias FaztCode
Estaba esperando este video!!! He crecido mucho como desarrollador gracias a tus videos! Te amo k-bron!!!
X2
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
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* :)
Últimamente Fazt me salva la vida más de lo que merezco, jajaja. Gracias por este tutorial.
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
amigo tienes el repo de esa implementacion?
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é?
me salvaste bro
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 🙌
I don't speak your language but I understood every word, thanks for your help :)
Me saco el sombrero de lo excelente que están editados los videos. 👏 Kudos for you Fazt!
Literalmente me acabas de salvar, tenía ese error por usar jwt en vez de jose, siempre un genio !
Excelente video!! Estoy con Nextjs 14, cambie algunas cositas por el App Router pero tu explicacion me sirvio muchisimo!!
Que rápido fazt!
No tiene mucho que me respondiste el comentario donde te pedía esto
Muchas gracias!
Si a alguien le da el siguiente error:
[JWSInvalid: Compact JWS must be a string or Uint8Array] {
code: 'ERR_JWS_INVALID',
name: 'JWSInvalid'
}
Lo mas probable es que se esté pasando un objeto y no un string que es lo que se espera, en ese caso prueben extrayendo de la variable jwt la propiedad "value" haciendo algo como lo siguiente:
await jwtVerify(jwt.value, new TextEncoder().encode("secret"));
De esta forma le pasamos solo el valor y no el objeto completo
Espero le sirva a alguien, ya que yo me tarde como hora y media en darme cuenta de ello jajaja. ¡Saludos!
Estaba igual pero la solucion es super sencilla solo cambia la version de next a la 12.7.4 y ya
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!
Este video lo estaba esperando hace mucho , muchas gracias. Excelente aporte
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.
Gracias por el video Fazt , justo mis palabras preferidas , ejemplo practico y donde voy a enseñarles
Fazt te luciste con este video y con todos los que haces. Espero esos próximos ejemplos siguiendo este enfoque. 😁👌
Rayos nextjs verdaderamente es un unicornio
Fazt, este video pudo ahorrarme dos días de googlear anteayer jajaja. Pero igual gracias, gran video. Amo tu contenido
Gran explicación.
Por fin he podido entender, de forma clara, cómo funcionan los middlewares en Nextjs
Gracias y un saludo.
Increíble, para dummies. Muchas gracias.
Excelente aportación Fazt, gracias ...
Bro este tutorial está brutal, de los mejores que he visto
¡Gracias! Excelente video, sigue con este canal, comparte más de nextjs!
Que maestro. No sabes cuánto lo esperaba.
Sos gigante, Fazt. Saludos desde Argentina.
Gracias Aaron, Saludos :)
GRACIAS POR TODO FAZT!!!! algún día te invitare un café
Gracias Fazt code, te juro que me re salvaste con esto, justo lo que necesitaba
excelente video fazt eres todo un crack, eres mi profesor favorito
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 🙏🏻😭
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.
Super genial video para aprender autenticación en next espero hagas pronto mas video de next, Gracias FaztGod!!!
Muy bueno video Fazt, muy claro y conciso, directo al grano !!
justo lo que nesesitaba para implementar en mi siguiente proyecto... muchas gracias fazt
Impecable explicacion como siempre, super util toda la info que subis, gracias y saludos!
Es increíble la calidad de la explicación! Grande!
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.
Ojala algun día haga una aplicación completa con estas tecnologías
Maestro de maestros.
el mejor lugar de youtube es este
Amazing. Thank you very much. Middleware was always badly explained on next.js website and example codes.
Excelente y claro. Mil gracias por el contenido, eres inspirador.
Felicidades! - Muchas gracias.
Maravilloso ❤
Logre hacer el tutorial en typescript :3 queda mucho mejor, eres un crack!
Saludos bro. Como hiciste para setear las cookies. A mi no me funciona.
@@josiaschirino8380 te lo diría si recordara lo que hice hace 9 meses xD
PERO QUE BUEN VIDEO HERMANO.
Te quiero Fazt 🥰
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
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!🙃
Muy buen video, justo lo que buscaba
Excelente super bien explicado y ameno, gracias!!!
Buen video, me aclaraste muchas cosas sobre la autenticación en ssr
Grazie!!
Has mejorado mucho la calidad de los tutoriales.
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
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
Este tema se llama Ayu 😃
@@FaztCode muchas gracias!
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 ?
Gracias Fazt!!!
Videazo!
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?
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
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
Epa! lo voy a replicar en python 👊
Excelente video!!! 👏👏
seria genial que implementes un proyecto de next con redux :3
Voy a tratar de hacer uno muy pronto :)
@@FaztCode Por favor!
Muy buen video 😃
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!
muy buen video !!
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!
EXCELENTE saludos
Muchas gracias!
te amo bro gracias
Genial clase, maestro! Solo creo que ha quedado pendiente ver como comprobar que el token ha caducado o no en el middleware para mandar al login a los expirados. Con jwt ya lo hemos visto, pero con jose veo que no me da error cuando el token ya ha caducado...
Es curioso pero parece que cuando hacía el destructuring de {payload}=jswVerify(...) la libreria jose no arrojaba error por tiempo expirado, al guardar todo lo que retorna parece que si. Luego de ahí extraigo el payload. ¿No es extraño?
Buenisimos aporte bro.
Hola gracias por el contenido, podrías enseñar como usar el Middleware con firebase al iniciar sesión, Nextjs en su version 13 cambio mucho. Ojala puedas. saludos y gracias por enseñar.
Muchas gracias hermano
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
Mi backend está con Nest.js, como haría para pasarle las cookies en el middleware?
Sos Crack!
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?
grande crack 👍
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
Que extensión utilizas para el autocompletado ? es copilot?
Buen video, pero yo cuando hago el setHeader no me manda la cookie? sera porque tengo antes un cookie parser o el expresssession?
Excelente video, en el caso de los usuarios que tengan roles y tiene accesos a diferentes vista, el config cambiaria?
Gracias Fazt por el video, era justo lo que estaba buscando!!
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
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
puedo hacer lo de la cookie igual en express sin nest ? es que al front no me llega la cookie no la crea
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.
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
Muy buen video, aunque me quedé con ganas de saber como sería la autenticación mediante el ROL del usuario, por ejemplo, que hubiera páginas que sólo pudiera acceder un administrador y no un usuario común, cualquier ayuda se agradece :).
Pero si se supone que en el payload esta el rol es el mismo caso del video
@Fazt Code por favor sube un video de como hacer pruebas unitarias usando Jest en NextJs
Aplicar jwt en Express JS para validar usuarios y sesiones sería similar?
Consutla @fazt como hacemos en el logout para eliminar las cookies del lado del cliente?
lots of thanks.. please next do the same but with supabase or firebase
Hola Fazt, primero que todo quisiera agradecerte por todo el contenido que haces, explicas muy bien y se entiende todo de forma clara, por otra parte quisiera preguntarte como podria proteger o restringir el acceso a /login si el usuario ya esta autenticado, es decir, ya el usuario inicio sesion y esta la cookie en el navegador y el usuario digito en la barra de navegacion la ruta /login pero como ya esta autenticado que no le permita el acceso sino hasta despues de que se eliminen las cookies o haga logout?
En el github esta tu respuesta