JWT Token with Expiry Flow

We are already aware of using the REST API with different authentication methods like OAuth 2.0, API keys, and so on. In this article, we are going to implement the JWT Token Authentication.

In this use case, a resource request is sent to the Data Endpoint using the existing JWT Token stored in a variable. However, if the JWT token is no longer valid or has expired, the resource request fails. To handle this error, the token needs to be refreshed which is done by fetching a new token from the Login Endpoint. The requested data/resource is then binded onto the TableGrid Control.

This tutorial uses Xano’s API endpoints. This tutorial uses Xano’s API endpoints. The JWT Token we are using has a expiry of 60 seconds.

REST API Connector Configuration

  1. Set the Authentication to None
  2. Copy the /auth/login endpoint from Xano and paste it in the connector’s url section and set the http method to POST.
  3. Pass Raw JSON containing the valid user credentials to receive the JWT Token.

  1. Now add one more API to this connector, this will request data from Xano’s resource endpoint.
  2. Add a new header Authorization which will take the JWT Token as input.

App Builder

For this use case, we will use the Screen Open Action to trigger data retrieval from the REST API. To display the data accessed from the REST API, we are using the TableGrid Control.


 

  1. Go to the Variables section and create a new variable with type Persistent which will store the JWT Token, in our case the variable is authToken. Leave the default value field blank.

6
 

  1. Select the REST API Connector which will retrieve the resources or data from the Xano Endpoint. In the field of Authorization pass the authToken variable. The request to the API will fail if the authToken is invalid or expired.
     


 

  1. Add a variable which will hold the response sent by the REST API, in our case the variable is data.


 

  1. Add the Set Control Value Action to the REST API’s success branch to bind the response data received to the TableGrid Control.


 

  1. If the token stored in authToken variable has expired or is invalid, the REST API will return a 401 status code. To handle this error, add a new REST API connector which will request the JWT Token from Xano’s Login Endpoint.


 

  1. Create a variable to store the authentication token received in the API’s response, in our case it is authToken. Make sure you select output.authToken while assigning the value to the variable as it will destructure and return only the authToken value to it.


 

  1. Now assign the API output token to the variable authToken created earlier.


 

  1. Now repeat the steps 2, 3 and 4

The App’s Action Flow should look like this


 

Run the App and you will see that the API data is automatically loaded onto the TableGrid.