React y Typescript Autenticación simple usando Zustand

En este tutorial aprenderemos a crear un proceso de autenticación usando el Stack MERN (Mongodb, Express, React y Node) ademas de usar Typescript tanto en el Backend (Nodejs) como en el Frontend (React), y Zustand como biblioteca para manejar el estado global de nuestra web.
Este no es un ejemplo completo, pero es más un repaso practico sobre como crear una aplicación con autenticación, una vez terminado podrás extenderlo con mas tecnologías como una base de datos.
Videos Recomendados
⮕ Curso de React • Curso de Reactjs desde...
⮕ Curso de Javascript para React • Javascript para Aprend...
⮕ Zustand Tutorial • Zustand, más fácil que...
⮕ Zustand React Query • React Query y Zustand ...
💻 Código del Proyecto: github.com/faz...
⭐ Cursos Recomendados
⮕ Rust, Instalacion Windows • Rust (Lenguaje de Prog...
⮕ Rust, Instalacion Linux • Rust, Instalación en L...
⮕ Rocket, Rust backend Framework • Rocket, Framework Back...
⮕ Tauri, Rust Desktop Framework • Tauri - Aplicaciones d...
⮕ Curso de Nodejs • Nodejs Curso Práctico ...
⮕ MPA vs SPA • Aplicaciones SPA vs MP...
⮕ Nodejs y Jest Testing • Nodejs Testing con Jes...
⮕ MERN Stack • MERN Stack con Context...
🗣 Redes Sociales
⮕ Twitter / fazttech
🎒 Servicios Recomendados
⮕Ledger (Hardware Wallet) bit.ly/3ijsVNW
⮕ SiteGround bit.ly/31u9ZEk
⮕ Cloudinary bit.ly/3ohNlJ7
⮕ Namecheap namecheap.pxf....
🌎 Sitio Web
fazt.dev
#reactjs #zustand #typescript

[@cristoferhernadez8412]

Fazt el verdadero "the 🐐", que tiene un vídeo resolviendo el problema, incluso antes de que se me preste ese problema 😎🤙

[@elmerperezperez4832]

Amé el tutorial integramente, como siempre fué una clase majistral. Me gustaria un ejemplo de zustand + nextjs 13 + typeScript + tailwind + supabase.....se que a muchos les interesará tambien🙏🙏

[@MaxiDecoHome]

react + express > nextjs

[@anselmocuevas5119]

@@MaxiDecoHome ???

[@SeoEnEspanol]

Gracias por este tipo de contenido, de verdad es muy util todo lo que tu canal y videos aportan tanto a principiantes como a quien ya esta en el mundo de la programacion! De nuevo, muchas gracias y siempre alerta por tu nuevo contenido. Un abrazo!

[@nicolasviruel3408]

Quiero Agradecerte Fazt !! la verdad que tus videos son los mejores que encontre en todo youTube. Me encanta la forma en que vas mostrando paso a paso. Utilize este video para hacer el front y utilice otro de tus videos creando una Api tambien con typeScript, los pude combinar y conseguir el mejor resultado. GRACIAS

[@JimyDrive]

Zustand me está pareciendo muy potente. Hasta el punto de que ya no me planteo volver a Redux o a useContext. Muchas gracias por descubrinos esta herramienta

[@brawnie3969]

Me encantan tus videos, me ayudan a comprender mucho mejor estos temas, gracias.

[@oscarbenavides9385]

Muchas gracias fazt, lo añadí junto con next 13 ♥

[@samanthamazabel]

Te amo bebe

[@juandanielvalderrama1485]

Eres 7n gran creador de contenido, 8nicie mi mundo laboral como desarrollador front con react y todo lo que enseñas es precisamente lo que e utilizado y necesitado

[@JimyDrive]

Zustand ha sido una grata sorpresa para empezar el año. Pronto lo anadiré a mis proyectos

[@SonGoku-pc7jl]

fazt Dios te bendiga, ya te digo, que pedazo de clase, muchisimas gracias, encima con typescript para que lo vayamos aprendiendo y quitando el miedo, genial, además pensaba que era un pedazo de ejemplo digno de pedirte que lo continuaras pq al final siempre nos acabamos bloqueando al ampliar y mola mucho cuando al final dices que utilizarás el codigo para seguir creando algo más real, genial y grande jaja xD muchisimas gracias

[@jemalleon9248]

me salvaste con mi proyecto final de ciclo ty

[@freddyescobar96]

Que sencillo y elegante es Zustand, es muy pero muy parecido a Pinia de Vue, gracias máster por este tipo de contenido

[@outletshelssy]

Muchas gracias por compartir tu conocimiento, excelente modulo para React

[@jesusmonge.l]

Gracias, justo estoy creando una aplicación y me sirvió bastante el vídeo! 🦾

[@nicoux9581]

Muy bueno! 👏👏👏👏👏Gracias

[@oh-vito]

El mejor ejemplo de Autenticacion, lo simple siempre prevalece ante todo quiza por la libreria que maneja el state de react, es decir Zustand parece sencillo o pude ser tus tecnicas de expresar codigo como la tecnica del retorno, es decir inicia escribiendo de derecha a izquierda o la tradicional por abstraccion.

[@ZBROOS]

Que buen contenido por Dios, gracias Fazt y feliz inicio de año:)

