Auth y Roles de Usuario con Firebase y React

[@Asf7707]

Excelente video. Muchas gracias por compartirlo!

[@lasfito]

Gracias, Ana Espero que te haya servido ✌🏼

[@joseysusamigos]

tus tutoriales son demasiado buenos, hablas concisamente sin titubear

[@lasfito]

Gracias, José Me alegra que te agraden Un saludo 🤙🏼

[@CodeWithDesign]

Tu contenido es de mucha utilidad y calidad.. te sigo siempre.. seguí asi. saludos desde córdoba Argentina.

[@lasfito]

Gracias, Ezequiel. Se aprecia el apoyo. Saludos hasta la tierra del asado ✌🏼

[@andresfelipeariasmarin8881]

Hola, muchas gracias por este video, estuve buscando varios, donde se complicaban o agregaban mas items que no necesitaba, pero en tu video, tuve justo lo necesario, muchas gracias de nuevo.

[@lasfito]

Gracias, Andrés 🤙🏼

[@reinaldocontreras3691]

Excelente video, tambien se puede trabajar con el catch de la promesa createUserWithEmailAndPassword para que notifique si el usuario ya existe al momento de registrarse, tambien se podria usar sendPasswordResetEmail para darle funcionalidad al Olvido su contrasena y se puede trabajar con react-hook-form para tratar con los imputs y sus validaciones..... gracias amigo

[@lasfito]

Hola, Reinaldo Lo que mencionas es correcto, gracias por el aporte 🤙🏼

[@armandoalamilla]

Que buen video! muchas gracias por subir esto, sigue así!

[@lasfito]

Gracias, Armando ✌🏼

[@robertobenedit]

Que belleza de explicacion!

[@lasfito]

Gracias, Roberto. Espero que te haya sido de ayuda ✌🏼

[@balbanesi]

que bien que explicas!!! esperando nuevos videos!!

[@lasfito]

Gracias, Bernarda Un abrazo ✌️

[@marianoschmidt7533]

Gracias me ayudaste bastante en lo que trato de hacer!

[@lasfito]

Por nada, Mariano 🤙🏼

[@danielderma]

muy buenos videos de firebase!!

[@lasfito]

Gracias, Daniel 🤙🏼

[@luichix.]

Muy buen video.... muchas gracias...

[@lasfito]

Por nada, Luis. Espero que te sirva ✌️

[@marcosMartinez-wm7bd]

Buen video!!!

[@lasfito]

Gracias, Juan. Saludos ✌🏼

[@alexisbustamante7950]

Buenisimo

[@lasfito]

Gracias, Alexis

[@TineoGilbert]

Hermano! Podrías hacer un vídeo breve de como hacer que un usuario tenga características admin , y que dicho usuario tenga acceso a todos los usuarios de la aplicación y que este pueda ver toda la información, eliminar , cambiar , etc. Creo que con el SDK Admin de Firebase se puede hacer, pero realmente no hay vídeos que expliquen de manera detallada. Ojalá y si lo puedas hacer o tenerlo en cuenta.

[@lasfito]

Gracias, Gilbert Lo tendré en cuenta. Estoy planeando precisamente un mega tutorial de Firebase con alguna aplicación práctica como la que describes Saludos 🤙🏼

[@Javierdeveloper1001]

@@lasfito genial lasfito , me encantaria

[@seulowu4662]

Gracias!

[@lasfito]

Por nada, espero que te haya servido ✌🏼

[@AnibalGutierrezYoSoy]

Sería muy interesante plantear reglas de seguridad para este código Las. Se me hace que cualquier usuario podría hakearnos.

[@lasfito]

Es correcto, debiéramos tener siempre reglas de seguridad aprovisionadas para cada uno de nuestros proyectos de Firebase ✌🏼

[@The6cris6]

me gusto todo hasta la parte de los roles, entiendo que guardar los roles en un documento es la manera mas facil de implementarlo pero seria bueno hacerlo de la otra manera con los custom claims y con el AdminSDK de firebase en un backend, tener este admin y usar su API tiene sus beneficions como cambiar el email, editar el nombre del usuario, tener la lista de usuarios, last login, etc.

[@lasfito]

Hola, Cris Efectivamente, dependiendo el caso, suele ser mejor no gestionar los roles a través de documentos. Ya en otro video reviso las reglas de Firestore, pero no me adentro en custom claims. Será buena idea para un video futuro ✌️

[@AnibalGutierrezYoSoy]

