Auth y Roles de Usuario con Firebase y React

Transcripción automática:

hola chicos que tal bienvenidos en este

vídeo vamos a aprender cómo crear un

sistema de autenticación con fire veis

que además asigne roles de usuario a las

personas que se registren y que con base

en estos roles a lo mejor tenemos el rol

de administrador y rol de usuario con

base en estos roles las personas podrán

acceder a cierto contenido o no por

ejemplo hay que hacer clic en quiero

registrarme vamos a registrar a la suite

o le damos su contraseña y la suite o va

a ser administrador

cuando yo vengo aquí a mi proyecto de

fires fíjense que no tengo nada en base

de datos no tengo nada en usuarios vamos

a registrarlo se registra la cuenta la

escrito tiene acceso al panel de

administrador y de vuelta en fire veis

si lo actualizo ya tenemos la cuenta de

las fito y en la base de datos tenemos

registrado y el as fito tiene el rol de

administrador

por lo tanto puede ver el plantamiento

panel entre comillas si yo cierro sesión

y registro otro correo registramos a las

y todos y ahora si todos tenemos el rol

de usuario fíjense que al registrarlo

con un rol de usuario la csf y todos

tiene acceso al panel de usuario

y aquí en la base de datos podemos ver

que se guardó como usuario y aquí

tenemos a la persona bueno es el día de

hoy aprenderemos cómo crear un sistema

si autenticación creación de cuentas

creación de roles y contenido

personalizado como hacen el rol y si les

interesa acompáñenme

[Música]

muy bien chicos lo primero es crear el

proyecto el código de brigada y para

ello tenemos dos opciones el primer

arrancamos nuestra terminal y tenemos

las opciones ahora si la primera opción

es que ustedes corran en pie explica

break up se bajan todo los archivos de

break si creas un proyectito y después

lo que tendrían que hacer es empire

state fair beige para que tengan que

fair race en su proyecto esta es la

primera opción la segunda opción

un tanto más fácil más cómoda es que

utilicen mi plantilla para trabajar con

ryan y kviris esta plantilla se

encuentran en el hub en las fit o

diagonal graph irish enlace lo

encuentran en la descripción y simple y

sencillamente veníamos aquí copiamos el

enlace para clonarlos y lo que hacemos

aunque primero primero me voy a ir al

escritorio y ahora sí aquí desde el

escritorio vamos a clonar esta plantilla

y hasta los siguientes meternos en la

plantilla en el folder y ya que estemos

en el folder sería correr en stop para

instalar todo lo necesario archivos de

reactivos de fire beige dependencias y

demás muy antes del primer paso el

proyecto nuestro folder contract y fire

mls lo segundo sería venir aquí al

navegador dirigirnos a fire beige punto

punto com accedan a su consola y

necesitamos crear un proyecto que lo

llamaré tuto de roles

voy a decir que no a las analíticas y

eso nos va a crear nuestro proyecto hay

quien fair page para llevar a cabo todo

este seguimiento de usuarios de roles

permisos derechos y demás lo que haremos

es utilizar los apis o dos servicios de

files el primero naturalmente el

servicio de autenticación y el segundo

el servicio de base de datos comencemos

o inicial hicimos el servicio de

autenticación haciendo clic aquí y luego

haciendo clic en comenzar aquí nos darán

una lista de opciones de servicios o

proveedores que podemos utilizar

podríamos utilizar google facebook

pública porque si yo son tanto más

tediosos algunos requieren cuenta de

desarrollador así que elegiremos correr

tranco porque es lo habitual es el

estándar hoy día en la web

y así de sencillo ya tenemos habilitado

esta parte de autenticación con correo y

contraseña lo segundo es aquí en el

panel en firebase hacer clic en

comenzar bueno crear base de datos que

según se pone en un modo prueba porque

caso contrario no podrán editar la ame

no se cambien las reglas entonces no se

compliquen elijamos modo prueba

siguiente ya que eligen la ubicación yo

voy a escoger el ibex west número 2 y

aparece que es los ángeles muy bien

entonces mientras este segundo paso de

fire beige se completan revisemos

nuestro primer paso que es el proyecto

muy aquí hasta dos instalado con 154 mil

932 web y ahora estando desde nuestro

folder lo que sigue es abrirlo con su

video editor favorito favorito yo voy a

utilizar vies code y aquí está muy bien

si utilizaron la primera opción la de

utilizar en pies break up con envían

stop fair play es la única diferencia

que existe con respecto a mi plantilla

es que mi plantilla ya viene limpia no

tiene tanto relleno y no trae que el

testing no trae que los estilos que esto