[@sefhiroth]

Gracias por le contenido Fezt !! Mas contenido con TypeScript porfa :).

[@devdariill]

40:00 Zustan Config 53:00 Header Authorization : token

[@NeoAres1]

Estaba buscando en KZbin para averiguar cómo hacer un login con React, llevo 10 pestañas abiertas en el navegador, acabo de ver que fazt code tiene subido uno, automáticamente cierro las demás pestañas, y... ¡a empezar! 😀

[@Deus-lo-Vuilt]

Gracias bro ,como siempre excente tutorial , mucho éxito!

[@JOSEALONSO-ti2id]

Dios te bendiga, mas react por favor . Por otro lado, en el canal tenemos curso de javascript y javascript para react pero podriamos tener un curso intermedio de solo vanilla JS 🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡

[@cristhianmenjivar2366]

Execelente video 👍

[@neyjunoir]

fazt porfa próximo video un clone de KZbin usando reactnative estaría buenísimo 👏👏

[@eliseoabadia7312]

Eres el mejor amigo

[@8koi245]

dios pero que monstruo de pc tenés

[@cristopheraguirre997]

Muchas gracias fazt tqm

[@arielangelsantillanreyna2947]

Hola Fazt.... gusto de ver otro video tuyo. Tengo una pregunta sabes si puedo crear mas de 1 estado global? es decir usar la funcion de create se zustand una para usuarios, otra para productos, otra para para sucursales, etc. Es que veo que para cada propiedad que quieras agragar y actualizarlo directamente es neceario su funcion set en especifico.

[@chaleco5882]

Consulta. Por qué prefieres usar la biblioteca de axios en vez de usar fetch?

[@sergiolinares910]

Gracias Fazt

[@im_jostincII]

por que lo guarda desde el front u y no en una coolie desde el back?

[@WilmerRCz]

Hola @Fazt muchas gracias por todos tus vídeos, eres grande! Tenía una consulta, para evitarme estar extendiendo el tipo Request, lo que hice fue enviar los datos por req.cookies y me sirvió. Pero no sé si esto influya en algo del API

[@noonmy1551]

Hola fazt, podrías hacer un vídeo hablando sobre flet? La librería de Python + flutter

[@DiegoNelson]

Hola @FaztCode , muy bueno el tutorial, una consulta referente al VS Code: que theme usas y que typografia? Gracias

[@soy-luisarrieta]

Con autenticación "simple" te refieres a que es muy inseguro o tal vez es porque te refieres a un amplio sistema de autenticación como recuperar contraseña, cambiar contraseña, validación por correo, recordarme, etc...

[@Niojar]