yo saque el select y le Di un valor definido que podría guardarse en .env y al los 2 o 3 administradores cambió el valor 'a mano' pero igual hay que dales reglas para que sólo ellos escriban. eso aún no se bien como hacerlo. aunque si vi el vídeo de las reglas.

[@aaronvigil8480]

Hola, buen día. Que buen canal. Quería pedirte si podes hacer un e-commerce con vanilla js. Sos muy inteligente, saludos.

[@lasfito]

Gracias, Aaron. Lo agrego a la lista y trabajo más adelante 🐨

[@j0s3805]

He visto que Firebase tiene la opcion de verificar Email, crees que harás algún video sobre ello? Gracias por los videos, son muy claros!!

[@lasfito]

¿A qué te refieres con verificar email?

[@j0s3805]

@@lasfito Algo así de que al momento de crear tu cuenta te mande el correo para verificar la dirección de correo electrónico que registró y no te deje logearte hasta que lo hagas

[@lasfito]

@@j0s3805 Claro, lo apunto en lista de videos y lo trabajo pronto ✌

[@adrianismaelzamoravaladez2098]

Apoyo este vídeo, yo también necesito conocer como se realizar

[@ArminDžafo]

I did the whole tutorial but for me the role is undefined in the userData object. did something change in the meantime about how data is retrieved from firestore?

[@lasfito]

what query are you running?

[@gabrielagalvis4775]

Hola, buen tutorial, muchas gracias por el vídeo, hay poca información de esto y necesito ayuda, como puedo hacer eso mismo de los roles de usuario sin usar react, ni ningún framework? No hay ni un solo tutorial que lo explique:C

[@lasfito]

Para ello puedes usar los custom claims que provee firebase. Son una propiedad adicional que se añade a los usuarios y que puedes acceder independiente de algún framework.

[@gabrielagalvis4775]

@@lasfito ¡Muchisimas gracias! No conocía esa función de firebase

[@lasfito]

✌🏼

[@tufortunavirtual]

Gracias por compartir tus conocimientos compa, podrías hacer un tuto donde se pueda validar diferentes escenarios de la autentificación? creo que sería de gran ayuda

[@lasfito]

Hola, Jesús A qué te refieres con validar diferentes escenarios?

[@tufortunavirtual]

@@lasfito Por ejemplo, cuando uno se registra mediante google, como se podría hacer para también acceder mediante ese mismo correo y una contraseña? o los distintos errores que se da al momento de introducir un correo y una contraseña al registrarse o loguearse

[@lasfito]

Ah, vale. Lo apunto en la lista de videos y pronto podrás votar por él en la pestaña de comunidad en mi canal ✌🏼

[@AnibalGutierrezYoSoy]

ok

[@ronalkspdev]

Sacame de una duda, como puedo crear un sistema multicuentas. Es decir necesito hacer una cuenta admin y esta cuenta dentro de ella pueda crear usuarios vendedores y que estos puedan hacer login con usuario y contraseña pero que toda la información de este vendedor solo pueda ser leída por el usuario administrador que la creo

[@lasfito]

Puedes hacerlo con la implementación de este video y con reglas de seguridad. kzbin.info/www/bejne/hoLGZZSMqrilapo

[@DANIELSUAREZDEV]

Excelente info gracias, una pregunta si quiero que ciertos usuarios puedan ver mi contenido como seria? con firebase

[@lasfito]

Hola, Daniel Puedes hacerlo desde el front de tu app o con reglas de seguridad de Firestore. Probablemente el jueves suba un video de reglas, ahí podrás orientarte ✌️

[@DANIELSUAREZDEV]

@@lasfito seria gran ayuda ya que estoy haciendo una app web y estoy bloqueado por eso

[@lasfito]

Vale, pues si no quieres perdértelo suscríbete y activa las notificaciones para enterarte cuando salga ✌🏼

[@lesteralonzo6212]

💯💯💯

[@lasfito]

🤩 🤩 🤩

[@ocultismoar]

Excelente! Muchas gracias por el video. Pregunta cuál es el plugin que usas que te sugiere condicionales, etc? Otra cosa que estaria bueno es que, siguiendo este mismo ejemplo, expliques como setear las rules de firebase para los diferentes roles de usuarios. Sin mas, muchas gracias por el tutorial.

[@lasfito]

Gracias, Amti. Muchas de las sugerencias que aparecen vienen de VS Code (las de Firebase y sus funciones, por ejemplo). Las sugerencias de código que ves en gris viene de GitHub Copilot. Sobre el video de reglas de firebase lo apunto en lista de espera y lo trabajo más adelante. Saludos ✌🏼

[@joelbarreraarotoma1632]

