JWT token refresh issue fixed (#580)

* VERSION updated to v7.0.0-rsbc-v0.3.8 (#75)

Co-authored-by: divyav-aot <divyav-aot@github>

* JWT token refresh issue fixed (#76)

* formioToken refresh integrated with KeycloakService.

* made updateJwtToken public static to access in offlineSubmissions.

* VERSION updated to v7.0.0-rsbc-v0.3.9

* proper comments added

* reverted some changes with constants.ts

---------

Co-authored-by: divyav-aot <divyav-aot@github>

---------

Co-authored-by: divyav-aot <divyav-aot@github>

Author: divyav-aot

VERSION

@@ -1 +1 @@
-v7.0.0-rsbc-v0.3.8
+v7.0.0-rsbc-v0.3.9

forms-flow-rsbcservice/src/services/offlineSubmissions.ts

@@ -27,8 +27,10 @@ class OfflineSubmissions {
    */
   public static async processOfflineSubmissions(): Promise<void> {
     try {
+      // Access and JWT token refresh before processing the drafts and submissions
       await this.retryToken();
-
+      await KeycloakService.updateJwtToken();
+      
       const submissions =
         await OfflineFetchService.fetchAllNonActiveOfflineSubmissions();
       const processPromises = [

forms-flow-service/src/constants/constants.ts

@@ -15,10 +15,22 @@ export const MULTITENANCY_ENABLED =
 
 //application details
 export const APPLICATION_NAME =
-        (window as any).REACT_APP_APPLICATION_NAME || "roadsafety"
-        // "formsflow.ai";
+  (window as any)._env_?.REACT_APP_APPLICATION_NAME ?? "formsflow.ai";
 
 // Used in encyrpting and decrypting the token from local storage.
-export const TOKEN_ENCRYPTION_KEY =
-        (window as any).REACT_APP_TOKEN_ENCRYPTION_KEY ||
-        "8f4a4e01b639aa73d2b5bdb6e9f2e6aef471b3dbba3d5e48e3a798fc3d6d6cbb";
+export const TOKEN_ENCRYPTION_KEY = (window as any)._env_
+  ?.REACT_APP_TOKEN_ENCRYPTION_KEY;
+
+//default value for FORMIO_JWT_EXPIRE
+export const DEFAULT_FORMIO_JWT_EXPIRE = 240;
+
+// Used for jwt token refresh.
+export const FORMIO_JWT_EXPIRE =
+  (window as any)._env_?.REACT_APP_FORMIO_JWT_EXPIRE ??
+  DEFAULT_FORMIO_JWT_EXPIRE;
+
+export const WEB_BASE_URL =
+  (window as any)._env_?.REACT_APP_WEB_BASE_URL ?? "http://localhost:5000";
+export const API = {
+  FORMIO_ROLES: `${WEB_BASE_URL}/formio/roles`,
+};

forms-flow-service/src/keycloak/KeycloakService.ts

@@ -7,10 +7,13 @@ import StorageService from "../storage/storageService";
 import HelperServices from "../helpers/helperServices";
 import {
   APPLICATION_NAME,
-  APP_BASE_ROUTE
+  APP_BASE_ROUTE,
+  DEFAULT_FORMIO_JWT_EXPIRE,
+  FORMIO_JWT_EXPIRE,
 } from "../constants/constants";
+import { getUpdatedJwtToken } from "../request/jwtTokenService";
 
-  class KeycloakService {
+class KeycloakService {
     /**
      * Used to create Keycloak object
      */
@@ -20,8 +23,9 @@ import {
     private token: string | undefined;
     private _tokenParsed: KeycloakTokenParsed | undefined;
     private timerId: any = 0;
-    private userData: any
-    private isInitialized: boolean = false;  // Track if Keycloak is initialized
+    private static jwtTimerId: any = 0;
+    private userData: any;
+    private isInitialized: boolean = false; // Track if Keycloak is initialized
 
     private constructor(url: string, realm: string, clientId: string, tenantId?: string) {
       this._keycloakConfig = {
@@ -166,6 +170,87 @@ import {
     this.keycloackUpdateToken();
     };
 
+    /**
+     * Extracts the JWT token from the response headers and saves it 
+     * to local storage for future authenticated requests.
+     * 
+     * @param response - The HTTP response containing the JWT token in headers.
+     */
+    private static saveJwtToken(response: any): void {
+      const jwtToken = response.headers["x-jwt-token"];
+      if (jwtToken) {
+        StorageService.save(StorageService.User.FORMIO_TOKEN, jwtToken);
+      }
+    }
+
+    /**
+     * Fetches a new JWT token using the `getUpdatedJwtToken()` method and 
+     * stores it using `saveJwtToken()`. This is useful for refreshing
+     * the token periodically or on session extension.
+     */
+    public static async updateJwtToken(): Promise<void> {
+      try {
+        const response = await getUpdatedJwtToken();
+        if (response) {
+          this.saveJwtToken(response);
+        }
+      } catch (error) {
+        console.error("Failed to update JWT token", error);
+      }
+    }
+
+    /**
+     * Stops the polling mechanism for refreshing the JWT token
+     * by clearing the interval timer.
+     */
+    private static clearPolling(): void {
+      if (this.jwtTimerId) {
+        clearInterval(this.jwtTimerId);
+        this.jwtTimerId = 0;
+        console.log("Polling stopped.");
+      }
+    }
+
+
+    /**
+     * Starts a background polling mechanism to refresh the JWT token periodically before it expires.
+     *
+     * - Retrieves the JWT expiration interval from the environment/config (`FORMIO_JWT_EXPIRE`).
+     * - If the value is invalid or missing, falls back to a default (`DEFAULT_FORMIO_JWT_EXPIRE`).
+     * - Adds a small buffer (2 seconds) to ensure the token is refreshed slightly before actual expiration.
+     * - Clears any existing polling interval before starting a new one.
+     * - Sets up a `setInterval` that checks for online status and asynchronously refreshes the JWT token.
+     * - If `skipTimer` is true or the application is not `"roadsafety"`, the interval is set to 0 (executes immediately).
+     *
+     * @param skipTimer - If true, bypasses the default interval check (used for forced/immediate refresh).
+    */
+    private static refreshJwtToken(skipTimer: boolean = false): void {
+      const parsedValue = Number(FORMIO_JWT_EXPIRE);
+      const jwtExpireMinutes = isNaN(parsedValue)
+        ? DEFAULT_FORMIO_JWT_EXPIRE
+        : parsedValue;
+
+      // 2 seconds buffer (2000 ms)
+      const checkInterval = jwtExpireMinutes * 60 * 1000 - 2000;
+
+      this.clearPolling(); // Clear previous interval before starting new
+
+      this.jwtTimerId = setInterval(
+        () => {
+          (async () => {
+            if (!navigator.onLine) {
+              console.debug("Offline: Skipping token refresh.");
+              return;
+            }
+            await this.updateJwtToken();
+          })(); // Async IIFE inside setInterval
+        },
+        !skipTimer && APPLICATION_NAME === "roadsafety" ? checkInterval : 0
+      );
+      console.log(
+        `JWT polling started with interval: ${checkInterval} ms (${jwtExpireMinutes} minutes - 2 seconds)`
+      );
+    }
 
     /**
      *
@@ -218,6 +303,7 @@ import {
                   "online",
                   () => {
                     this.retryTokenRefresh(); // This will be executed when the 'online' event occurs
+                    KeycloakService.updateJwtToken();
                   },
                   { once: false }
                 );
@@ -235,6 +321,7 @@ import {
                 callback(true);
               });
               this.refreshToken();
+              KeycloakService.refreshJwtToken();
               }
             }
               else {
@@ -254,6 +341,7 @@ import {
      */
     public userLogout (): void {
       this.isInitialized = false; // Reset initialization state
+      KeycloakService.clearPolling();
       StorageService.clear();
       this.logout();
     }

forms-flow-service/src/request/jwtTokenService.ts

@@ -0,0 +1,25 @@
+import RequestService from "./requestService";
+import { API } from "../constants/constants";
+
+export const getUpdatedJwtToken = async (): Promise<any> => {
+  try {
+    const response = await RequestService.httpGETRequest(
+      API.FORMIO_ROLES,
+      null,
+      null
+    );
+    if (response) {
+      return response;
+    } else {
+      console.log(`No user roles found!`);
+      return null;
+    }
+  } catch (error: any) {
+    if (error?.response?.data) {
+      console.log(error.response.data?.message);
+    } else {
+      console.log(`Failed to fetch user roles!`);
+    }
+    throw error;
+  }
+};

forms-flow-service/src/storage/storageService.ts

@@ -2,9 +2,10 @@ enum User {
     AUTH_TOKEN = "AUTH_TOKEN",
     USER_DETAILS = "USER_DETAILS",
     USER_ROLE = "USER_ROLE",
-    REFRESH_TOKEN = "REFRESH_TOKEN"
+    REFRESH_TOKEN = "REFRESH_TOKEN",
+    FORMIO_TOKEN = "formioToken",
   }
-  
+
   class StorageService {
     public static readonly User = User;
     /**
@@ -23,7 +24,9 @@ enum User {
      * @param value
      */
     public static save(key: string, value: string): void {
-      sessionStorage.setItem(key, value);
+      if (key !== this.User.FORMIO_TOKEN) {
+        sessionStorage.setItem(key, value);
+      }
       localStorage.setItem(key,value);
     }
     /**