JWT Token - Server Side Generation

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.

For this use case, we will fetch a JWT Token from the Login Endpoint and then use that token to access resources from the Data Endpoint. 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. Select the REST API Connector responsible for retrieving the JWT Token from the Xano 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 select the REST API Connector which will retrieve the resources or data from the Xano Endpoint. In the field of Authorization pass the authToken received from the previous REST API Connector.


 

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


 

  1. Now the only thing left is to bind the response data received from the REST API to TableGrid Control, so add the Set Control Value Action to the REST API’s success branch.


 

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