JWT Token with Expiry Flow - User Consent

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.

You can also watch our detailed video on How to do a JWT Authentication in DronaHQ.

For this use case, the user is landed on the dashboard page, where 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. The user is then redirected to the login page and asked to enter the credentials. If the credentials are valid, a new token is fetched from the Login Endpoint and the user is granted access to the dashboard page.

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. Edit this newly created API Connector and now you can make the email and password fields dynamic by creating variables wrapped inside double curly braces.

  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 create 2 screens, one for login and one for dashboard.
The login screen contains 2 text fields to collect the email and password from the user, one sign in button which will retrieve the JWT token and navigate the user to the dashboard screen if the credentials are valid.

The dashboard screen contains a TableGrid control to display the data accessed from the REST API.

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 as blank.

6

Sign In Button - Click Action (Login Screen)

  1. Connect the REST API responsible for fetching the JWT Token. Pass the credentials obtained from the textfields into this API call.


 

  1. Create a variable to store the authentication token received from 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. Add the REST API Connector which will retrieve the resources or data from the Xano’s Endpoint. In the field of Authorization pass the authToken received from the previous REST API call.


 

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


 

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


 

  1. Now connect the Navigate Action onto the API’s success branch and set the Navigate To option to Main Screen.


 

The Action Flow should look like this


 

Screen Open Action (Dashboard Screen)

  1. Add the REST API Connector which will retrieve the resources or data from the Xano’s Endpoint. In the field of Authorization pass the persistent authToken variable created.


 

  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. So to handle this scenario, connect a navigation control to the error branch of the REST API which will take the user to the login screen.


 

The Action Flow should look like this.


 

After successful login, the dashboard screen will look something like this.