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
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 🙌
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!
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é?
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.
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!
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 🙏🏻😭
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
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 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 ?
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
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.
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!🙃
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?
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 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
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. 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!
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?
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
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
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
Yo perdí mucho tiempo intentando hacer funcionar onAuthStateChanged pero jamas funcionó en el authProvider, solo funciona si lo ejecuto en el api para el login, justo despues de hacer login pero ahi no me sirve. así que eliminé firebase de mi proyecto.
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
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.
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.
Estaba esperando este video!!! He crecido mucho como desarrollador gracias a tus videos! Te amo k-bron!!!
X2
el minuto 57:17 es algo que te puede tener girando sobre ti mismo semanas sin avanzar. Muchisimas gracias FaztCode
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
Últimamente Fazt me salva la vida más de lo que merezco, jajaja. Gracias por este tutorial.
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 🙌
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!
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!
Literalmente me acabas de salvar, tenía ese error por usar jwt en vez de jose, siempre un genio !
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* :)
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.
Me saco el sombrero de lo excelente que están editados los videos. 👏 Kudos for you Fazt!
I don't speak your language but I understood every word, thanks for your help :)
Gracias por el video Fazt , justo mis palabras preferidas , ejemplo practico y donde voy a enseñarles
Bro este tutorial está brutal, de los mejores que he visto
Fazt te luciste con este video y con todos los que haces. Espero esos próximos ejemplos siguiendo este enfoque. 😁👌
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
Fazt, este video pudo ahorrarme dos días de googlear anteayer jajaja. Pero igual gracias, gran video. Amo tu contenido
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.
¡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 Fazt code, te juro que me re salvaste con esto, justo lo que necesitaba
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 !!
Excelente aportación Fazt, gracias ...
Increíble, para dummies. Muchas gracias.
Gran explicación.
Por fin he podido entender, de forma clara, cómo funcionan los middlewares en Nextjs
Gracias y un saludo.
Impecable explicacion como siempre, super util toda la info que subis, gracias y saludos!
justo lo que nesesitaba para implementar en mi siguiente proyecto... muchas gracias fazt
GRACIAS POR TODO FAZT!!!! algún día te invitare un café
excelente video fazt eres todo un crack, eres mi profesor favorito
Excelente y claro. Mil gracias por el contenido, eres inspirador.
Es increíble la calidad de la explicación! Grande!
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
Rayos nextjs verdaderamente es un unicornio
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
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 🙏🏻😭
Felicidades! - Muchas gracias.
Ojala algun día haga una aplicación completa con estas tecnologías
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
Amazing. Thank you very much. Middleware was always badly explained on next.js website and example codes.
Has mejorado mucho la calidad de los tutoriales.
Excelente super bien explicado y ameno, gracias!!!
Buen video, me aclaraste muchas cosas sobre la autenticación en ssr
Muy buen video, justo lo que buscaba
Grazie!!
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
Te quiero Fazt 🥰
el mejor lugar de youtube es este
Maestro de maestros.
Maravilloso ❤
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 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 ?
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
PERO QUE BUEN VIDEO HERMANO.
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.
Gracias Fazt!!!
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!🙃
Videazo!
seria genial que implementes un proyecto de next con redux :3
Voy a tratar de hacer uno muy pronto :)
@@FaztCode Por favor!
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!!! 👏👏
Epa! lo voy a replicar en python 👊
Muchas gracias hermano
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 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
Muy buen video 😃
Muchas gracias!
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.
Mi backend está con Nest.js, como haría para pasarle las cookies en el middleware?
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!
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?
muy buen video !!
Buenisimos aporte bro.
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!
te amo bro gracias
Que extensión utilizas para el autocompletado ? es copilot?
Excelente video, en el caso de los usuarios que tengan roles y tiene accesos a diferentes vista, el config cambiaria?
fazt no se si haya un video que hable sobre el concempo de cluster en node js
Hola Angel, aun no, pero si tengo un ejemplo listo, esta semana voy a publicarlo :)
@Fazt Code por favor sube un video de como hacer pruebas unitarias usando Jest en NextJs
EXCELENTE saludos
Y como protegeria a las apis de nextjs?
Consutla @fazt como hacemos en el logout para eliminar las cookies del lado del cliente?
puedo hacer lo de la cookie igual en express sin nest ? es que al front no me llega la cookie no la crea
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?
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
lots of thanks.. please next do the same but with supabase or firebase
Aplicar jwt en Express JS para validar usuarios y sesiones sería similar?
Buen video, pero yo cuando hago el setHeader no me manda la cookie? sera porque tengo antes un cookie parser o el expresssession?
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
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
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
hola señor Fazt podría hacer el mismo video, pero utilizando firebase para la autenticación?
Yo perdí mucho tiempo intentando hacer funcionar onAuthStateChanged pero jamas funcionó en el authProvider, solo funciona si lo ejecuto en el api para el login, justo despues de hacer login pero ahi no me sirve. así que eliminé firebase de mi proyecto.
Sos Crack!
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
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.