que el otro viene limpia sin relleno

número 2 la seguna diferencia que

implante ya tiene una carpeta llamada

files dentro de la cual encontramos un

archivo para realizar la conexión con

fire page y es lo que haremos antes de

continuar esto es lo queremos el tercer

paso es realizar la conexión entonces

como podrán ver aquí le tenemos tres

próximas credenciales importamos esto

desde fire media con esto necesitan con

el pie luego añadimos nuestras

credenciales y después esto que estamos

inicial izando lo guardamos en esta

constante que se llama fire y sap y la

idea es exportar la para que la podamos

utilizar en cualquier parte de nuestra

aplicación estas credenciales las vamos

a generar con una aplicación en fire

guys para ello me voy a regresar al

navegador

nadia se terminó la parte base de datos

y estamos crear una aplicación para ello

venimos aquí a el engrane configuración

del proyecto y hasta abajo en la opción

de crear aplicaciones en el proyecto muy

importante entender que el proyecto es

algo así como que la madre es el almacén

donde toda la configuración la info y

demás y luego a cada proyecto podemos

asignarle distintas aplicaciones voy a

elegir la opción de aplicación web que

es la tercera la llamaré web

de una lo que sería lo que me importa la

registramos y al registrar esta

aplicación fires nos va a dar las

credenciales para conectarnos entonces

de aquí lo único que importa dicho esto

que está aquí es más nos lo que está en

el chivas credenciales voy a tomar insta

parte de credenciales voy a copiar me

regreso y lo pego aquí y ya está

importamos la inicialización guardamos

las credenciales inicial izamos la labor

damos aquí y la exportamos muy bien

tercer paso completada tenemos la

conexión con firewall y lo siguiente es

trabajar la aplicación de riad donde la

idea es que la gente se pueda registrar

pueda bloquear su inserción y

dependiendo del rol de la persona tenga

acceso a cierto contenido o no pero no

podría ser una mina podría ser un

usuario normal entonces dentro de

nuestro carpeta de soul dentro de este

folder voy a crear una más que se llama

screens

y voy a aquí entre escrito voy a crear

dos archivos uno que sea el login nos

estamos escrito login js y yo recomiendo

tener este plugin skip login se llama

jacques y asevera que los guarde todo

esto es muy útil para ahorrarnos tiempo

se habían instalado bastaría escribir

break funcional componen export

presionar está y ya estamos nos escriben

código parecía muchísimo más rápido de

trabajar entonces de vuelta aquí a login

esta va a ser la vista para bloquearse

muy bien nos tener otra vista cuando la

persona ya se haya logrado la idea es

que vea la vista de home y aquí no son

lo mismo

exponen creamos esta vista que se llama

home muy bien

dentro de home la idea es que

dependiendo del rol la persona de a1

cierto contenido entonces aquí en su

horizonte crear otra carpeta que se

llame componente

aquí en componentes vamos a quedar dos

archivos el primero en llamarlo admin

view esto lo que el administrador va a

poder ver

vamos a ponerle hola admin la vamos a

crear otro archivo más que sea

como lo llamamos y usher y serviu la

idea es la misma que aquí esto lo vea

quién sea usuario o la usuario y hasta

entonces

y tenemos nuestras vistas especiales de

acuerdo al rol tenemos las pantallas de

home y de login y estas pantallas vamos

a pasarlas a nuestra aplicación esto

esto lo vamos a borrar de más tarde lo

ocupamos lo vamos a borrar y lo que

haremos es lo siguiente importamos la

vista de home importamos la vista de

login y vamos a condicionar los aquí en

nuestra aplicación la idea es que

llevemos seguimiento de si la persona ha

iniciado sesión o no este seguimiento lo

vamos a guardar en un estado por lo

tanto ya crea un estado que diga si hay

usuario o si no hay usuario de momento

voy a decir no hay usual voy a asumir

que no hay usuario

y aquí estoy espérame tantito vamos a un

fragmento y aquí esto vamos a

condicionar si hay usuario vamos a

mostrar el home caso contrario si no hay

usuario vamos a mostrar el login

ok esto lo guardamos aquí le está

pasando esto no es necesario ya está

si hay usuario mostramos con home si no

hay usuario mostramos login

ahora vamos a comenzar a trabajar con

este nuestra y con nuestra relación al

fire pero vamos a revisar que esté todo

bien todo correcto dándole aquí corremos

la terminal bueno la abrimos la terminal

y vamos a correr en bienestar y como no

hay usuario nos hubiera mostrar la

página de login

estoy aquí le vamos a dar una consola

