React y Typescript Autenticación simple usando Zustand

Подписаться 262 тыс.

Просмотров 20 тыс.

50% 1

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

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 64

@cristoferhernadez8412 7 месяцев назад

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

@JimyDrive Год назад

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

@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!

@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

@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

@dfdadsx 5 дней назад

tus videos siempre resuelven mis problemas, tkm

@jemalleon9248 4 месяца назад

me salvaste con mi proyecto final de ciclo ty

@outletshelssy Год назад

Muchas gracias por compartir tu conocimiento, excelente modulo para React

@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 🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡🧡

@ZBROOS Год назад

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

@chaleco5882 Год назад

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

@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

@8koi245 Год назад

dios pero que monstruo de pc tenés

@cristhianmenjivar2366 Год назад

Execelente video 👍

@sergiolinares910 Год назад

Gracias Fazt

@DiegoNelson Год назад

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

@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

@nicoux9581 Год назад

Muy bueno! 👏👏👏👏👏Gracias

@noonmy1551 Год назад

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

@eliseoabadia7312 Год назад

Eres el mejor amigo

@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...

@code_castle Год назад

Gracias... Para cuándo Antd ??

@devdariill Год назад

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

@kevinmorales3991 Год назад

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

@freddyescobar96 Год назад

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

@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

@neyjunoir Год назад

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

@arielangelsantillanreyna2947 6 месяцев назад

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.

@alexon2010 Год назад

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

@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

@im_jostincII 6 месяцев назад

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

@ivanjosephgamboasanchez1158 Год назад

Hola, tienes un discord de la comunidad?

@djtoon8412 Год назад

can i get english version or article on this

@NeoAres1 Год назад

Estaba buscando en RU-vid 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! 😀

@oh-vito 5 месяцев назад

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.

@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 :)

@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.

@_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?

@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

@devdariill Год назад

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

@jesusmonge.l Год назад

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

@sefhiroth Год назад

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

@DavidMkp Год назад

Hola como logras la terminal esa de VS Code?

@FaztCode Год назад

Hola David, el tutorial de esa terminal se puede encontrar aqui: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d9y0l7yY404.html

@Niojar Год назад

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

@michae301 Год назад

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

@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

@Deus-lo-Vuilt Год назад

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

@cristopheraguirre997 Год назад

Muchas gracias fazt tqm

@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.