gracias capo, porfa un tuto sobre como subir mi proyecto a git hub, así mismo que los cambios que realice en mi proyecto se actualice el de git hub, así mismo vincular ese proyecto a algún servicio para alojar mi proyecto web y cuando actualice mi proyecto en mi escritorio de desarrollo se modifique tanto en el git hub y servicio web alojado, de esos tutos casi no hay info, seria vacan que saques un tuto para el canal, gracias por todo el contenido, saludos desde Perú.

[@lasfito]

Gracias, Joel. Este video lo hago entre semana y lo saco para el jueves (si el trabajo me da tiempo jaja) Si no, para el domingo ✌🏼

[@esquedm]

@@lasfito Yo también estaría interesado, como para mandar a Producción un proyecto :) Te lo agradecería muchísimo. Saludos, un sub nuevo!

[@carlcardenas135]

Hola que tal, una consulta como puedo hacer para que el usuario se registre con Google , y en la página de inicio de sesión solo pueda iniciar sesión si está registrado , estoy usando realtime database .

[@lasfito]

Es complicado porque con Google se crea una cuenta en caso de no tenerla. Lo que podrías hacer es tener un respaldo de las cuentas en firestore y revisar al momento del login

[@carlcardenas135]

@@lasfito Gracias por responder , si tienes razón esque sentí que no estaría tan complicado como cuando se hace registro con correo y contraseña . Lo que hice y note que hacen otras aplicaciones es que cuando ponen registro con Google lo que pasa es que al momento de registrarse los inicia sesión directamente y los manda a la página principal

[@AgustinNazer]

Es segura la auth con firebase del lado del cliente? o se deberia hacer aparte algnua implementacio en el backend como encriptaciones, etc.. ?

[@lasfito]

Es seguro en medida de que implementes correctamente las reglas de seguridad que ofrece firebase 🤙🏼

[@reynaldomartinez9630]

Saludos, muy buen video. Quisiera saber si es posible que compartas la extensión que usas de autocomplete porfa

[@lasfito]

Es GitHub copilot: copilot.github.com/ ✌🏼

[@diegoquintana423]

hola , tengo una duda estoy haciendo un panel para crear cuentas de usuarios con rol dentro de una cuenta con rol , pero cuando quiero crear una cuenta me inicia sesion de nuevo y me manda a la ventana que cree para los que no tienen acceso

[@lasfito]

Ocurre porque la cuenta la estás creando desde el front y automaticamente te inicia sesión. Lo que debes hacer es crear la cuenta desde "el back". Para ello puedes usar cloud functions de firebase y el admin sdk.

[@diegoquintana423]

@@lasfito gracias bro, consulta pero crearlo en el backend tendria que crear un proyecto backend con node o algun otro cierto ?

[@lasfito]

Puedes hacer un proyecto con node o puedes añadir cloud functions a tu proyecto front (usa firebase init para añadirlas).

[@ryancabral4489]

Muito obrigado!!!

[@lasfito]

😌😌😌

[@andresalejandrolopezponton8314]

Hola, gracias por el video. Quiero preguntar que si, mi aplicacion crea el usuario y contraseña en el login no como register, sino que reenderizo un componente por el rol de admin, este componente es un panel con el que agrego usuarios(informacion personal + rol), el problema que tengo es que cuando agrego uno inicia la sesion automaticamente y no quiero que eso pase, hay alguna manera de prevenir el sign in a penas cree el user? Por favor

[@lasfito]

Sí, para ese escenario lo que debes hacer es crear la cuenta no desde tu app, sino a través de una cloud function de Firebase. Desde tu app la llamas (http) y entonces el usuario es creado en "la nube" y así no se inicia sesión en tu app

[@andresalejandrolopezponton8314]

@@lasfito tienes algún vídeo o documentación (que no sea la de Firebase porque a veces es un poco enredada)

[@urielantoniopedrazavazquez7083]

Yo estoy trabando en windows y cuando quiero ajecutar el comando npm install en el Git Bash, no me lo reconoce me manda errores, sabras a qué debe esto?, me salen los siguientes mensajes: npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an old version of npm, npm WARN old lockfile so supplemental metadata must be fetched from the registry. npm WARN old lockfile npm WARN old lockfile This is a one-time fix-up, please be patient... npm WARN old lockfile

[@lasfito]

Todos esos son mensajes de advertencia y debería dejarte instalar las dependencias. En caso de no dejarte, elimina el archivo de package-lock y prueba de nuevo 🤙🏼

[@nicoschonfeld8572]