esto ya lo podemos cerrar la plantilla

el enlace lo encontrarán en la

descripción al igual que el enlace a

todos mis códigos de todos mis

tutoriales

y ustedes nos define muy bien aquí

tenemos con un error y es que

efectivamente estoy usando state pero no

lo ha importado desde libia vamos a

importarlo y ahora si yo me regreso me

manda a la vista del hogar se porque

dice que no hay usuario registra muy

bien aquí vamos a importar este vamos a

importar nuestras credenciales de fires

recuerden si queremos trabajar con fire

veis todo esto

en cualquier sitio que queramos acceder

a lo servicios de fire race vamos a

tener que importar esto aunque lo

importamos e importamos el servicio con

el cual queremos trabajar les muestro

pero no importó fire rise up desde

desde air race y luego credenciales

importa esto desde aquí y lo siguiente

es importar el servicio con el cual

quiero trabajar aquí desde la app

la idea es que detectemos cuando haya

algún cambio de sesión entonces lo que

haré es importar o trabajar con el

servicio de fire veis

este de aquí y para cualquier servicio

con el cual están trabajando requerimos

siempre importa la función que empieza

concrete en este caso quiero y

necesitamos también inicializar esta

función con esto es igual a grado y le

pasamos como argumento nuestras

credenciales barbies ya está muy bien

entonces aquí la idea es estar

escuchando si hay cambio de sesionando

para ello fire veis nos da una función

que es o no state change muy bien

entonces aquí desde la app vamos a decir

lo siguiente queremos escuchar cuando

haya cambio decisión y si hay sesión

iniciada queremos guardar esa sesión en

nuestro estado de usuario si no hay

sesión iniciará iniciada también

queremos registrar esa canción no state

change y fíjense que el primer argumento

es off y el segundo argumento es la

función que observa vale dónde

argumento y como segundo aumento la

función que observa entonces aquí esta

función que observan va a recibir el

usuario de fires en caso de que exista y

aquí vamos a hacer lo siguiente

aunque queremos hacer lo siguiente si

hay usuario de fair beige dicho usuario

lo vamos a guardar en el giuseppe en

nuestro estado caso contrario si no hay

usuario el estado lo regresamos anular

de aquí copa de lotes leyéndome la mente

muy bien y es así de sencillo desde la

app llevamos control del usuario y desde

la app llevamos control del inicio de

sesión de fair peace

perfecto si una relación aplicación

sigue mostrando me la vista de lo

guiarse por claramente no me elogie para

trabajemos eso vayamos al componente de

log in action login hay de dos la

primera es que el usuario se esté

logrando y la acción es que usuarios no

tenga cuenta no se puede lograr por lo

tanto tenga que registrarse todo esto lo

vamos a aguardar vamos estar los

revisando obtener los pendientes de un

estado entonces aquí tendremos un estado

vamos a llamarlo is

y registrando

de momento vamos a asumir que no se está

registrando por lo tanto está iniciando

sesión

entonces aquí nuestro título va a

depender de si se está registrando o no

por lo tanto hacemos lo siguiente

hacemos lo siguiente

hay que moscú para un operador terciario

para acondicionar que queremos

renderizar y decimos si se está

registrando es verdadero entonces quiero

que el mensaje diga regístrate porque se

está registrando caso contrario si esto

es falso no se está registrando y por lo

tanto quiero que mensaje diga inicia

sesión muy bien y necesitamos un

formulario vamos a meter un form y aquí

vamos a meter

una etiqueta

vamos a meter un correo electrónico y lo

vamos a meter un input de tipo email muy

bien el segundo campo es la contraseña

vamos a meter un importe tipo contraseña

y cerramos la etiqueta el tercer campo

es una etiqueta que diga rol que rol

queremos darle al usuario le vamos a

meter un select que nos dé la opción

administrador o como opción usuario ya

está y por ultimo visitamos un botón

para hacer el show mid entonces aquí

metemos un varón no metemos

un input de tipo submit cuyo texto va a

variar el texto del botón si el usuario

se está registrando va a decir registrar

si el usuario no se está registrando va

a decir iniciar sesión y afuera afuera

del formulario según se extrapola el

problema vamos a ver un botón y al hacer

clic en él nos cambia el este y la

función del usuario de que se quiera

registrar una aquí el texto lo mismo

y hasta el texto si se está registrando

ya tengo una cuenta o si no quiero

registrar muy bien ya lo van a entender

como les muestre la aplicación aquí está

piense

ahora mismo me da la opción de iniciar

sesión iniciar sesión pero qué pasa si

no tengo cuenta qué pasa si yo quedó

