# 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="/pages/p2CSlrruHANEOWOpU7Vz" %}
[Setting up the Xano Log in Snippet](/connect-api/browse-by-backend/xano/setting-up-the-xano-log-in-snippet.md)
{% endcontent-ref %}

{% content-ref url="/pages/Sv4cxwDosZQRrsbvH2Vb" %}
[Authentication with custom backend](/integrations/user-authentication/authentication-with-custom-backend.md)
{% 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](/integrations/user-authentication/authentication-with-custom-backend.md).

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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bravostudio.app/connect-api/browse-by-backend/xano/setting-up-the-xano-log-in-snippet/refresh-token.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.