feat: Refresh Token for improved Session Security (#927)

* feat(api): refresh token logic

* feat(client): refresh token logic

* feat(data-provider): refresh token logic

* fix: SSE uses esm

* chore: add default refresh token expiry to AuthService, add message about env var not set when generating a token

* chore: update scripts to more compatible bun methods, ran bun install again

* chore: update env.example and playwright workflow with JWT_REFRESH_SECRET

* chore: update breaking changes docs

* chore: add timeout to url visit

* chore: add default SESSION_EXPIRY in generateToken logic, add act script for testing github actions

* fix(e2e): refresh automatically in development environment to pass e2e tests

packages/data-provider/src/request.ts

@@ -1,4 +1,69 @@
-import axios, { AxiosRequestConfig } from 'axios';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axios, { AxiosRequestConfig, AxiosError } from 'axios';
+// eslint-disable-next-line import/no-cycle
+import { refreshToken } from './data-service';
+import { setTokenHeader } from './headers-helpers';
+
+let isRefreshing = false;
+let failedQueue: { resolve: (value?: any) => void; reject: (reason?: any) => void }[] = [];
+
+const processQueue = (error: AxiosError | null, token: string | null = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) {
+      prom.reject(error);
+    } else {
+      prom.resolve(token);
+    }
+  });
+  failedQueue = [];
+};
+
+axios.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const originalRequest = error.config;
+    if (error.response.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise(function (resolve, reject) {
+          failedQueue.push({ resolve, reject });
+        })
+          .then((token) => {
+            originalRequest.headers['Authorization'] = 'Bearer ' + token;
+            return axios(originalRequest);
+          })
+          .catch((err) => {
+            return Promise.reject(err);
+          });
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+
+      return new Promise(function (resolve, reject) {
+        refreshToken()
+          .then(({ token }) => {
+            if (token) {
+              originalRequest.headers['Authorization'] = 'Bearer ' + token;
+              setTokenHeader(token);
+              window.dispatchEvent(new CustomEvent('tokenUpdated', { detail: token }));
+              processQueue(null, token);
+              resolve(axios(originalRequest));
+            } else {
+              window.location.href = '/login';
+            }
+          })
+          .catch((err) => {
+            processQueue(err, null);
+            reject(err);
+          })
+          .then(() => {
+            isRefreshing = false;
+          });
+      });
+    }
+    return Promise.reject(error);
+  },
+);
 
 async function _get<T>(url: string, options?: AxiosRequestConfig): Promise<T> {
   const response = await axios.get(url, { ...options });

packages/data-provider/src/sse.js

@@ -4,6 +4,9 @@
  * All rights reserved.
  */
 
+import { refreshToken } from './data-service';
+import { setTokenHeader } from './headers-helpers';
+
 var SSE = function (url, options) {
   if (!(this instanceof SSE)) {
     return new SSE(url, options);
@@ -102,12 +105,27 @@ var SSE = function (url, options) {
     this.close();
   };
 
-  this._onStreamProgress = function (e) {
+  this._onStreamProgress = async function (e) {
     if (!this.xhr) {
       return;
     }
 
-    if (this.xhr.status !== 200) {
+    if (this.xhr.status === 401 && !this._retry) {
+      this._retry = true;
+      try {
+        const refreshResponse = await refreshToken();
+        this.headers = {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${refreshResponse.token}`,
+        };
+        setTokenHeader(refreshResponse.token);
+        window.dispatchEvent(new CustomEvent('tokenUpdated', { detail: refreshResponse.token }));
+        this.stream();
+      } catch (err) {
+        this._onStreamFailure(e);
+        return;
+      }
+    } else if (this.xhr.status !== 200) {
       this._onStreamFailure(e);
       return;
     }