registrado clic a quién quiero

registrarme y ahora me dice regístrate

regístrate por qué pasa si en realidad

tenía cuenta bueno ya tengo una cuenta

por lo tanto hago clic en la opción de

inserción correo electrónico contraseña

y qué rol quiero administrador o usuario

muy bien oralidad es cuando la gente da

clic acá se registre o inicie sesión

vamos a comenzar con registrarse aquí en

fair race vayamos a autenticación de

momento no tenemos usuarios regresamos a

la aplicación y lo que haremos es lo

siguiente al formulario vamos a decirle

cuando la gente no cuando la gente haga

clic en el submit este que tenemos acá

con la gente da click aquí en smith

quiero que corras la siguiente función

es una función que no existe pero yo la

voy a llamar algo muy común es llamarla

submit hunger ok y antes de que se me

olvide para que sea más fácil trabajar

con los datos a sus inputs hay que

meterles una idea para que sea más fácil

carlos después quien ahí vamos a ponerle

email

hay días para el password

y al select vamos a ponerle un aire de

roll

y aquí bien sé que la marca error mis

oye tu función que estás pasando acá no

existe y es correcto no existe esta

fórmula y vamos a cerrarlo vamos a ver

esto de aquí y vamos a trabajar esta

función de submit hardware entonces

hemos lo siguiente formación submit

handler va a recibir el evento y lo

primero es prevenir el que se actualice

ahora fíjate o cuando se refresque no me

gusta arreglar esta actualización clic

acá ya no me actualiza la página como

hizo hace rato lo siguiente debiera ser

recopilar los datos que el usuario me

está me está dejando aquí correo

contraseña y rol para ello voy a decir

que con su email es igual a esto de aquí

password lo mismo y rol es igual a lo

mismo

fíjense que aquí cómo funciona recibamos

el evento el target del evento en ese

caso el daño sería el formulario

dentro del formulario tenemos elementos

buscamos en light y los hay dyson y neo

password yo rol que tenemos que tenemos

aquí asignados

haití password y roll y luego dicha

información la estamos guardando en

estas constantes y vamos a vamos a

bloquear las en pantalla para ver que

todo funcione correcto si me vengo para

acá inspeccionó abro consola

limpiamos esto de cam mi correo o la

harás fito 3.106 y de rol administrado

clic acá - implementar ya como pueden

ver muy bien ahora de vuelta a la lógica

aquí hay dos escenarios el escenario

donde la persona se está registrando el

escenario donde la persona está

iniciando sesión y tenemos que tenerlos

en cuenta ambos queremos lo siguiente

si se está registrando lo registramos si

nos está registrando que haremos lo

iniciamos sesión chulada de código de

lógica esto va directo por al google y

ahora aquí vamos a necesitar registrando

vamos a van a tener una función mucho

ancha vamos a crear una función que se

llama registrar usuario

hoy en de esta función no existe vamos a

crear

m

esto lo cerramos vamos a crear esta

función de

registrar usuarias y la llamamos verdad

registrar service correcto y ahora cómo

vamos a registrar un usuario a estar

hablando con padres y vamos a recibir

datos e información muy importante con

esta función sea asíncrona

lo metemos aquí funciona registrar

usuario

y vamos a hacer lo siguiente vamos a

registrar un usuario con fire mls dentro

de esta función pero para utilizar los

servicios de fires tenemos que

importarlo en este componente en esta

pantalla de login pues ya saben chicos

lo primero las credenciales desde fire y

sap lo siguiente el servicio en este

caso vamos a importar los de fair play

out

y desde aquí vamos a jalar el buen grado

y vamos a utilizar la función que se

llama create y use width y notas al

crear usuario con correo y contraseña y

por último el santo grial primero

segundo y tercero es crear en la

constante de grados a la cual le vamos a

pasar nuestras creencias ya lo hemos

hecho antes muy bien ya tenemos esta

función y es la que va a utilizar aquí

en registrar usuario aunque queramos

registrar usuario por lo tanto vamos a

decir que x de william password y aquí

fíjense que esto recibe como argumento

lo primero y lo segundo y medio y lo

tercero contraseña lo primero ya

definimos aquí lo segundo email y lo

tercero contraseña

y ahora esto de aquí tienen que

obtenerlos de algún lado los va a

obtener de la función email password y

rol también porque no y aquí los vamos a

pasar también el email password y rol

dentro de nuestra función que gestiona

el somni corremos registrar usuario le

pasamos esta información y desde aquí la

estamos utilizando

ahora ahora con esto con esto es más que

suficiente construida puedo registrar mi

