Así que logramos
mucho, podemos escribir datos, buscar datos,
usar nuestro token para abarcar datos o para examinar
productos y pedidos a nuestro usuario actualmente conectado, podemos
iniciar sesión y así sucesivamente,
y eso está muy bien.
Una cosa que no estamos haciendo en este momento es que no estamos persistiendo en nuestras
sesiones, por así decirlo. Si recargo, siempre tengo que iniciar
sesión de nuevo
y eso no es realmente lo que quiero, sería bueno si pudiéramos iniciar sesión automáticamente si tenemos un
token válido y para ello necesitamos hacer dos cosas: necesitamos almacenar el token en algún lugar del dispositivo, no en Redux porque Redux
está en la memoria y esto se perderá cada vez que se reinicie la aplicación.
Por lo tanto, debe estar en algún lugar
del disco duro del dispositivo, por ejemplo, y además, debemos verificar ese almacenamiento cada vez que se inicia nuestra aplicación y configurar automáticamente
el token en Redux y redirigir al usuario si encontramos un token válido allí.
Ahora comencemos con el almacenamiento porque es un primer paso lógico. Para almacenar, debemos importar algo aquí
en el creador de acciones de productos, no en el
creador de acciones sino en realidad aquí en el creador de acciones de autenticación, allí debe importar el almacenamiento asíncrono de React Native.
Con eso importado,
podemos usar eso para luego guardar datos en el dispositivo, el almacenamiento asíncrono es una API React Native que al final usa un almacenamiento de
valor clave en el dispositivo que está disponible tanto en iOS como en Android, donde podemos almacenar datos
que persisten en todos los relanzamientos de aplicaciones, por lo que podemos usarlos para guardar datos que no se pierden
cuando la aplicación se inicia o reinicia.
Así que agregaré una nueva función, guardaré datos en el almacenamiento o algo así, y allí
espero obtener mi token y mi ID de usuario, los dos datos que me interesan aquí y ahora podemos usar
el almacenamiento asíncrono para luego establezca un elemento que es cómo guarda los datos y ese elemento que configure debe ser una cadena, pero antes que
nada debe definir una clave y lo
nombraré datos de usuario, pero eso depende de usted,
necesitará esa clave más adelante para recuperar sus datos y el segundo valor
ahora es una cadena,
por lo que la cadena que desea guardar allí y esencialmente debe guardar una cadena.
Ahora
que no hay problema, podemos usar json. stringify para convertir un objeto Javascript en una cadena y el
objeto que quiero convertir es un objeto que contiene mi token que obtengo como argumento aquí y contiene el ID de
usuario que obtengo como argumento.
Entonces, al final, guardamos este objeto como una cadena en el dispositivo.
Ahora solo tenemos que llamar a los datos guardados al almacenamiento cuando hayamos terminado de iniciar sesión o suscribirnos, por lo que aquí, tal vez después de enviar
el inicio de sesión, podemos llamar a los datos guardados al almacenamiento y reenviar resData. idToken
y resData. localId, por lo que utilizamos las mismas cosas en Redux
y definitivamente queremos usarlas allí porque Redux es importante para la
aplicación en ejecución, pero también lo guardo en el dispositivo para cuando queremos cargarlo cuando la aplicación se reinicia.
Ahora, sin embargo, eso por sí solo no funcionará y, por supuesto, también
debemos hacerlo al suscribirnos, pero eso solo no funcionará, necesitaremos una información adicional aquí antes de continuar.
¿Sabes cual? Necesitamos saber cuánto tiempo es válido el token porque no
debes olvidar que eventualmente caducará, por eso para iniciar sesión y registrarte, obtienes esa clave de expiración en
la respuesta que te indica en segundos cuánto tiempo lleva hasta tu token no es válido y Firebase ya no
lo aceptará.
También necesitamos almacenar esa información porque si luego regresamos, si reiniciamos la aplicación después de tres horas, nuestro
token probablemente no sea válido, por lo que debemos saber cuándo
se invalidará el token para que podamos verificarlo,
cuando el la aplicación se reinicia, cuando verificamos si tenemos un token, sabemos si ese token
que podemos encontrar todavía es relevante o si ya no es válido y, de todos modos, necesitamos un nuevo token,
en cuyo caso no deberíamos iniciar sesión automáticamente en el usuario.
Por lo tanto, quiero almacenar la fecha
de vencimiento y crearé la fecha de vencimiento aquí como una constante, un nuevo objeto de fecha que al final debería
tomar la fecha actual y agregar el tiempo de vencimiento.
Ahora la nueva fecha toma un objeto de fecha, pero con get time, obtenemos la marca de tiempo actual en milisegundos
desde el comienzo de los tiempos, es decir, aquí en
1970 en Javascript.
Entonces eso es una cantidad en milisegundos y a eso, podemos agregar resData. expira en.
Esto es una cantidad de segundos, por lo que necesitamos
convertir esto a milisegundos y también es una cadena, por lo que debemos convertirlo a un número.
Así que aquí agregaré un plus aquí o simplemente parseInt alternativamente para convertir esto en un número entero y luego multiplico esto
con 1000 para convertirlo de segundos a milisegundos porque obtener tiempo también nos da milisegundos.
Ahora, lo que esto me da es una nueva marca de tiempo en el futuro, que es la hora
actual más el tiempo de caducidad y lo envuelvo en otro objeto de fecha para convertirlo de nuevo de un gran
número de milisegundos a un objeto de fecha de marca de tiempo concreto. Esta fecha de vencimiento ahora es lo que también debemos pasar para guardar
los datos en el almacenamiento, por lo que aquí también espero obtener la fecha
de vencimiento y debemos adjuntarla aquí.
Así que aquí puedo nombrar esta fecha de vencimiento tal
vez para mezclar las cosas, esta es mi fecha de vencimiento y allí quiero llamar a este pequeño método toISOString que podemos llamar
a los objetos de fecha porque esto lo convertirá en una cadena en
un formato estandarizado que Quiero ahorrar
Ahora, esto es lo que quiero hacer para registrarme también, así que
esto se puede copiar allí y esto
es lo que quiero
hacer allí también, crear la fecha de vencimiento y guardarla en el almacenamiento.
Ahora estamos guardando eso en el almacenamiento, lo cual es bueno,
pero ahora también tenemos que verificar esto cuando estamos iniciando sesión. Una buena manera de hacerlo es crear una
nueva pantalla y en realidad crearé esto fuera de mis carpetas existentes en la carpeta de pantallas,
pero ni en la tienda ni en el usuario, y nombraré esta pantalla de inicio y puedes nombrarla como quieras desear.
La idea es que muestre esta pantalla mientras mi aplicación se está iniciando y estoy averiguando si el usuario está autenticado o no
y esto será
súper rápido, es probable que
ni siquiera veamos esa pantalla cuando se inicie la aplicación. Ahora aquí, creamos un componente React
regular importando react from react y allí importo cosas de React
Native, para ser precisos, necesito una vista, el indicador de
actividad para mostrar un control de carga mientras la aplicación se inicia y también hoja de
estilo y también almacenamiento asíncrono porque aquí también quiero acceder al almacenamiento asíncrono para saber
si tenemos un token válido o no.
Entonces, aquí, tengo mi componente de pantalla de inicio, que es un componente React normal y el
objeto de hoja de estilo aquí con Stylesheet. crear y, al final, podemos exportar esta pantalla de inicio de esta manera. Ahora en el componente, simplemente presentaré el
indicador de actividad aquí con un tamaño grande y un color de Colores. primaria y para eso necesitas importar esa constante de
colores, por supuesto, y también asignar un pequeño estilo aquí a la
vista y simplemente tomaré estilos. pantalla aquí que ahora podemos agregar a la hoja
de estilo y que debería ser
muy simple, flexionar una, justificar el centro de contenido y alinear el centro de elementos
para un contenido centrado vertical y horizontalmente. Ahora, por supuesto, las cosas realmente importantes suceden por
encima del código jsx, aquí es donde ahora debemos verificar el
almacenamiento asíncrono para obtener un token válido y puedo hacerlo con la ayuda del efecto de uso que
me permite ejecutar algo de lógica
aquí cuando este componente montado y de hecho aquí, no necesitaré ninguna dependencia porque aquí, dentro del efecto de uso, ahora quiero agregar una nueva función
que denominaré intentar registrarse o intentar iniciar sesión es más adecuada y uso la función separada porque aquí quiero usar
async en espera, lo que puedo hacer creando esa función interna que ahora puedo llamar aquí, intente iniciar sesión
porque nuevamente,
async aquí en esta función que pasa para usar el efecto realmente no estaría permitido y
aquí en el inicio de sesión de prueba, el
objetivo ahora es verificar el almacenamiento asíncrono para un token válido. Entonces obtengo mis datos de usuario accediendo a
AsyncStorage. getItem
y luego use la clave que usó para almacenar.
Entonces, en mi caso, se trata de datos de usuario, pero debe usar la clave que haya utilizado en su autenticación. archivo js en la carpeta de
acciones para almacenar sus datos con almacenamiento asíncrono. Así que recuperé esto y ahora lo importante que debo saber
aquí es que get item, como todos los métodos de almacenamiento asíncrono, en realidad es asíncrono, lo que significa que el
nombre sugiere, supongo, lo que significa que tienes una promesa aquí, así que podemos esperar esto
y esto nos devolverá nuestros datos de usuario.
Ahora, estos son los datos como una cadena, para convertirlos en un dato con el
que podamos trabajar, tendré mis datos transformados con JSON. analiza los datos del usuario y esto analiza una cadena
en formato JSON y la convierte en un objeto o matriz Javascript. Ahora, incluso antes de intentarlo, comprobaré si los datos del usuario no son verdaderos, de
modo
que si no están configurados, si no podemos encontrar ningún dato para esa clave porque sé que ciertamente no
hemos iniciado sesión.
Así que aquí quiero regresar y no continuar y hacer una cosa
importante, usaré la navegación de accesorios y navegaré a la pantalla de autenticación porque esta pantalla de inicio debe
agregarse al
navegador, así que aquí podemos importarla, importar la pantalla de inicio desde la carpeta de pantallas, por supuesto, la pantalla
de inicio y la agregamos al navegador principal
aquí, por lo que también tenemos autenticación y compras y allí en la parte superior, agrego inicio y apunto a mi pantalla de inicio.
Esto significa que esto es lo primero que cargo aquí.
Ahora en esta pantalla de inicio, por lo tanto, voy a la pantalla de autenticación si no podemos encontrar un
token, así que gracias al navegador de interruptores, salgo de esa pantalla y voy a la pantalla de autenticación
o a la pila de autenticación porque no encuentro una ficha. Por lo tanto, si lo superamos si se verifica, al menos tenemos algunos datos, pero el token
aún podría no ser válido.
Entonces, por supuesto, tendremos el token, el ID de usuario y la fecha de caducidad que podemos extraer de los datos transformados
después de esta línea, aquí
con esta sintaxis de desestructuración de objetos
y estos son los tres datos con los tres nombres exactamente iguales que almaceno aquí en la
autenticación. archivo js. Así
que aquí tenemos un objeto con un token, ID de usuario y
campo de fecha de vencimiento, eso
es lo que almacenamos en el almacenamiento asíncrono, eso es lo que puedo recuperar aquí.
Ahora tenemos que verificar si el token aún es
válido y para esto, puedo recrear mi fecha de vencimiento usando una nueva fecha y una fecha de vencimiento que en realidad es una cadena en formato ISO y ahora podemos
agregar un control if y ver si fecha
de vencimiento, por lo que la fecha en que el token deja de
ser válido, si es menor o igual que la nueva fecha, que es la marca de tiempo actual, lo que significa que
la fecha de vencimiento está en el pasado y si está en el pasado, entonces nuestro token no es válido.
También es inválido si no podemos encontrar un token o también si no podemos
encontrar un ID de usuario, si alguna de las tres condiciones es verdadera, tenemos un token inválido o un
ID de usuario inválido o algo así.
Entonces, en ese caso, también quiero regresar y, por supuesto,
navegar a la pantalla de autenticación. Si lo hacemos más allá de este check, tenemos
un token, tenemos un ID de usuario y el token sigue siendo válido.
Entonces, si llegas aquí, llamaré accesorios. navegación. navegar por la tienda para ir a la
pantalla de la tienda y también es importante, necesito iniciar sesión con
el usuario y para eso, necesitamos una nueva acción porque no quiero
enviar una solicitud ahora, solo quiero cambiar algunos datos en Redux. Entonces agregaré un nuevo creador de acciones
aquí, exportar autenticación constante, tal vez que tome mi ID de usuario y mi token y que luego se use para cambiar mis datos en Redux y para eso, ahora agregaré un
nuevo identificador
de acción, autenticar con una cadena de autenticar aquí y usar esto aquí como un tipo de autenticación, adjunte mi ID de usuario
que es mi ID de usuario aquí y mi token que es el token que obtengo como
argumento y ahora esta acción de autenticación es lo que quiero enviar aquí en la
pantalla de inicio.
Pero antes de hacerlo, también podemos volver al creador de la acción y al final
del registro, en lugar de enviar mi propia acción de registro personalizada aquí, también podemos enviar la autenticación y
ejecutar esto
aquí, este creador de acción y simplemente reenviar resData. localId como userId y resData. idToken como token y
hacer lo mismo al final del inicio de sesión.
Así que ahora combiné estos dos flujos porque al final sucede lo mismo, así que ahora
en el reductor, en el reductor de autenticación, por supuesto, en lugar de verificar el inicio de sesión
y el registro, simplemente podemos importar autenticar y usar este identificador aquí, deshazte de registrarte y lo comentaré para seguir
viviendo aquí como referencia porque sucede lo mismo.
Así que ahora combinarlo tiene sentido porque también lo necesitamos para este inicio de sesión automático.
Entonces aquí también lo envío aquí para el inicio de sesión manual y el registro
manual y, por supuesto, ahora con eso, si lo desea, también puede deshacerse del inicio de sesión y registrarse
aquí, de estos dos identificadores porque no úsalas más.
Pero con eso, volviendo a la pantalla de inicio, aquí también
podemos enviar esto y para eso solo necesita importar el envío de React Redux e importar la acción, así que importe todo como acciones de autenticación, tal vez
desde la carpeta de la tienda, desde el carpeta de acciones y desde el archivo de autenticación allí y luego aquí
al principio, obtenga acceso
a la función de envío llamando a use dispatch y con eso disponible, aquí podemos agregar el despacho
como una dependencia, pero esto nunca cambiará, por lo que el efecto nunca se volverá
a ejecutar y aquí después de navegar a la tienda, ahora también quiero enviar acciones de autenticación
para autenticar y reenviar el ID de usuario extraído, por lo que este campo aquí y el token extraído, por lo que este campo que obtuve
de mi almacenamiento asíncrono y que ahora debería iniciar sesión automáticamente . Eso fue mucho trabajo, veamos si
eso funciona. Si vuelvo a cargar esto, termino aquí en la pantalla de inicio de
sesión porque en este momento no tengo tokens válidos almacenados en el almacenamiento asíncrono.
Entonces, si intento iniciar sesión aquí, me reenvían, si ahora recargo, termino nuevamente aquí y eso es genial porque ahora
esto significa que esto parece funcionar y que el token está almacenado.
Ahora, por supuesto, sería bueno si también pudiéramos cerrar sesión, porque en este momento, no hay forma
de hacerlo.