Bluuweb
Bluuweb
  • 1 081
  • 26 075 404
Firebase Auth + React + TS + Vite: Google sign in
En este tutorial veremos como crear una aplicación de Vite.js con React y Typescript implementando Firebase Auth, aprenderás a crear rutas protegidas utilizando react router dom v6. Finalmente tendrás una web con autenticación mediante Google sign in.
Cursos en UDEMY:
🧨 HTML + CSS + Bootstrap 5 + JS: bit.ly/3iyMBh3
🧨 React + Next 14 + Firebase: bit.ly/3JCSsht
🧨 Vue 3 + Firebase: bit.ly/3IwyHGJ
🧨 HTML y CSS (gratis): bit.ly/3PM4x5U
⭐ Código github: github.com/bluuweb/Firebase-Auth-React-TS-Vite-Google-sign-in
⭐ Website: bluuweb.dev
⭐ Discord: bit.ly/3lpz7J2
#reactjs #firebase #vitejs
Redes Sociales:
💩 www.twitch.tv/bluuweb
💩 bluuweb_youtube
💩 bluuweb
💩 bluuweb
💩 Regala un Cafecito para bluuweb: www.paypal.me/bluuweb
Mi Setup:
⭐️ Teclado Mecánico: amzn.to/3Ns6fdK
⭐️ Audífonos: amzn.to/3pwrzqt
⭐️ Micrófono: amzn.to/3JH4tV7
⭐️ Monitor: amzn.to/3NTt8Iu
⭐️ Procesador: amzn.to/3raD4EC
⭐️ Tarjeta de Video: amzn.to/437t78b
zhlédnutí: 1 701

Video