usuario y no tengo el vídeo no tengo

problema pero la idea es que además de

crear el usuario queremos llevar un

seguimiento de qué rol tiene asignado al

usuario para ello toda esta información

la vamos a guardar en una base de datos

en firestone me vengo para acá y vayamos

a la base de datos la idea es cuando la

persona se registre aquí vamos a guardar

la información de con qué rol fue

registrado para que después podamos

revisar su rol y revisar o bueno ver qué

derechos y permisos y accesos tiene que

va a crear una colección que se llame

usuarios y me pide la fuerza que tenga

algún este documento vamos a hacerlo así

de rápido realidad es que aquí

registremos no lo sé juanito pérez y

bonito pérez tiene por rol administrador

o la csf y todo tiene por rol usuario y

así sucesivamente entonces además de

crear un usuario tenemos que escribir en

la base de datos pero ojo no tiene que

aprender de files con usted registran un

usuario esta función se comunica con

fire veis genera una promesa como valor

de retorno file veis

para recibir la información nos crea al

usuario y una vez que haya creado al

usuario envía la información de usuario

la envía de regreso para que entonces

dentro de esa información viene un campo

muy importante que es el y white y creo

que es y usaid y yo creo que es única y

di no sé qué significa la persona con el

cual con el cual vamos a estar guardando

la información en la base de datos ok

entonces es lo que haremos

tomar esta información que nos envía de

vuelta fire bis para ello diremos lo

siguiente

info usuario es igual al valor que nos

regresa esta función pero ojo que esto

es una promesa esto nos genera una

promesa entonces lo que hacer es tener

aquí un buen den un buen den que cuando

ya hayamos recibido al usuario deba

airways entonces queremos retornar esta

esta información de usuario de wireless

aquí porque ahí está

y es también esto hay que volver no

decir que nos espere para que antes de

ejecutar más código primero ejecuta esto

esperar que llegue la info y guarde la

info aquí y de hecho pueden ver qué

si después de esto yo lo veo en pantalla

el info usuario vamos a ver qué es lo

que estamos recibiendo desde fibers

donde vamos a poder hacer la prueba que

devengamos para que la quiero

registrarme regístrate regístrate para

estar a mi correo con contraseña 1 2 3 4

5 6 y haré clic en registrar

me crea la cuenta me detecta el inicio

de sesión me manda al home y recibo la

información de fares me oye te acabo de

crear tu cuenta y esta es la info de la

cuenta que acabó de crear aquí lo que

nos importa es este campo de giuseppe y

este campo de lo que dice este campo de

usher y este campo de wajdi para este

usuario que me acaba de crear de ahora

las fito este es su único bueno

penalidades con este hay de venir para

acá y crear un documento para este

usuario entonces para solamente hemos

completado fin se ya creamos usuarios y

ya los estamos estamos viendo su

información

lo estamos guardando aquí y lo estamos

subiendo aunque me faltó por cierto

mejor es un botón para cerrar sesión

vamos a

agregar un botón que diga cerrar sesión

y vamos a importar lo de siempre fue

revisar el servicio

desde el firewall inicializa moss con

grado

y esto logramos una constante así el

santo grial tres de tres para hacer la

sesión desde o importar una función que

se llama saint out

bueno pues aquí este botón al hacer clic

queremos que nos corra la función the

strain out y saint recibe por argumento

el off y hasta cannes ahora si yo le

dais a la sesión me regresa a la parte

del odio hoy empero continuamos en esta

parte de registrarse ya vimos sólo

cierra ya vimos que al registrarme

recibo la info del usuario ahora lo que

tenemos que hacer es utilizar este este

campo de huay de que está en youser que

están a info y con este guay de crear el

documento en la base de datos como vamos

a trabajar con base de datos tendremos

que importar el servicio de base de

datos entonces haremos lo siguiente

importamos forma fire beige diagonal

fire store fair story en la parte de

base de datos y al igual que con grado

aquí vamos a utilizar get fire store muy

bien y al igual que aquí tenemos que

guardarlo en una constante con fire

store ya está bueno que necesitamos para

escribir en nuestra en nuestra base de

datos para escribir necesitamos dos

funciones la primera función nos va a

decir o nos va a ayudar a declarar el

documento es decir las referencias decir

el pan por ejemplo este documento su

camino como pueden ver aquí es usuarios

diagonal y el nombre de este documento

este es el path es la primera opción que

vamos a importar y la función se llama

se llama doc

la segunda función es set doc para

guardar la información muy bien entonces

de vuelta aquí ya creamos el usuario y

ya recibimos información vamos tomar