Holaa las!! Soy yo de nuevo 😅 tengo una consulta para hacerte y no se por donde más contactarte... Mi pregunta es, si yo registro usuarios a la base de datos de firebase con el provider de Google, una vez que yo guardo esos datos en la colección. Cómo hago un condicional que me diga cada vez que alguien ingrese con Google, si el usuario ya está creado que entre a la app, si no que qué agregue sus datos a la colección?? (El uid, displayName, etc...) Sin que se repita el usuario.. Estoy practicando firebase y me tope con este problema y no me estaría saliendo la solución. El resumen de lo que hice es, yo le pasó el usuarioDeFirebase que definimos en App al componente Home por ejemplo y de ahí, saco el name, uid, displayName, email por ejemplo y los agrego a una colección llamada usuarios, ahora... Cada vez que alguien accede con Google, el usuario con sus datos se vuelven a agregar a la colección y tengo como 7 usuarios con los mismos datos. Me serviría mucho si puedes ayudarme para seguir aprendiendo, muchas gracias y perdón por la consulta tan extensa :)

[@lasfito]

Hola, una consulta así te costará 5 compartir y 7 me gusta jajaja. El problema tuyo surge porque al crear los documentos en la colección no estás definiendo el ID del documento. Lo que debieras hacer es utilizar el uid del usuario como ID del documento, de esta manera, cuando se intente crear una nueva entrada para un usuario existente, lo que sucederá es que se sobre escribirá el documento anterior. Utiliza "doc" para crear la referencia y ahí le pasas el uid. Con esa referencia ya utilizas setDoc para guardar los datos ✌🏼

[@nicoschonfeld8572]

@@lasfito ahh era así de fácil, solucioné el problema, muchísimas gracias!! Intentaré pagarte lo antes posible 😅✌🏻

[@lasfito]

Me alegra. Cualquier otro problema puedes comentarlo y veré cómo ayudar ✌🏼

[@chir18935]

que plugin utilizas para que te aparesca las obciones antes de escribirlas? :O

[@lasfito]

Magia :v Jaja es GitHub copilot ✌🏼

[@chir18935]

@@lasfito averrrrr....

[@QuizRadio]

Buenas tardes una pregunta que version de node js debo de tener instalado para que el proyecto este compatible y no muestre error en las librerias

[@lasfito]

No estoy seguro para este en peculiar, pero 16+ debiera bastar ✌🏼

[@QuizRadio]

@@lasfito Ok y como puedo agregarle los web services

[@lasfito]

@@QuizRadio cuáles?

[@QuizRadio]

@@lasfito como el soap o rest

[@lasfito]

@@QuizRadio ¿Puedes darme un ejemplo? ¿Estás hablando de este video de autenticación y roles, cierto?

[@scripter9607]

Y en firebase 9, muy bien muchos tutoriales con la versión 8 ya no sirven

[@lasfito]

Hola, efectivamente es el SDK 9. Espero que te haya sido útil ✌️

[@itengineeremmanuel2284]

Accidentalmente recargue la pagina cuando estaba en una sesión, y me mando un error "getProvider" y crasheo la pagina

[@lasfito]

Pues no recargues la página :v jaja es broma. Resulta extraño que te marque error porque una vez iniciada la sesión los datos se guardan en local y no importa que recargues, la sesión es persistente 🤔

[@itengineeremmanuel2284]

@@lasfito Ok xD

[@andreschika]

Este tutorial no contempla reglas de firebase? para este escenario no sería seguro pegarle directamente a firebase? que usuarios tienen acceso a las entidades de roles y usuarios

[@lasfito]

Es correcto, esta implementación no utiliza las reglas de Firebase. Aún así, incluso con reglas de Firebase, es necesaria cierta lógica en el cliente para lograr la redirección al componente de Admin o usuario según el rol. Si quieres indagar un poco más sobre las reglas de Firebase puedes ver este video: kzbin.info/www/bejne/hoLGZZSMqrilapo Sudos ✌🏼

[@Ddewzxdsszkbooj100]

Bro hay alguna posibilidad de que hagas este tutorial pero en html5, js y css3 sin react me interesa muchisimo lo que haces pero react no me sirve para lo que estoy haciendo

[@lasfito]

Francamente lo veo complicado Sería más probable hacerlo con otro framework antes que hacerlo con “js” por el tema de la demanda. Lo que puedes hacer es utilizar react solo para la página de login, es lo que tiene react por ser una biblioteca, que puedes usarlo solo para ciertas secciones de tu sitio web 🤙🏼

[@Froylander]