Next Auth V5 - OAuth (Google y Github)
zhlédnutí 1KPřed měsícem
En este tutorial veremos como implementar Next Auth en su versión 5 en un proyecto de Next.js v.14. Aplicaremos OAuth para autenticar usuarios con Google y Github. Cursos en UDEMY: 🧨 HTML CSS Bootstrap 5 JS: bit.ly/3iyMBh3 🧨 React Next 14 Firebase: bit.ly/3JCSsht 🧨 Vue 3 Firebase: bit.ly/3IwyHGJ 🧨 HTML y CSS (gratis): bit.ly/3PM4x5U ⭐ Video anterior: czcams.com/video/vkV4wApku5s/video.html ⭐ Có...
Next Auth V5 - Credentials (Email y Password), JWT, Roles y verificación de email
zhlédnutí 5KPřed měsícem
En este tutorial veremos como implementar Next Auth en su versión 5 en un proyecto de Next.js v.14. Aplicaremos Credentials para autenticar usuarios con email y contraseña, almacenarlos en bases de datos Postgres y gestionando roles y rutas protegidas. Utilizaremos Prisma ORM y shadcn para los componentes de React con TailwindCSS. Cursos en UDEMY: 🧨 HTML CSS Bootstrap 5 JS: bit.ly/3iyMBh3 🧨 Rea...
Curso de Node JS [2024] + JWT: Paginación - POSTGRES
zhlédnutí 1,5KPřed 2 měsíci
Curso de Node JS [2024] JWT: Paginación - POSTGRES
Curso de Node JS [2024] + JWT: Roles de usuarios - POSTGRES
zhlédnutí 2,2KPřed 2 měsíci
Curso de Node JS [2024] JWT: Roles de usuarios - POSTGRES
Curso de Node JS [2024] + Express.js + JWT + POSTGRES (API REST - Parte 01)
zhlédnutí 6KPřed 2 měsíci
Curso de Node JS [2024] Express.js JWT POSTGRES (API REST - Parte 01)
Directo: Make your burger (se intentó 😅) Next.js + TailwindCSS
zhlédnutí 7KPřed 8 měsíci
Directo: Make your burger (se intentó 😅) Next.js TailwindCSS
Taller: Nuxt 3 + Nuxt UI + Firebase: Login y Register
zhlédnutí 6KPřed 9 měsíci
Taller: Nuxt 3 Nuxt UI Firebase: Login y Register
HTMX: ¿Es el futuro de HTML?
zhlédnutí 14KPřed 10 měsíci
HTMX: ¿Es el futuro de HTML?
Next.js 13 + NextAuth: Login, Register & Rutas protegidas con JWT | Tutorial 2023
zhlédnutí 24KPřed rokem
Next.js 13 NextAuth: Login, Register & Rutas protegidas con JWT | Tutorial 2023
Curso completo de NEST JS: Documentar tu API REST - Swagger y Nest.js
zhlédnutí 7KPřed rokem
Curso completo de NEST JS: Documentar tu API REST - Swagger y Nest.js
Curso completo de NEST JS: Deploy en Render con Postgres
zhlédnutí 6KPřed rokem
Curso completo de NEST JS: Deploy en Render con Postgres
Curso completo de NEST JS: Autorización (Roles) - Segunda parte
zhlédnutí 5KPřed rokem
Curso completo de NEST JS: Autorización (Roles) - Segunda parte
Curso completo de NEST JS: Autorización (Roles) - Primera parte
zhlédnutí 8KPřed rokem
Curso completo de NEST JS: Autorización (Roles) - Primera parte
Curso completo de NEST JS: Autenticación (Login y Register)
zhlédnutí 20KPřed rokem
Curso completo de NEST JS: Autenticación (Login y Register)
Curso completo de NEST JS: API REST con MySQL, TypeORM, TypeScript
zhlédnutí 32KPřed rokem
Curso completo de NEST JS: API REST con MySQL, TypeORM, TypeScript
¡Descubre las Extensiones y Trucos de VSCode para dominar React y Tailwind CSS!
zhlédnutí 7KPřed rokem
¡Descubre las Extensiones y Trucos de VSCode para dominar React y Tailwind CSS!
Buscador de usuarios en Github: Next 13, Tailwind, Typescript, Dark Mode | Tutorial 2023
zhlédnutí 9KPřed rokem
Buscador de usuarios en Github: Next 13, Tailwind, Typescript, Dark Mode | Tutorial 2023
Curso Javascript - #07 Módulos, import & export, export default
zhlédnutí 5KPřed rokem
Curso Javascript - #07 Módulos, import & export, export default
Curso Javascript - #06 Promesas, then catch, async await, fetch API y JSON
zhlédnutí 10KPřed rokem
Curso Javascript - #06 Promesas, then catch, async await, fetch API y JSON
Curso Javascript - #05 Interpolación, operador ternario y práctica con destructuring
zhlédnutí 3,8KPřed rokem
Curso Javascript - #05 Interpolación, operador ternario y práctica con destructuring
Curso Javascript - #04 Objetos literales, Desctructuring y Optional chaining operator
zhlédnutí 4,2KPřed rokem
Curso Javascript - #04 Objetos literales, Desctructuring y Optional chaining operator
Curso Javascript - #03 const vs let vs var
zhlédnutí 4KPřed rokem
Curso Javascript - #03 const vs let vs var
Curso Javascript - #02 Vite.js: Desarrollo moderno para proyecto JS
zhlédnutí 8KPřed rokem
Curso Javascript - #02 Vite.js: Desarrollo moderno para proyecto JS
Curso Javascript para React/Vue/Svelte - #01 Introducción
zhlédnutí 8KPřed rokem
Curso Javascript para React/Vue/Svelte - #01 Introducción
Curso Material UI #17: Skeleton
zhlédnutí 4,5KPřed rokem
Curso Material UI #17: Skeleton
¡Crea tu propia aplicación 🌩 Meteorológica ☂ en minutos con React y Material UI!
zhlédnutí 10KPřed rokem
¡Crea tu propia aplicación 🌩 Meteorológica ☂ en minutos con React y Material UI!
Curso Material UI #15: Text Field y Validación de Formulario
zhlédnutí 7KPřed rokem
Curso Material UI #15: Text Field y Validación de Formulario
Crear alertas personalizadas con MUI (Alert, Snackbars y Notistack)
zhlédnutí 6KPřed rokem
Crear alertas personalizadas con MUI (Alert, Snackbars y Notistack)
AppBar + React Router v.6 en Material UI (Navbar responsive)
zhlédnutí 8KPřed rokem
AppBar React Router v.6 en Material UI (Navbar responsive)