dicho wajdi y crear una entrada en la

base datos primero necesitamos el pad el

caminito donde hicimos con do courel

diciendo referencia de documento es

igual a 2 y fíjense que doc recibe por

argumento

primero fires tour que es la constante y

luego el path el caminito fire store

aquí está y el segundo argumento es el

pad en nuestro caso el path debiera

hacer algo como esto

la colección de usuarios diagonal y el

nombre del documento que queremos y es

lo que escribiremos aquí usuarios de la

colección diagonal el nombre del

documento el número cómo tiene que ser

dinámico chicos el nombre documento va a

ser igual al y white y entonces que

ponemos a info usuario punto y usher

punto y haydee y para que esto funcione

tenemos que cambiar este string esta

cadena a un template swing nunca sobre

cómo se llama en español de o val

template touring tenemos utilizar estos

que se llaman

y tampoco sé canción en español ya la

pueden ver que ya me está escribió algo

dinámico muy bien ya que tengo la

referencia

este creo que éste creo que no lleva

white donde lleva white y cuatro discos

ya que tengo la referencia le digo fabri

sabes que en esta referencia en este

caminito quiero que me guardas la

información entonces vamos a decir set 2

le pasamos que dónde está no

lo pasamos se recibe como argumentos la

referencia y luego la información de la

la referencia está aquí y luego la

información que vamos que para modo

objeto información información vamos a

guardar un correo por qué no

en correos abordar el email que estamos

recibiendo y entró al vamos a guardar el

rol que estamos recibiendo y ya con eso

estaríamos escribiendo en nuestra base

de datos este proyecto no hace falta muy

bien creamos al usuario recibe un su

info con dicha info creamos una

referencia la base de datos y en dicha

referencia creamos un documento con esta

información vamos a probarlo mueven a mi

aplicación

voy a registrar regístrate registro que

voy a registrar ahora las fico 2 1 2 3 4

5 6 con el rol de usuario y le doy

registrar

la que haya que llamar error

muy interesante a ver a ver qué pasó

vale de vuelta tiene el código no hay

ningún problema pero por alguna extraña

razón no me está aceptando este

argumento de burton no lo reconoce y lo

que vamos a hacer es que en lugar de que

esté fuera de la función vamos a pasarlo

adentro de esta función de componente de

login entonces vamos a bajar lo

guardamos

el rezamos acá este que llame de

reconoció la sesión está la sesión de

las citados pero si no vengo a la base

de datos notarán que es que no hay nada

no me alcanzo a crear la entrada pero al

usuario si no nos proveemos nuevamente

quiero registrarme vamos a aprobar con

las citó 3 1 2 3 4 5 6 cómetelo como

usuario registrado

aquí está recibimos la info se creó la

entrada y está muy bien las citó 3 tiene

por usuario o por rol y usher

perfecto entonces ya podemos crear

cuentas ya podemos al final de roles

obviamente para este ejercicio lo estoy

haciendo con una lista para que la

persona escoja pero en su aplicación de

acuerdo a sus características de coraje

o lógica esta parte de asignar usuario

nos la van a asignar de acuerdo a la

lógica de su aplicación yo lo que hice

fue la asignó de acuerdo a lo que la

persona haya escogido muy bien entonces

esta parte de crear cuentas ya está

haría falta utilizar una función para

que los usuarios ya existentes puedan

iniciar sesión y es lo que haremos para

iniciar sesión vamos a jalar o importar

desde aquí la de sangin with email and

password iniciar sesión con correo y

contraseña y entonces lo que haremos es

que aquí vamos a tener otra función

dentro de la función que gestiona el

summit mira que no solamente lo vamos a

utilizar una función que se llame o no

vamos a utilizar este aquí

scheinin with imam password recibe el

email y la contraseña lo pueden ver aquí

argumentó email y contraseña de modo que

si yo me vengo para acá y quiero iniciar

sesión con alguna de estas cuentas

2 3 4 5 6

aquí está mi iniciación fin de que esta

es una cuenta que ya existe fue la

primera que cree unos 34 56 nicki está

me inicia la sesión perfecto ahora la

idea es éste

cómo poder utilizar estos roles del

usuario para saber qué información

mostrar al momento de iniciar sesión fin

se cree que inició sesión

nada más muestra como no entonces

regresando a la aplicación la idea la

idea o como tenemos ahora mismo es lo

siguiente cuando alguien inicia sesión

dicha información que nos envía fair

race la estamos guardando aquí en este

estado de usuario y vamos a ver cómo es

que se ve esta información de usuarios

imprimir usuarios bar beige

y aquí está esto es lo que estamos