Hola, gracias por el video, una pregunta como podría registrar a mis usuarios desde mi panel de control en el frontend, lo intenté pero me sale un error de firebase que esa acción es sólo para admin... Pero no se cómo evitar ese error, Gracias !!!

[@lasfito]

Exactamente, ¿cómo es que estás intentando registrar a los usuarios desde el front?

[@Froylander]

@@lasfito gracia profe, ya lo logré, estoy usando la función de registerwithemail... Lo logré poniendo las variables de email y pass por separado y así ya no sale el error y hace el registro, pero automáticamente inicia sesión, eso lo arregle guardando mis datos de auth.user en una constante, luego cuando hace el registro, en then, pongo la función de updateUser con mis datos y así digamos reinicio sesión como admin pero, ahora mi problema es que no puedo borrar, creo que la versión 9 ya no permite eliminar un usuario desde el front, creo que debería hacer una función, según entiendo creo que igual para hacer registros sería mejor con una función, pero estoy viendo como se hacen, saludos profesor, gracias por la atención

[@lasfito]

Ya veo. Lo mas conveniente sería utilizar cloud functions de Firebase con el admin sdk. Planeo hacer un vídeo pronto, pero igual hay mucho contenido en KZbin sobre eso 🤙🏼

[@Froylander]

@@lasfito gracias, si exacto, dije función, pero si me refería a una cloud function, estaré pendiente de sus próximos tutoriales

[@justavzz7163]

buen tutorial, una consulta estimado, cuando inicio sesion, al actualizar la pagina aparece de nuevo el login durante 1 segundo o segundo y medio, y luego vuelve a mi estado de sesion normal , alguna forma de solucionar eso?

[@lasfito]

Gracias, Justavzz. Lo que comentas es muy común y la forma más sencilla de resolverlo es utilizar un componente de carga (una pantalla de loading) que se muestre mientras se resuelve si hay sesión iniciada o no.

[@justavzz7163]

@@lasfito claro entiendo, pero me podria decir masomenos en que parte se podria hacer? no me quedo muy claro esa parte, muchas gracias de antemano

[@lasfito]

Hola, Justavvz. Se perdió tu respuesta en mis notificaciones. Puedes crear un estado "isLoading" que inicializas en True. En tu componente, si isLoading es true regresas la vista de loading. En cambio si es false muestras el {usuario ? : }. Para manipular el isLoading tienes 2. La primera es en onAuthStateChanged. Si el usuario existe cambias isLoading a false. La segunda en un useEffect dónde metas un setTimeout para cambiar isLoading a false después de .5s ✌🏼

[@justavzz7163]

@@lasfito te amo , muchas gracias espero mas videos pronto !

[@seba23571]

me parece , que es medio peligroso que los datos de coneccion a firebase esten en el front-end

[@lasfito]

Es peligroso si no se realizan los ajustes adecuados desde tu panel de Firebase.

[@seba23571]

Esta bueno el vídeo soy nuevo con firebase. Simplemente me gustaría saber si existen otros métodos de autentificación con roles de usuarios . los distintos roles y privilegios es según el token que recibe el front end. Sin que el front tenga que conservar datos estáticos de conexión.

[@lasfito]

@@seba23571 No realmente, aunque es posible ponerse creativo con las reglas de seguridad de base de datos y con ellas tener algo parecido. Más adelante subiré un video sobre reglas de seguridad en Firebase.

[@seba23571]

@@lasfito si en realidad soy nuevo con firebase.. Pero otros backend no, estoy intentando realizar algo parecido que hice con spring boot regla de seguridad jet si lo logro le aviso

[@seba23571]

@@lasfito este vídeo es lo que intentare hacer mas adelante kzbin.info/www/bejne/rHO4nGVvaLaGgbs

[@oxpey4473]

Falto explicacion para eliminar esos usuarios

[@lasfito]

Sí, hay varias funciones que se quedaron fuera del video para no extender demasiado.

[@oxpey4473]

@@lasfito se puede desde el código agregar, modificar o eliminar otros usuarios? Yo lo he intentado por todos los métodos y no he podido

[@lasfito]

La forma más fácil es a través de la extensión que tiene Firebase para eliminar usuarios y sus datos. Échale un ojo

[@oxpey4473]

@@lasfito cual extensión dices? Tengo mi código hecho en react... Y tengo una cuenta free de firebase

[@lasfito]

@@oxpey4473 En la consola de Firebase hay un apartado llamado Extensiones. Hay encuentras la de eliminar datos de usuario.

[@johngootmoreno699]

Excelente video gracias

[@lasfito]

A ti John, Espero que te haya servido ✌🏼