Komentáře

  • @kevinalexisfuneszambrano2961

    Grande Crack 🙌

  • @nelsonecheverry1716

    Eeres el mejor mucho de lo que he aprendido es gracias a bluwebbb infinitas bendiciones

  • @tanometro
    @tanometro Před 2 dny

    Buen dia, excelente video. Solo no entiendo algo, la configuración de la bdd es obligatoria? Es decir, no puedo usar Authjs solo para autenticación?

  • @ignaciomartinjankauskas3370

    Hola, le hago una pregunta, si yo ya tengo una logica para autorizar al usuario en un back end en next.js con prisma, puedo utiilizar ese servicio? o si o si tengo que hacerle desde next?

  • @lucasfernandez8314
    @lucasfernandez8314 Před 3 dny

    Muy buena explicación, pausada y paso por paso super recomendado!

  • @diego.samamess-hl6te

    me vine del tutorial del auth, jaja

  • @irving7653
    @irving7653 Před 4 dny

    ¿Qué teclado usas?, me gusta mucho como suena.

  • @Mrhardwarech
    @Mrhardwarech Před 4 dny

    señor Bluuweb , sabra usted por que me aparece un error, dice error Call to a member function prepare() on null in ( en mi archivo php) saludos gran trabajo

  • @eliasortega8681
    @eliasortega8681 Před 4 dny

    hola buen video, quería preguntarte porq los cursos de CZcams (otros) no explican los conceptos y a medidas q van progresando dejan ejercicios que relacionan HTML, css y js, será q cuesta mucho hacerlos o porq quieren q compren sus cursos

  • @MHLady
    @MHLady Před 4 dny

    hermoso VIDEO CORTO

  • @edummorenolp
    @edummorenolp Před 4 dny

    Espero con ansias en de ts en backend

  • @pinkierar_real
    @pinkierar_real Před 4 dny

    Так как же всё-таки кастомизировать библиотеку notistack?

  • @kevindouglascajbonasturias901

    Que gran contenido el que nos estas compartiendo!! perdona tengo una consulta, estaba generando un proyecto pequeño con esta misma tecnología, pero tengo el problema que cada vez que reinicio la aplicación en mi tabla siempre hay un campo que no mantiene el valor de su registro. Por ejemplo: tengo una tabla con nombre y edad, en la tabla nombre todos los registros aparecen como Empty pero la edad mantiene su valor. Esto me pasa siempre que el aplicativo se reinicia. Hay alguna razón por la que mi aplicativo se comporte de esta forma?

  • @patriciaramos258
    @patriciaramos258 Před 6 dny

    🤣🤣🤣

  • @soran2290
    @soran2290 Před 6 dny

    Lastima que no hay trabajo de godot

    • @bluuweb
      @bluuweb Před 6 dny

      Cuando ya seamos más expertos nos pasamos a otro motor 😊 saludos

  • @pierreblas1517
    @pierreblas1517 Před 7 dny

    no usen aun Next Auth V5 en produccion, falla en casi todo, esperen nuevos cambios

  • @germanpinto883
    @germanpinto883 Před 7 dny

    Me gustaría una clase React/Typescript

    • @bluuweb
      @bluuweb Před 6 dny

      Súper! En los directos de creando un chat trabajamos con react y TS czcams.com/play/PLPl81lqbj-4L0do5W5HbjvW1RQ4zTVfnd.html&si=bDdyVBR5U9L8gNb5 por si te quieres adelantar. Saludos

  • @meollo7001
    @meollo7001 Před 7 dny

    men buenas noche una pregunta esa imagen que tienes en el curso de flexbox como se llama y donde la puedo encontrar? muchas gracias

  • @MRPinas2100
    @MRPinas2100 Před 7 dny

    Gracias por el contenido profe, un abrazo.

  • @valentinatabaresbonilla38

    gracias! el mejor explicando!

  • @robertocarriero5728

    Hola sos un genio total explicando. Realmente haces parecer que todo sea fácil. Muchisimas gracias. Desde Argentina te mando un fuerte y fraternal abrazo

  • @mauricioferreyra4378

    excelente video!!! muchas gracias

  • @mariogonsalvez9492
    @mariogonsalvez9492 Před 8 dny

    Compa, llevo dias en esta lucha, cada vez que intento hacer el comando npx auth secret, me sale este error: node:internal/modules/cjs/loader:1140 const err = new Error(message); ^ Error: Cannot find module 'zod' Lo raro es que ya esta instalado el zod se supone pero sigue diciendo que no esta instalado, sabes que sera? Iluminame compa porfavor!! PD: Se que se puede generar manual, pero no quiero quedar con la duda de como resolver tal problema

  • @GeorgelysMarcano
    @GeorgelysMarcano Před 8 dny

    Encantada con este curso de los fundamentos, muy sencillo y fácil de seguir y hacer, de verdad, está excelente! En mi caso, apliqué tailwindCSS para practicar. Muchas gracias! 👏

  • @lan7722
    @lan7722 Před 9 dny

    Nunca había comentado antes en un video pero, me he encontrado muchos videos parecidos y creo que eres el primero que explica algo tan a la perfección y entendible para cualquiera, muchas gracias por tu gran trabajo compartiendo tu conocimiento, he estado indagando mucho e incluso seguí tu curso al pie de la letra pero con mi propio código y se puede integrar a la perfección tu paso a paso, nuevamente, muchas gracias y mucho exito! pd: no olviden descomentar la parte de auth.ts, verificar sus variables en .env y sobre todo cuando quieran registrar un correo a través de resend u otro servicio parecido en entorno de desarrollo recuerden usar el mismo correo con el que se registraron como prueba para la verificacion de cuenta.

  • @elameu
    @elameu Před 9 dny

    Excelente contenido para q los mas chicos inicien en este mundo! Muchas gracias por compartirlo!!!

  • @joseecheverri3867
    @joseecheverri3867 Před 10 dny

    Hermano te tengo que decir que no suelo comentar en videos de youtube. Estaba perdiento la cabeza con la configuración de auth.js y tu video me ha salvado la vida, enormes gratitudes hacía ti. Que Dios te bendiga. me suscribo.

  • @VenezuelaLibre10
    @VenezuelaLibre10 Před 10 dny

    Gracias por volver estimado Bluuweb. Gracias a ti aprobé mi proyecto de grado con tus clases y tu blog. Te agradezco por tu disposición de ayudar. Dios te retribuya en vida y salud. Abrazo hermano!!

  • @theenriquecarbo
    @theenriquecarbo Před 10 dny

    Si no me equivoco también se puede utilizar para proyectos con realidad aumentada

  • @theenriquecarbo
    @theenriquecarbo Před 10 dny

    Muy bueno te felicito

  • @AnaWilliams-wg9tr
    @AnaWilliams-wg9tr Před 11 dny

    El mejor profe :)

  • @jesusquintanaesquiliche9808

    He estado viendo tu clase en diferido, por que al finL el otro día no me encontraba bien y me acosté. Muy buena introducción.

  • @TheWaalteers
    @TheWaalteers Před 11 dny

    muy bueno....

    • @bluuweb
      @bluuweb Před 11 dny

      Gracias por comentar ❤️

  • @prof.alejandrocarrillo5783

    Creo que debiste apoyar más el término "función" ya que, tal como lo indicaste, es más purista y evita confusiones.

  • @registro_pedagogico
    @registro_pedagogico Před 12 dny

    Gracias Bluuweb

    • @bluuweb
      @bluuweb Před 11 dny

      De nada! pronto más videos! 🥳

  • @avocadotutoriales1557

    Voy a tomar esta serie de tutoriales para mi proyecto de la universidad

  • @nestorpena1468
    @nestorpena1468 Před 13 dny

    Profe decia del updateLastMessage sobre el timeStamp le pusiste new date, creo que debería ser la misma hora del mensaje q te envía el amigo (mismo timestamp) xq puede ser su ultimo mensaje de conversacion con el amigo talvez de ayer q te respondio, entonces al costado Izq ya puedes pintar la imagen, ultimomsj y el time, con ese formato de tiempo del convertidor de hora, Asi sin abrir el chat ya puedes ver un pequeño resumen del chat general. Me parece que esta bueno asi, tipo wapp. Muy bien explicado y entretenida la clase.!! saludos

  • @aldomiralles208
    @aldomiralles208 Před 14 dny

    Lo del scroll lo podias haber hecho igual con shadcn super simple, muy buenos tus videos

    • @bluuweb
      @bluuweb Před 13 dny

      No lo he visto, como es??

  • @kenobi888
    @kenobi888 Před 14 dny

    En la última versión de tailwind ya no es necesario añadir nada al archivo de configuración para que aparezca el borde. Reconoce la clase directamente

  • @joseleonrs9817
    @joseleonrs9817 Před 15 dny

    Soy fiel fanático de tus tutoriales 😊 muy didáctico y pedagógico tu forma de enseñar 🎉🎉🎉 felicitaciones

    • @bluuweb
      @bluuweb Před 13 dny

      Gracias por el apoyo 🎉

  • @enriquegustavoacevedo523

    Te felicito ...muy bien explicado desde una pagina web ya realizada con navegador, titulo,..footer, etc. Asi de práctico deberian ser todos los videos, relacionando en este caso 2 sentencias teoricas con la practica (como se veria en la realidad la pagina web aplicando las sentencias). Algo que no saben hacer otros que saben mucho pero se van por las ramas y no se les entiende nada. En Programacion debe ser asi, si el objetivo es enseñar y aprender bien. No desarrollar muchos conceptos al mismo tiempo, porque los que recien arrancamos como yo ...nos confundimos rapido. Dios te bendiga y sigue adelante!

  • @prodrigu75
    @prodrigu75 Před 17 dny

    Hola Bluuweb y a quienes ven este comentario. Referente al update y a modificar el dto asociado al update, siguiendo el video ahora no es necesario esa modificación (a mi me resultó sin hacer nada). Lo otro, es un aporte para crear un endpoint que devuelva todos los "cats" incluyendo los eliminados. Aquí está la función del servicio: async findAllIncludingDeleted() { return await this.catsRepository .createQueryBuilder('cats') .withDeleted() .getMany(); } Y el endpoint asociado: @Get(':deleted') findAllIncludingDeleted(@Param('deleted') deleted: string) { if (deleted === 'd') return this.catsService.findAllIncludingDeleted(); }

  • @vitaminservice_
    @vitaminservice_ Před 17 dny

    Te acabo de descubrir y eres un profesor magnífico, un abrazo desde España

  • @prodrigu75
    @prodrigu75 Před 18 dny

    bluuweb: Estamos abriendo una sala por cada amigo (o contacto) como lo tengo yo. Que pasa si quiero agregar a otro amigo o contacto a la misma sala)

    • @bluuweb
      @bluuweb Před 15 dny

      Hola, para eso abría que crear otro botón para crear salas y un input para buscar a los amigos e ir agregándolos, si nos da el tiempo lo implementamos pero la idea es terminar el proyecto esta semana. Muchas gracias por el apoyo!

  • @rush4824
    @rush4824 Před 18 dny

    Excelente video. Muchas gracias. Hay una forma de resolver el conflicto sin abrir el IDE , osea desde el bash de Git????

  • @danielspinella2177
    @danielspinella2177 Před 18 dny

    Muy bueno todo pero estaria bueno adjuntar un grafico de como seguir el proyecto y las relaciones que tiene

  • @AnaQuiroz-oi8jo
    @AnaQuiroz-oi8jo Před 19 dny

    El mejor video, muy claro, muchas gracias! :)

  • @DataBaseApp-t9v
    @DataBaseApp-t9v Před 19 dny

    Saludos amigo! Excelente video, muy bien explicado! Una consulta, en la ruta del video: database/Cloudfirestore ¿Como hago para trabajar en el modo bloqueado? Me refiero hacer el mismo trabajo pero en modo bloqueado... Puedes hacer un tutorial al repuesto?

  • @Castañeda-2005
    @Castañeda-2005 Před 19 dny

    En el minuto 3:53 deben de poner en el content lo siguiente: "./src/**/*.{js,jsx}" para que pueda analizar de manera específica que clases son las que se utilizarán tanto en js como en jsx.