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.

Authenticate the user requests on Back4App using the session token on header params.

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.

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:

Now, create the function:

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:

After, inside of the SignIn component declaration, create a new useState for the session token:

Add a useEffect to be called every time that the component is mounted and check if has a session token (import thegetSessionTokenfrom environment file:

By last, let’s change again the onCompleted for now handle the new useState, getting the new lines of code:

Remove the useState for user logged, the both lines below from respective places:

and

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.

After all changes, the SignIn component will be similar to the below.

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.

Log in again and you will see the following message.

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 function we already created.

Create a function before the fetchQuery function and paste the following code:

The function above retrieve the session token only if it exists. Now, add it to the headers object deconstructing it.

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:

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.

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.