recibiendo de fires todo este objeto nos

da un y medio nos da una url de foto

univ haití y lo que haremos es que vamos

a guardar además de esta información

vamos a guardar el rol que tiene el

usuario entonces haremos lo siguiente de

entrada no vamos a guardar todo esto

todo esto es es muchísimo vamos a

aguardar si acaso el email y nibali

dentro de aquí de cuando si exista el

usuario haremos lo siguiente diremos

const de ir a bueno sigue al revés no

existirá en inglés y usted de ira es

igual

es igual a que tienen y vice y vamos a

poner el white y que nos da la

información de fire veis en email

también el email que nos daba airways

pero pero pero pero

este nuestro bebé y aquí en guardar

usuario vamos a poner y usher de ira

adicional de eso tenemos que obtener el

rol tendríamos que tener aquí rol y este

rol sacarlo desde la base de datos para

ello tenemos que consultar la base de

datos hagamos lo siguiente vamos a

importar aquí también el servicio de

fire store

desde fire with fire store

[Música]

y desde aquí que vamos a traer un

tráiler great falls store y vamos a

traer dos para la referencia y es ticket

2 para obtener la información de dicha

referencia como siempre vamos a también

poner aquí guardar la constante de fair

store

y vamos a crear una función que se llame

que se llame con llamarla a 5 johnson

vamos a llamarla get roll y estoy que

troll recibe un white y vale entonces la

idea es primero crear una referencia al

documento const do courel sería igual a

2 y recibe fire store

lo recibe es que sería usuarios diagonal

y aquí vamos a meter el wide y del

usuario que queramos cuyo rol queramos

buscar el yo lo estamos recibiendo aquí

vamos a pasarlo para acá

y esto es obviamente tiene que ser

batiks vamos a poner este aquí

aunque tenemos la referencia lo

siguiente es obtener la información aquí

nos dice lo q nos obtiene la información

pero ojo que esa información a mí

siempre me gusta decir que es

información que está está cifrada en

cierta manera no no es la información en

sí sí yo revisara esto y lo leyera me

encontraría con mucho texto mucho código

que que no es no es la invoca yo quiero

entonces yo lo acuse cifrada ahora

estado con cifrada hay que interpretarla

en cierta manera por lo tanto diremos

que la info final por así llamarlo la

info final es igual a poco cifrada punto

data donde fire nos proporciona este

método que en cierta manera nos nos

permite entender este la información

ahora está esta información

aquí hay que decir que queremos

solamente el campo de rol porque tiene

que tenemos correo rol vamos a tener a

guardar solamente el campo de arroyo

y hasta perfecto ahora la idea es

regresar esta info final de modo que

aquí cuando se detecte el cambio de

sesión

buscamos el rol a través del baile y

dicho no lo vamos a ocupar para

guardarlo dentro del estado en el cual

guardamos la impone nuestro de nuestro

usuario nuestro visitante en serio muy

entonces de vuelta aquí se detecta un

inicio de sesión comprobamos que si hay

iniciación que si hay información del

fire page de dicha información guardamos

aquí en este objeto el wide y el email

ya lo que tenemos que hacer es

éste buscar el rol para ello vamos a

decir qué rol le vamos a pasarle usuario

fire veis punto white

y luego cuando recibamos el roll vamos a

guardar lo que conocíamos el roll

retorne a los como

regresando

entonces avanzar un poquito de orden

esto

y mejor

y mejor esta parte de aquí vamos a

meterla dentro de la promesa y esto nos

vamos a regresar sino que cuando hayamos

recibido el roll lo que haremos es

definir la información del usuario

aquí diremos qué rol es igual a rol y ya

con esta información en mano este set y

usher lo vamos a meter dentro de la

misma promesa de modo que hasta que

tengamos la última pieza que es el rol

que estamos recibiendo con esta función

hasta que tengamos esto hasta entonces

definimos la info y la guardamos en el

usual y después vamos a probar a un

primero en pantalla para que vamos a

poner un set de ir a final vamos a

prender y ser de ira

y hasta íbamos de la prueba debiéramos

imprimir en pantalla estos tres datos de

aplicación

[Música]

por alguna razón

no hay nada que vamos a actualizar

aunque hay una carga que está pasando

chicos vamos a relanzarlo control más

sede para cancelar en bienestar corremos

de nuevo

mostrar para acá

ok vamos a

y aquí mi sexta indefinido en info final

o claro es que me tenía que tenía sesión

iniciada con los frito 1 pero las

pitones no tienen no tiene documento

aquí vamos a iniciar con las citó 3

bueno la sesión

