Muchas gracias por la ayuda! Estuve renegando mucho con esto, no podía hacer que no entrara a la ruta privada, el problema que tenia es que cuando hacia logout, en vez de eliminar la session la ponía en false! Aprendí lo del index que no lo sabia, de echo pensé que era de una versión vieja de react-router-dom y es muy útil. Muchas gracias nuevamente, como siempre me sorprendes!
Muchas gracias Tincho. Todo es acostumbrarse. Al final yo he acabado prefiriendo tener el componente Outlet, me parece más claro dónde se mostrarán las cosas. Aún así es cierto que lleva un tiempo adaptarse a esta nueva forma de trabajar.
Muchas por el video, yo tenia ideas y conceptos para mi proyecto pero no sabia como aplicarlo dentro del route y login. Gracias a la excelente explicación aprendí lo que creí haber aprendido antes. Saludos Cordiales.
Muchas gracias Hiram!! En este creo que se entiende muy bien para qué sirven ambos hooks: React Toast. El ejercicio perfecto para repasar API Context y los hooks de React ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OZiwWlXjsFg.html Un abrazo!
Entonces si voy directamente al LocalStorage y escribo manualmente MY_AUTH_APP = true, el login quedaría obsoleto, ya que puedo loguearme sin necesidad de poner clave y usuario. En el caso de rutas esta perfecto hasta que debes proteger rutas según el rol de usuario, si creamos usuarios por default y luego tenemos rutas protegidas para admin, en ese caso que opciones habrían, si se hace una llamada a una api usando passport local con token o sesiones y también con estrategias de google u otro proveedor. Seria un videaso si alguien explicara esto de manera real, con ejercicios reales y no tan superficial, algo que sirva a nivel de producción, espero aprender React y NodeJs y hacer videos con casos reales, para eso ufff me falta mucho aun. Pero me ha servido mucho para tener una idea de protección de rutas, hasta ahora el mejor que he visto.
Muchas gracias Henry! Y muy muy buen apunte. En el vídeo no quise complicarme la vida creando un sistema protegido mediante usuario y contraseña ya que iba a quedar muy largo. Pero lo que comentas del Local Storage quedaría resuelto con ello. Por lo demás me apunto tu sugerencia. A ver si puedo grabar en el futuro un vídeo más completo explicando todo lo que comentas. Un abrazo!
Entiendo que en el logout, cuando realizas el useEffect, deberías pasarle al menos un array de dependencias vacío para evitar re reders innecesarios (loop). Debido a que al ejecutarse el useEffect del logout se ejecuta un re render el árbol principal, no se llega a percibir este re render en loop. Sin embargo, hay que recordar como buena práctica siempre poner un array de dependencias vacio al menos al usar un useEffect.
Me re sirvio como generar el context para manejar la autenticacion... Ademas de eso me hice un hook para redireccionar en caso que no este autenticado el usuario. Me quedo una duda... Se puede manejar todo eso desde el context?? O es mejor separar las logicas?? Gracias por el video! saludos!
Yo eso lo hago dentro del componente que rodea a toda la sección privada pero no tiene por qué ser la única ni la mejor forma. Si la que tú has pensado se adapta mejor a lo que necesitas, ¡adelante!
Excelente video, muy claro todo y bien explicado, me sorprendió el cambio a fondo claro 😎. Que extensión usas para señalar los espacios en blanco con puntos?, Un saludo que vengan más videos pronto
Muchas gracias Gerardo!! Cómo en todos tu videos, super claro!!!. Te consulto, en caso que implemente una llamada a una API para obtener un token, como le pasó al contexto las variables como email y contraseña para implementar la lógica en login usando el hook usecallback?
se que el video ya tiene su tiempo pero es posible que este mal planteado(? si soy isAuthenticated === true entiendo que no puedo llegar nunca a outlet el cual representa login y esta bien pero también representa a home entonces que es una ruta publica sea para gente logueada o no digamos que si tuviera mas rutas publicas los autenticados nunca podrian llegar o estoy hablando tonteras xD
Yo tengo el mismo código, pero después del login tengo una lista de productos, y puedo ir al detalle de cada producto en otra pantalla, pero si intento hacer lo mismo pero desde la url (products/detail/id_product) no me redirige a la pantalla de detalle sino al Home, sabes cómo solucionarlo
@@LatteAndCode Ya logre que me funcionara, era que estaba consultando a cognito si el usuario estaba logueado y la respuesta de eso se demoraba un poco, entonces le puse un isLoading para que solo ejecutara el codigo siempre y cuando ya hubiera terminado la consulta
Hola. He visto que escribes localeStorage en la línea 13 de la función login y en la línea 18 de la función logout en el archivo authContext.js, y no te da error. A mí además me dice "React Hook useCallback has a missing dependency: 'setIsAutenticated' " ¿Alguna idea?
Muy buenos tus videos! Muchas gracias. 😍 Me siento un poco perdida con el useMemo. En este caso por qué sería necesario? En la documentacion dice que es para evitar el renderizado de un valor que es costoso crear, y en este caso una vez que obtenes la respuesta del 'backend' ya estarías guardando en el contexto que el usuario esta autentificado, no? Perdon si estoy diciendo cualquier cosa
Hola Celine! Muchas gracias! Te dejo un enlace a un par de vídeos donde explico lo que me preguntas. Si aún así te quedas con dudas, escríbeme de nuevo! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-y_U__wcy5nk.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gaWT4d8RSuM.html
Se podria devolver algun tipo de mensaje si la funcion login diera error? Para mostrarlo en la pantalla de login y asi dar un poco de feedback al usuario... Gracias!
@@LatteAndCode ¿Como se haria? He probado a hacer un return de string con la info obtenida del server pero al recuperarlo cuando llamo a login() nunca me aparece (undefined).
si veo este video podre solucionar el problema que tengo que al recargar me elimina el useAuth que tengo de los datos de usuarios de la aplicion por ende me redirecciona al login, lo averiguaremos!! jajaja
