User Authentication

react native authentication using relay introduction using the graphql api, after signing up or logging a user in, you will receive a session token that you can use to retrieve the logged user at any time the session token comes from a relay mutation you will find those relay mutation examples on the previous guides of sign up or log in the session token value represents the current session and controls if the user is authenticated or not at the moment of authentication, this value needs to start to be on header params on relay, we use the environment to handle the header params, so you should insert the session token inside this file after adding the session to the headers, each request will be authenticated by back4app and, the user will access the private resources at any time, you can access this project via our github repositories to checkout the styles and complete code javascript example repository goal authenticate the user requests on back4app using the session token on header params prerequisites an app created at back4app using the parse server version 3 10 or above you have to conclude the relay environment setup tutorial you have to conclude the react native login sample using relay for this tutorial we are going to use the expo as a react native framework; for this tutorial we are going to use javascript as our default implementation language; for this tutorial we are going to use async storage; 1 install async storage after conclude the tutorials sign up or log in , your app will receive a session token let’s store the token using the async storage follow the official docs to install the async storage lib on your app you can use async storage, redux, or your preferred local storage solution you only make sure that this value will be available in the environment 2 retrieve the token let’s go ahead using the last guide code you’ll need to get the session token and persist this value in your application using async storage start by changing the session token state management from usestate hook to async storage the first step is to create a function inside of the environment file to retrieve the session token from async storage import the async storage 1 import asyncstorage from '@react native async storage/async storage'; now, create the function 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 save the token on the client side let’s now improve the sign in component to persist the session token instead of managing it using the usestate hook the component will now keep the logged in state even when reloading the app because it has the session token persisted open the sign in component inside of the oncompleted from onsubmit, saving the session token on async storage getting the following result then improve the oncompleted 1 oncompleted async (response) => { 2 if(!response? login || response? login === null) { 3 alert('error while logging'); 4 return; 5 } 6&#x9; 7 const { viewer } = response? login; 8 const { sessiontoken, user } = viewer; 9&#x9; 10 if (sessiontoken !== null) { 11 setuserlogged(user); 12 alert(`user ${user username} successfully logged`); 13 await asyncstorage setitem('sessiontoken', sessiontoken); 14 return; 15 } 16 }, after, inside of the signin component declaration, create a new usestate for the session token 1 const \[sessiontoken, setsessiontoken] = usestate(null); add a useeffect to be called every time that the component is mounted and check if has a session token (import the getsessiontoken getsessiontoken from environment file 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); by last, let’s change again the oncompleted for now handle the new usestate, getting the new lines of code 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 }, remove the usestate for user logged, the both lines below from respective places 1 const \[userlogged, setuserlogged] = usestate(null); and 1 setuserlogged(user); we avoid the alert and start to set the info of the user and the token in a usestate followed by the async storage saving the token changes the if to handle now the session token 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 final result of signin component after all changes, the signin component will be similar to the below 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&#x9; 8 const signin = () => { 9 const \[sessiontoken, setsessiontoken] = usestate(null); 10&#x9; 11 useeffect(() => { 12 (async () => { 13 const st = await getsessiontoken(); 14 setsessiontoken(st); 15 })(); 16 }, \[]); 17&#x9; 18 const onsubmit = async (values) = { 19 const { username, password } = values; 20 const input = { 21 username, 22 password, 23 }; 24&#x9; 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&#x9; 34 const { viewer } = response? login; 35 const { sessiontoken, user } = viewer; 36&#x9; 37 if (sessiontoken !== null) { 38 setsessiontoken(sessiontoken); 39 setuserlogged(user); 40&#x9; 41 await asyncstorage setitem('sessiontoken', sessiontoken); 42 return; 43 } 44 }, 45 onerror (errors) => { 46 alert(errors\[0] message); 47 }, 48 }); 49 }; 50&#x9; 51 const formikbag = useformik({ 52 initialvalues { 53 username '', 54 password '', 55 }, 56 onsubmit, 57 }); 58&#x9; 59 const { handlesubmit, setfieldvalue } = formikbag; 60&#x9; 61 if (sessiontoken) { 62 return ( 63 \<view style={ {margintop 15, alignitems 'center'} }> 64 \<text>user logged\</text> 65 \</view> 66 ); 67 } 68&#x9; 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&#x9; 99 export default signin; 5 testing it’s time to test the new changes of sign in component to make sure there is no one user logged in, kill your application and open again remember also to clear the async storage you can do it calling the asyncstorage clear() asyncstorage clear() method and clear the actual state log in again and you will see the following message 6 set the session token on relay environment now, let’s insert the session token on the application’s requests to back4app graphql api inside of the environment file, retrieve the sessiontoken and add it to the headers object you should pass the sessiontoken on the variable x parse session token on the headers here, we will reuse the getsessiontoken getsessiontoken function we already created create a function before the fetchquery fetchquery function and paste the following code 1 export const gettoken = async () => { 2 const sessiontoken = await getsessiontoken(); 3&#x9; 4 if (sessiontoken) { 5 return { 6 'x parse session token' sessiontoken, 7 }; 8 } 9&#x9; 10 return {}; 11 }; the function above retrieve the session token only if it exists now, add it to the headers object deconstructing it 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 }; right below of headers, there is the try catch for make the request let’s set an if after the request that will handle when the http status of the request will be 401 this will mean that the actually token is not valid anymore so, we will clear the storage and kill the current user 1 try { 2 const response = await fetch(`https //parseapi back4app com/graphql`, { 3 method "post", 4 headers, 5 body, 6 }); 7&#x9; 8 const data = await response json(); 9&#x9; 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&#x9; 17 if (data errors) { 18 throw data errors; 19 } 20&#x9; 21 return data; 22 } catch (err) { 23 console log("err on fetch graphql", err); 24&#x9; 25 throw err; 26 } now, your application can start to retrieve private resources from the back4app backend and, if the session token does not exist, won’t break because we won’t pass it do not forget to configure the security mechanisms to guarantee the desired level of access for users to better understand access the link security docs from parse conclusion in this guide, you have saved the session token using async storage and, now can start to retrieve resources that need a user logged in the next doc, let’s prepare a component that will retrieve the info about the user logged and stop using a usestate to show it for user signup you can follow the same approach of this tutorial to handle the session token