# Refresh Token

The refresh token enables your app to automatically update your access token without requiring the user to log in again. 

This token securely requests a new access token from the authentication server when needed, keeping users logged in continuously.

To get started with this tutorial, we strongly advise having user authentication already configured and installing the Log in Snippet. If you haven't configured it yet, please refer to these guides:

{% content-ref url="" %}
[](https://docs.bravostudio.app/connect-api/browse-by-backend/xano/setting-up-the-xano-log-in-snippet)
{% endcontent-ref %}

{% content-ref url="../../../../integrations/user-authentication/authentication-with-custom-backend" %}
[authentication-with-custom-backend](https://docs.bravostudio.app/integrations/user-authentication/authentication-with-custom-backend)
{% endcontent-ref %}

### Design 

For this use case, we'd recommend following this Figma file design. Find how to set up a Log in and Sign in page [here](https://docs.bravostudio.app/integrations/user-authentication/authentication-with-custom-backend#1.-setting-up-the-ui). 

{% embed url="<https://www.figma.com/design/Q1FyAaJOIdrEbl2dVGNQSa/Xano-with-refresh?node-id=0-1&t=HhjinrxZ6nt6ftoz-0>" %}
Figma Sample: Authentication with Refresh Token
{% endembed %}

### API collection's setup

To start, your app should already have login, sign-up, and user information features set up with [custom backend authentication](https://docs.bravostudio.app/integrations/user-authentication/authentication-with-custom-backend).

Additionally, ensure the snippet is installed in your Xano backend. Locate the following endpoints:

* `generate_jwt_secret`: Use this function to generate a JWT secret and set it as the environment variable.
* `/auth/token`: This endpoint contains the refresh token.

1. Run the `generate_jwt_secret` endpoint in Xano to obtain a key.&#x20;
2. Save this key in your Xano workspace environment variables. Name it `refresh_token_secret` and enter the key in the value field.
3. Now, go to your Bravo Studio's API collection page and create a new `POST` request in Bravo named `Refresh token`.
4. Paste the `/auth/token` endpoint URL into the request URL field in Bravo.
5. Add the following JSON body to the newly created request:

   ```json
   {
     "refreshToken": "${refreshToken}"
   }
   ```
6. To add test values for the refresh token, follow these steps:
   * Go to your **Login request** and click **Send**. This should return an `accessToken` and a `refreshToken`.
   * Navigate to **Debug & Inspect response**, scroll to the response body, and copy the refresh token.&#x20;
   * Paste this token into the `refreshToken` Test Values.
7. Go to your app's Integrations, scroll to the Refresh Token field, and link the Refresh Token API request from the collection.
8. Specify your preferred token expiration time in seconds.
9. The endpoint should return a variable named `accessToken`. Ensure to update the variable name in the Output Variables of the API request.
10. Finally, click on the **Save** button.

{% embed url="<https://www.loom.com/share/81676ffef6394c7ea2fb1dca4ea09bb7>" %}