Baserow and Appsmith Integration Using JWT Tokens

Goal

Prerequisites

Overview

1. Set Up Authorization Endpoint

   The authorization endpoint validates users based on their Baserow email and password, allowing entry only to authorized individuals. Upon successful verification, the endpoint provides two essential tokens:

   • Access Token: Your temporary passport for immediate entry, granting access to Baserow's APIs for a limited time.
   • Refresh Token: Your renewal ticket, allowing you to obtain fresh access tokens when needed, keeping your connection active and secure.

   To enable secure access and build a reliable connection between Appsmith and Baserow, follow these steps to set up the authorization endpoint. 

   1. In Appsmith, create a new blank API in Appsmith named api_authToken 
   2. Set the method to POST and URL to https://api.baserow.io/api/user/token-auth/ 

   3. Provide your Baserow email and password in the body (JSON format). 

      {
         "email": "your_baserow_email@example.com",
         "password": "your_secure_password"
      }

   4. Click Run to test the API and ensure it generates tokens successfully.

2. Create JS Object for Token Management

   This JS Object will play a pivotal role in generating and storing tokens for seamless integration between Appsmith and Baserow. The Appsmith store will be used to store both the access and refresh tokens, along with the expiry information for the access token.

   1. Create a new JS Object named js_manage_tokens

   2. Add code to:

      - Generate access tokens

      generateAccessToken() {
                         //call the authorization api to generate a token
                         const generatedToken = api_authToken.data;
                         if (generatedToken) {
                             //call the store method to add the generated token to the Appsmith store
                             this.storeTokenInAppsmithStore(generatedToken.access_token, generatedToken.refresh_token);
                          }
                       }

      - Store tokens and expiry in Appsmith's store

      storeTokenInAppsmithStore(accessToken, refreshToken) {
          // add the access token, refresh token, and expiry of the access token in the store
          //using the storeValue() function
          storeValue("authAccessToken", accessToken);
          storeValue("authRefreshToken", refreshToken);
          storeValue("authAccessTokenExp", this.getTokenExpiry(accessToken));
        },
       getTokenExpiry(token) {
           try {
                   return JSON.parse(atob(token.split('.')[1])).exp;  
            } catch (error) {
                 console.error('Error decoding token:', error);
                 return null; 
            }
       }

   3. Run the generateAccessToken() function to verify the response. 

3. Add Refresh Token Endpoint

   Create an additional blank API to interface with the Baserow refresh token endpoint. This refresh token API will handle the generation of tokens when an authentication token expires. 

   1. Create a new blank API named api_refreshAuthToken
   2. Set the method to POST and URL to https://api.baserow.io/api/user/token-refresh/

   3. Provide the refresh token from the store in the body (JSON format):

      {
          "refresh_token":{{appsmith.store.authRefreshToken}}
      }

   4. Click Run to test the API and ensure it refreshes tokens successfully.

4. Update JS Object for refresh endpoint

   Let's add more capabilities to the JS object, like verifying the access token expiry, refreshing tokens, and a main method to handle over all logic for generating, validating, and refreshing tokens. Add the below code to the js_manage_tokens JS object.

   • Verify token expiry

     verifyAccessToken() {
       //verify the token expiry by accessing the token expiry date from the store and comparing it with the current timestamp
        return moment().utc() > moment().utc(appsmith.store.authAccessTokenExp);
     }

   • Refresh tokens

     refreshAccessToken() {
       // call to 
       const refreshToken = api_refreshAuthToken.data;
       if (refreshToken) {
         // update the Appsmith store with the new access and refresh tokens
         this.storeTokenInAppsmithStore(refreshToken.access_token, refreshToken.refresh_token);
       } else {
         console.error('Failed to refresh access token');
       }
     }

   • Handle overall logic

     getAccessToken() {
         // verify if the access token is present in the Appsmith store
         if (appsmith.store.authAccessToken) {
             // verify if the token expiry
             if (this.verifyAccessToken()) {
                 //refresh the token
                 this.refreshAccessToken();
             } else {
                 //generate an access token
                 this.generateAccessToken();
             }
         }
         // return the access token from Appsmith store
         return appsmith.store.authAccessToken;
     }

5. Bind JS Object to Baserow APIs

   Now, you're ready to configure and execute Baserow APIs that require JWT authorization. Let's integrate the list_database_table_fields API designed to list all table fields. To do this, create a new API on Appsmith, configure the authorization header, and set the JWT access token from the Appsmith store as its value.

   • Choose a Baserow API you want to execute. For example, list table fields.
   • Create a new API in Appsmith and name it appropriately. For example, api_listTableFields.
   • Set the method and URL based on the Baserow API you chose.

   • For the authorization header, add:

     Key: Authorization 
     Value: JWT {{js_manage_tokens.getAccessToken.data}}

   • This ensures your API call uses the valid access token secured by the JS object.
   • Bind the newly created API to Table widget to visualize data.

6. Congratulations! Execute the requests, and you'll see your Baserow data seamlessly integrated into your Appsmith application. Securely leverage both platforms to build robust applications.

7. Bonus Tips

   • Trailing Slashes for Baserow APIs: When working with Baserow APIs, ensure that your URLs end with a trailing slash. For example,  https://api.baserow.io/api/database/fields/table/. Baserow expects valid URLs to have this trailing slash, and omitting it result in errors.

Conclusion

Additional Resources