Autenticación en React Native con GraphQL y Relay

18 min

autenticación de react native usando relay introducción usando la api de graphql, después de registrarse o iniciar sesión, recibirás un token de sesión que puedes usar para recuperar al usuario conectado en cualquier momento el token de sesión proviene de una mutación de relay encontrarás esos ejemplos de mutación de relay en las guías anteriores de registro o iniciar sesión el valor del token de sesión representa la sesión actual y controla si el usuario está autenticado o no en el momento de la autenticación, este valor necesita comenzar a estar en los parámetros del encabezado en relay, usamos el entorno para manejar los parámetros del encabezado, así que debes insertar el token de sesión dentro de este archivo después de agregar la sesión a los encabezados, cada solicitud será autenticada por back4app y el usuario accederá a los recursos privados en cualquier momento, puedes acceder a este proyecto a través de nuestros repositorios de github para revisar los estilos y el código completo repositorio de ejemplo en javascript objetivo autenticar las solicitudes de usuario en back4app usando el token de sesión en los parámetros del encabezado requisitos previos una aplicación creada en back4app utilizando la versión 3 10 o superior de parse server tienes que concluir el tutorial de configuración del entorno relay tienes que concluir el ejemplo de inicio de sesión de react native usando relay para este tutorial vamos a usar expo como marco de trabajo de react native; para este tutorial vamos a usar javascript como nuestro lenguaje de implementación predeterminado; para este tutorial vamos a usar async storage; 1 instalar async storage después de concluir los tutoriales registro o iniciar sesión , tu aplicación recibirá un token de sesión vamos a almacenar el token usando async storage sigue la documentación oficial para instalar la biblioteca async storage en tu aplicación puedes usar almacenamiento asíncrono, redux o tu solución de almacenamiento local preferida solo asegúrate de que este valor estará disponible en el entorno 2 recuperar el token vamos a seguir usando el código de la última guía necesitarás obtener el token de sesión y persistir este valor en tu aplicación usando async storage comienza cambiando la gestión del estado del token de sesión del hook usestate a async storage el primer paso es crear una función dentro del archivo de entorno para recuperar el token de sesión de async storage importa el almacenamiento asíncrono 1 import asyncstorage from '@react native async storage/async storage'; ahora, crea la función 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 guarda el token en el lado del cliente ahora mejoraremos el componente de inicio de sesión para persistir el token de sesión en lugar de gestionarlo utilizando el hook usestate el componente ahora mantendrá el estado de inicio de sesión incluso al recargar la aplicación porque tiene el token de sesión persistido abre el componente de inicio de sesión dentro de oncompleted de onsubmit, guarda el token de sesión en async storage obteniendo el siguiente resultado luego mejora el oncompleted 1 oncompleted async (response) => { 2 if(!response? login || response? login === null) { 3 alert('error while logging'); 4 return; 5 } 6	 7 const { viewer } = response? login; 8 const { sessiontoken, user } = viewer; 9	 10 if (sessiontoken !== null) { 11 setuserlogged(user); 12 alert(`user ${user username} successfully logged`); 13 await asyncstorage setitem('sessiontoken', sessiontoken); 14 return; 15 } 16 }, después, dentro de la declaración del componente signin, crea un nuevo usestate para el token de sesión 1 const \[sessiontoken, setsessiontoken] = usestate(null); agrega un useeffect que se llame cada vez que se monte el componente y verifica si tiene un token de sesión (importa el getsessiontoken getsessiontoken del archivo de entorno 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); por último, cambiemos nuevamente el oncompleted para manejar el nuevo usestate, obteniendo las nuevas líneas de código 1 oncompleted async (response) => { 2 if (!response? login || response? login === null) { 3 alert('error while logging'); 4 return; 5 } 6 7 const { viewer } = response? login; 8 const { sessiontoken, user } = viewer; 9 10 if (sessiontoken !== null) { 11 setsessiontoken(sessiontoken); 12 await asyncstorage setitem('sessiontoken', sessiontoken); 13 return; 14 15 } 16 }, elimina el usestate para el usuario conectado, las dos líneas a continuación de los lugares respectivos 1 const \[userlogged, setuserlogged] = usestate(null); y 1 setuserlogged(user); evitamos la alerta y comenzamos a establecer la información del usuario y el token en un usestate seguido por el almacenamiento asíncrono guardando el token cambia el if para manejar ahora el token de sesión 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 resultado final del componente signin después de todos los cambios, el componente signin será similar al de abajo 1 import react, {useeffect, usestate} from 'react'; 2 import loginmutation from ' /mutations/loginmutation'; 3 import environment, { getsessiontoken } from ' / /relay/environment'; 4 import {formikprovider, useformik} from 'formik'; 5 import { button, text, textinput, view, touchableopacity } from 'react native'; 6 import asyncstorage from '@react native async storage/async storage'; 7	 8 const signin = () => { 9 const \[sessiontoken, setsessiontoken] = usestate(null); 10	 11 useeffect(() => { 12 (async () => { 13 const st = await getsessiontoken(); 14 setsessiontoken(st); 15 })(); 16 }, \[]); 17	 18 const onsubmit = async (values) = { 19 const { username, password } = values; 20 const input = { 21 username, 22 password, 23 }; 24	 25 loginmutation commit({ 26 environment, 27 input, 28 oncompleted async (response) => { 29 if (!response? login || response? login === null) { 30 alert('error while logging'); 31 return; 32 } 33	 34 const { viewer } = response? login; 35 const { sessiontoken, user } = viewer; 36	 37 if (sessiontoken !== null) { 38 setsessiontoken(sessiontoken); 39 setuserlogged(user); 40	 41 await asyncstorage setitem('sessiontoken', sessiontoken); 42 return; 43 } 44 }, 45 onerror (errors) => { 46 alert(errors\[0] message); 47 }, 48 }); 49 }; 50	 51 const formikbag = useformik({ 52 initialvalues { 53 username '', 54 password '', 55 }, 56 onsubmit, 57 }); 58	 59 const { handlesubmit, setfieldvalue } = formikbag; 60	 61 if (sessiontoken) { 62 return ( 63 \<view style={ {margintop 15, alignitems 'center'} }> 64 \<text>user logged\</text> 65 \</view> 66 ); 67 } 68	 69 return ( 70 \<formikprovider value={formikbag}> 71 \<view style={styles login wrapper}> 72 \<view style={styles form}> 73 \<text>username\</text> 74 \<textinput 75 name={"username"} 76 style={styles form input} 77 autocapitalize="none" 78 onchangetext={(text) => setfieldvalue("username", text)} 79 /> 80 \<text>password\</text> 81 \<textinput 82 style={styles form input} 83 name={"password"} 84 autocapitalize="none" 85 securetextentry 86 onchangetext={(text) => setfieldvalue("password", text)} 87 /> 88 \<touchableopacity onpress={() => handlesubmit()}> 89 \<view style={styles button}> 90 \<text style={styles button label}>{"sign in"}\</text> 91 \</view> 92 \</touchableopacity> 93 \</view> 94 \</view> 95 \</formikprovider> 96 ); 97 }; 98	 99 export default signin; 5 pruebas es hora de probar los nuevos cambios del componente de inicio de sesión para asegurarte de que no hay ningún usuario conectado, cierra tu aplicación y ábrela de nuevo recuerda también limpiar el almacenamiento asíncrono puedes hacerlo llamando al asyncstorage clear() asyncstorage clear() método y limpiar el estado actual inicia sesión nuevamente y verás el siguiente mensaje 6 establecer el token de sesión en el entorno de relay ahora, insertemos el token de sesión en las solicitudes de la aplicación a la api graphql de back4app dentro del archivo de entorno, recupera el sessiontoken y agrégalo al objeto de encabezados debes pasar el sessiontoken en la variable x parse session token en los encabezados aquí, reutilizaremos la getsessiontoken getsessiontoken función que ya creamos crea una función antes de la fetchquery fetchquery función y pega el siguiente código 1 export const gettoken = async () => { 2 const sessiontoken = await getsessiontoken(); 3	 4 if (sessiontoken) { 5 return { 6 'x parse session token' sessiontoken, 7 }; 8 } 9	 10 return {}; 11 }; la función anterior recupera el token de sesión solo si existe ahora, agrégalo al objeto de encabezados desestructurándolo 1 const headers = { 2 accept 'application/json', 3 'content type' 'application/json', 4 'x parse application id' 'your app id here', 5 'x parse client key' 'your client key here', 6 await gettoken(), 7 }; justo debajo de los encabezados, está el try catch para hacer la solicitud establezcamos un if después de la solicitud que manejará cuando el estado http de la solicitud sea 401 esto significará que el token actual ya no es válido así que, limpiaremos el almacenamiento y mataremos al usuario actual 1 try { 2 const response = await fetch(`https //parseapi back4app com/graphql`, { 3 method "post", 4 headers, 5 body, 6 }); 7	 8 const data = await response json(); 9	 10 11 // this if will retrive the response when status code 401 and clear the session token 12 if (response status === 401) { 13 await asyncstorage getitem("sessiontoken"); 14 return; 15 } 16	 17 if (data errors) { 18 throw data errors; 19 } 20	 21 return data; 22 } catch (err) { 23 console log("err on fetch graphql", err); 24	 25 throw err; 26 } ahora, tu aplicación puede comenzar a recuperar recursos privados del backend de back4app y, si el token de sesión no existe, no se romperá porque no lo pasaremos no olvides configurar los mecanismos de seguridad para garantizar el nivel de acceso deseado para los usuarios para entender mejor, accede al enlace documentos de seguridad de parse conclusión en esta guía, has guardado el token de sesión utilizando almacenamiento asíncrono y, ahora puedes comenzar a recuperar recursos que necesitan un usuario conectado en el próximo documento, preparemos un componente que recuperará la información sobre el usuario conectado y dejaremos de usar un usestate para mostrarlo para el registro de usuario, puedes seguir el mismo enfoque de este tutorial para manejar el token de sesión