♻️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:

🔒Setting up the Xano Log in Snippet⛓️Authentication with custom backend

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.

Figma Sample: Authentication with Refresh Token

API collection's setup

To start, your app should already have login, sign-up, and user information features set up with custom backend authentication.

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.

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:

   {
     "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.

   • 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.