No usaba toolkit porque me parecía algo enredado la forma de manejar el estado, pero encuentro a Zustand bastane cómodo.

[@gustavoca_]

Fazt, todavía no entiendo la diferencia al momento de intanciar el hook, ejemplo: const {clotes, colors} = useStore() // así obtengo todo el estado básicamente a diferencia de hacerlo como tú lo haces por separado o usando el shallow

[@victoralcala]

Iluso de mí que me vuelvo a creer que en un par de horas me voy a hacer un vídeo tuyo de una hora xDD

[@devdariill]

¿ para que sirve tener el Set-Cookie ? Para que el backend lo valide con cookie-parser..

[@alexon2010]

O Problema é zustand deveria ser utilizando com persistência, mas não funciona mais com create

[@WilmerRCz]

Hola Fazt estoy haciendo un proyecto con zustand pero tengo una duda, en el localstorage se almacena el estado global de mi app, pero algo que me doy cuenta es que puedo modificar el estado desde el localstorage... Entonces si yo tengo un funcion que si el usuario esta autenticado (true) puedo entrar a ciertas rutas y coloco ese valor directamente en el localstorage como true puedo entrar a esas rutas sin haber iniciado sesión. Habrá una forma de que mi estado se guarde en el localstorage pero solo el string pero que si lo modifico por ahi no me modifique el estado de mi app. Muchas Gracias! Eres grande, tus videos me han ayudado mucho :)

[@_niiico]

Una pregunta, no me he animado a hacer el curso porque aunque me fascina practicar, estoy buscando proyectos para incluir en mi portafolio y este al tener backend no sé cómo desplegarlo. Solo sé que railway tiene una parte gratuita pero es muy limitada :( Cómo podría desplegar para poder mostrarlo en mi portafolio?

[@code_castle]

Gracias... Para cuándo Antd ??

[@djtoon8412]

can i get english version or article on this

[@misterrr6154]

hola fazt te comento tengo un error y es que en el archivo de axios.ts me dice en config.headers El tipo '{ Authorization: string; }' no se puede asignar al tipo 'AxiosRequestHeaders'. Al tipo "{ Authorization: string; }" le faltan las propiedades siguientes del tipo "AxiosHeaders": set, get, has, delete y 23 más.

[@helloWorldPlus]

Hola! Tengo el mismo error, lo llegaste a arreglar?

[@misterrr6154]

​@@helloWorldPlus no, no lo llegue a arreglar

[@axelhuerta]

Yo lo arregle así: config.headers.Authorization = `Bearer ${token}`;

[@nicolasviruel3408]

Me parece q se trata de la versión de typescript, a mi también me tiro el mismo error. Y desp me dice que el “Create “ está deprecado en el store

[@ivanjosephgamboasanchez1158]

Hola, tienes un discord de la comunidad?

[@DavidMkp]

Hola como logras la terminal esa de VS Code?

[@FaztCode]

Hola David, el tutorial de esa terminal se puede encontrar aqui: kzbin.info/www/bejne/mmrcYZ9trr5nZpY

[@_hugo_cruz]

Gracias bro!!, Cuando sacas la continuación?

[@FaztCode]

esta semana publique un ejemplo más completo con base de datos y mejor frontend, basado en lo que se ha explicado aqui

[@pietradev]

@@FaztCode No encontré el video, sigue subido?

[@victorsalazarordaz]

Buenas noches amigo! Saludos cordiales. Estoy interesado en adquirir cursos con usted! Algún correo dónde pueda contactarle o número? Muchas gracias.

[@Holri]

Master 🐉

[@kevinmorales3991]

Hola, estamos realizando un proyecto para ganar experiencia. Si alguien está interesado en participar, por favor comenten sus roles y conocimientos.

[@michae301]

:( se agradece pero en mi caso me hubiera gustado una aplicacion de auth segura con refresh token y toda esa cosa gigante

[@eliseoabadia7312]

Amigooo una duda puedo hacer el zustand que se libere con el tiempo del token?