porque me detectan a la sesión entera

vamos a darle su documento a las [ __ ]

12.1 tiene por igual de éste

y aquí vamos a crearle es un documento

que diga roll

y vamos a ponerle admin

aunque este es el de la suite on vamos a

poner también email

para que sea más fácil de entender y

hasta obviamente ustedes no tienen que

tendrían que hacer esto lo que tendrían

que hacer es prever estos escenarios en

su código no es la intención de este

tutorial entonces vamos a hacerlo así

miren ya me reconoció la sesión de la

suite o uno ya me guardo el rol y aquí

estamos vamos a ver cómo es que se ve en

pantalla

aquí está yo soy de ir a final

email admin y white y aunque pienso que

esto no está corriendo de forma infinita

lo cual indica que algo hicimos mal algo

hicimos mal chicos vamos a cancelar esto

[Aplausos]

vamos a meter todo esto en una función

vamos a poner

función

[Música]

en una función y vamos a meterlo aquí en

bueno tendríamos que tendrá que ser

función y vamos a meterle este bien que

ser muy críticos con sus nombres de

funciones chicos siempre conexión muy

descriptivos en este caso lo están

haciendo es

establecer el estado del usuario a

través de la información de files yo lo

llamara y no nos vamos a llamarlo set y

usher with fire’ veis

un hombrecito aquí pegamos todo esto

ahora la idea es para evitar que se esté

corriendo y corriendo corriendo vamos a

condicionar le diremos si no existe el

usuario entonces corre esta función para

establecer esto debiera bastar corremos

una vez más en pie néstor

me trae para acá

en fin

[Música]

wow usuario fibers is not the fine

eso es por qué

vamos a pasarle

saif airways y vamos a pasárselo por

aquí

ahora sí ya está vamos a iniciar sesión

que en el 1 1 2 3 4 5 6 y lo primero

iniciar sesión

y aquí está todo no se volvió de marca

error pero aquí está el clúster de ir a

final correo rol y ahora vamos a ocupar

este rol para renderizar esto ya mostrar

contenido personalizado de acuerdo al

rol aquí en el home vengamos a home y lo

que haremos es importar

vamos a importar el admin

desde los componentes anemia y vamos a

importar también el servidor

ok y serviu está aquí nos dice al

usuario y a mi novio está aquí y ahora

aquí en home lo que haremos es tener

acceso al loser

vamos a pasarlo desde aquí desde up

recuerden que nada estamos realizando

tanto juan como login

desde ahí vamos a enviarle esta

información de usuario diciendo algo

como y usted es igual a y usted no es lo

más lo más propio entonces vuelta a king

kong haremos lo siguiente

vamos a poner aquí una parte que digamos

sí bueno algo más o menos similar sí sí

dentro del you ser el rol es igual admin

entonces muéstrame la limpio caso

contrario muéstrame el servicio así de

sencillo no vengo para acá y me dice

hola admin porque yo soy administrador

pero si inicia la sesión con las fito 3

el cual es usuario vamos a ver qué es lo

que pasa

vamos a cerrar sesión

vamos a iniciar sesión con las fito 3 1

2 3 4 5 6 iniciar sesión y me dice hola

usuario hay login

entonces aquí lo que ustedes tendrían

que hacer es bueno que en su administrar

este algún panel de control que el admin

tuviera tuviera acceso a esta parte de

la base de datos y tuviera acceso a

remover personas y que new serviu

solamente tuviera tuviera ciertos

accesos o ciertas vistas obviamente esto

es un tutorial la idea es mostrarles

grosso modo cómo funcionaría un sistema

de autenticación con roles lo que tienen

que hacer es escribir mejor código que

el mío prever errores prever escenarios

este out también podrían hacer fíjense

que este usuario yo lo tengo en un

estado dentro de a algo muy recomendable

que podrían hacer es crear una carpeta y

crear un contexto que vayan pasando a

todos sus componentes pero bueno eso ya

sería tema de de otro vídeo o tema de

otro tutorial mientras tanto y si les ha

gustado vídeo dejen me gusta suscriban

se escriban en los comentarios también

que tutoriales o qué vídeos les gustaría

ver por este canal nos vemos

Acerca del autor

¡Hola! Me llamo Adrián, pero todos me conocen como Lasfito. Soy desarrollador front-end y escribo artículos y tutoriales sobre JavaScript, desarrollo web y diseño.

¿Dudas o comentarios?

Únete al Discord oficial

¿Alguna errata?

Si encuentras alguna errata en este artículo, por favor, no dudes en levantar un pull request en el repositorio de GitHub.