feat: implement client ID management and request context handling

Author: NoOne7135

adminforth/documentation/docs/tutorial/09-Plugins/02-TwoFactorsAuth.md

@@ -237,6 +237,8 @@ If you wan't to call 2FA verification modal from the backend for verification, y
 t2fa.verifyAuto(adminUser);
 ```
 This method opens 2FA verification modal at the frontend and then returns verification result.
+The modal is shown only in the same browser tab/window which made the backend request.
+Because of this, `verifyAuto` must be called from a browser-initiated request handled by AdminForth request context, for example from an endpoint wrapped with `admin.express.authorize`.
  
 Here is an example:
 
@@ -932,4 +934,3 @@ After adding passkey you can use passkey, instead of TOTP:
 
 
 
-

adminforth/index.ts

@@ -48,6 +48,7 @@ export * from './types/Back.js';
 export * from './types/Common.js';
 export * from './types/adapters/index.js';
 export * from './modules/filtersTools.js';
+export * from './modules/requestContext.js';
 export { interpretResource };
 export { AdminForthPlugin };
 export { suggestIfTypo, RateLimiter, RAMLock, getClientIp, convertPeriodToSeconds };

adminforth/modules/requestContext.ts

@@ -0,0 +1,21 @@
+import { AsyncLocalStorage } from 'async_hooks';
+
+export const ADMINFORTH_CLIENT_ID_HEADER = 'x-adminforth-client-id';
+
+export type AdminForthRequestContext = {
+  websocketClientId?: string;
+};
+
+const requestContextStorage = new AsyncLocalStorage<AdminForthRequestContext>();
+
+export function runWithRequestContext<T>(context: AdminForthRequestContext, callback: () => T): T {
+  return requestContextStorage.run(context, callback);
+}
+
+export function getRequestContext(): AdminForthRequestContext | undefined {
+  return requestContextStorage.getStore();
+}
+
+export function getRequestWebsocketClientId(): string | undefined {
+  return requestContextStorage.getStore()?.websocketClientId;
+}

adminforth/servers/common.ts

@@ -5,6 +5,7 @@ import { AdminUser } from "../types/Common.js";
 
 export class WebSocketClient implements IWebSocketClient {
   id: string;
+  clientId?: string;
   lastPing: number;
   topics: Set<string>;
   adminUser: AdminUser;
@@ -14,8 +15,9 @@ export class WebSocketClient implements IWebSocketClient {
   onMessage: (handler: (message: string) => void) => void;
   onClose: (handler: () => void) => void;
 
-  constructor({ id, send, close, onMessage, onClose, adminUser }) {
+  constructor({ id, clientId, send, close, onMessage, onClose, adminUser }) {
     this.id = id;
+    this.clientId = clientId;
     this.send = send;
     this.close = close;
     this.onMessage = onMessage;
@@ -25,4 +27,4 @@ export class WebSocketClient implements IWebSocketClient {
     this.topics = new Set();
     this.adminUser = adminUser;
   }
-}
+}

adminforth/servers/express.ts

@@ -23,6 +23,7 @@ import type { AddressInfo } from 'net';
 import { randomUUID } from 'crypto';
 import { listify } from '../modules/utils.js';
 import { afLogger } from '../modules/logger.js';
+import { ADMINFORTH_CLIENT_ID_HEADER, runWithRequestContext } from '../modules/requestContext.js';
 import * as z from 'zod';
 import multer from 'multer';
 
@@ -52,6 +53,11 @@ function parseCookiesString(cookiesString: string): Array<{
   return result;
 }
 
+function getHeaderString(headers: Record<string, any>, name: string): string | undefined {
+  const value = headers[name];
+  return typeof value === 'string' ? value : undefined;
+}
+
 async function parseExpressCookie(req): Promise<
   Array<{
     key: string, 
@@ -271,6 +277,7 @@ class ExpressServer implements IExpressHttpServer {
         this.adminforth.websocket.registerWsClient(
           new WebSocketClient({
             id: randomUUID(),
+            clientId: typeof req.url === 'string' ? new URL(req.url, 'http://localhost').searchParams.get('clientId') || undefined : undefined,
             adminUser,
             send: (data) => ws.send(data),
             close: () => ws.close(),
@@ -287,6 +294,11 @@ class ExpressServer implements IExpressHttpServer {
 
   serve(app) {
     this.expressApp = app;
+    this.expressApp.use((req, res, next) => {
+      runWithRequestContext({
+        websocketClientId: getHeaderString(req.headers, ADMINFORTH_CLIENT_ID_HEADER),
+      }, next);
+    });
     this.patchSchemaAwareRouteRegistration();
     this.flushPendingEndpointRegistrations();
     const stack = (this.expressApp as any)?._router?.stack;
@@ -337,55 +349,63 @@ class ExpressServer implements IExpressHttpServer {
       }
     }
   }
+
+  runInRequestContext(req, callback) {
+    return runWithRequestContext({
+      websocketClientId: getHeaderString(req.headers, ADMINFORTH_CLIENT_ID_HEADER),
+    }, callback);
+  }
 
 
   authorize(handler) {
     return async (req, res, next) => {
-      const cookies = await parseExpressCookie(req);
-      const brandSlug = this.adminforth.config.customization.brandNameSlug;
-      // check if multiple adminforth_jwt providerd and show warning
-      const jwts = cookies.filter(({key}) => key === `adminforth_${brandSlug}_jwt`);
-      if (jwts.length > 1) {
-        afLogger.error('Multiple adminforth_jwt cookies provided');
-      }
+      return this.runInRequestContext(req, async () => {
+        const cookies = await parseExpressCookie(req);
+        const brandSlug = this.adminforth.config.customization.brandNameSlug;
+        // check if multiple adminforth_jwt providerd and show warning
+        const jwts = cookies.filter(({key}) => key === `adminforth_${brandSlug}_jwt`);
+        if (jwts.length > 1) {
+          afLogger.error('Multiple adminforth_jwt cookies provided');
+        }
 
-      const jwt = jwts[0]?.value;
+        const jwt = jwts[0]?.value;
 
-      if (!jwt) {
-        res.status(401).send('Unauthorized by AdminForth');
-        return
-      }
-      let adminforthUser;
-      try {
-        adminforthUser = await this.adminforth.auth.verify(jwt, 'auth');
-      } catch (e) {
-        // this might happen if e.g. database intialization in progress.
-        // so we can't answer with 401 (would logout user)
-        // reproduced during usage of listRowsAutoRefreshSeconds
-        afLogger.error(e.stack);
-        res.status(500).send('Failed to verify JWT token - something went wrong');
-        return;
-      }
-      if (!adminforthUser) {
-        res.status(401).send('Unauthorized by AdminForth');
-      } else {
-        req.adminUser = adminforthUser;
-        const toReturn: { error?: string, allowed: boolean } = { allowed: true };
-        await this.processAuthorizeCallbacks(adminforthUser, toReturn, res, {
-          body: req.body,
-          query: req.query,
-          headers: req.headers,
-          cookies: cookies as any,
-          requestUrl: req.url,
-          meta: {},
-          response: res
-        });
-        if (!toReturn.allowed) {
+        if (!jwt) {
+          res.status(401).send('Unauthorized by AdminForth');
+          return
+        }
+        let adminforthUser;
+        try {
+          adminforthUser = await this.adminforth.auth.verify(jwt, 'auth');
+        } catch (e) {
+          // this might happen if e.g. database intialization in progress.
+          // so we can't answer with 401 (would logout user)
+          // reproduced during usage of listRowsAutoRefreshSeconds
+          afLogger.error(e.stack);
+          res.status(500).send('Failed to verify JWT token - something went wrong');
+          return;
+        }
+        if (!adminforthUser) {
           res.status(401).send('Unauthorized by AdminForth');
         } else {
-          handler(req, res, next);
+          req.adminUser = adminforthUser;
+          const toReturn: { error?: string, allowed: boolean } = { allowed: true };
+          await this.processAuthorizeCallbacks(adminforthUser, toReturn, res, {
+            body: req.body,
+            query: req.query,
+            headers: req.headers,
+            cookies: cookies as any,
+            requestUrl: req.url,
+            meta: {},
+            response: res
+          });
+          if (!toReturn.allowed) {
+            res.status(401).send('Unauthorized by AdminForth');
+          } else {
+            handler(req, res, next);
+          }
         }
-      }
+      });
     };
   }
 
@@ -590,7 +610,7 @@ class ExpressServer implements IExpressHttpServer {
       })
       : null;
 
-    const expressHandler = async (req, res) => {
+    const expressHandler = async (req, res) => this.runInRequestContext(req, async () => {
       const abortController = new AbortController();
       res.on('close', () => {
         if(req.destroyed) {
@@ -718,7 +738,7 @@ class ExpressServer implements IExpressHttpServer {
       }
 
       res.json(output);
-    }
+    });
 
     const registerEndpoint = () => {
       afLogger.trace(`👂 Adding endpoint ${method} ${fullPath}`);

adminforth/spa/src/utils/clientId.ts

@@ -0,0 +1,14 @@
+const ADMINFORTH_CLIENT_ID_STORAGE_KEY = 'adminforthClientId';
+
+export const ADMINFORTH_CLIENT_ID_HEADER = 'x-adminforth-client-id';
+
+export function getAdminForthClientId(): string {
+  const existingClientId = sessionStorage.getItem(ADMINFORTH_CLIENT_ID_STORAGE_KEY);
+  if (existingClientId) {
+    return existingClientId;
+  }
+
+  const clientId = crypto.randomUUID();
+  sessionStorage.setItem(ADMINFORTH_CLIENT_ID_STORAGE_KEY, clientId);
+  return clientId;
+}

adminforth/spa/src/utils/utils.ts

@@ -13,6 +13,7 @@ import { i18nInstance } from '../i18n'
 import { useI18n } from 'vue-i18n';
 import { onBeforeRouteLeave } from 'vue-router';
 import { reconnect } from '@/websocket';
+import { ADMINFORTH_CLIENT_ID_HEADER, getAdminForthClientId } from './clientId';
 
 
 
@@ -133,6 +134,7 @@ export async function callApi({path, method, body, headers, silentError = false,
     headers: {
       'Content-Type': 'application/json',
       'accept-language': localStorage.getItem(LS_LANG_KEY) || 'en',
+      [ADMINFORTH_CLIENT_ID_HEADER]: getAdminForthClientId(),
       ...headers
     },
     body: JSON.stringify(body),
@@ -993,4 +995,4 @@ export async function executeCustomBulkAction({
   } finally {
     setLoadingState?.(false);
   }
-}
+}

adminforth/spa/src/websocket.ts

@@ -1,3 +1,4 @@
+import { getAdminForthClientId } from '@/utils/clientId';
 
 type WebsocketCallback = (data: any) => void;
 type Unsubscribe = () => void;
@@ -46,9 +47,10 @@ async function connect () {
     base = base.slice(0, -1);
   }
 
+  const clientId = encodeURIComponent(getAdminForthClientId());
   state.ws = new WebSocket(`${
     window.location.protocol === 'http:' ? 'ws' : 'wss'
-  }://${window.location.host}${base}/afws`);
+  }://${window.location.host}${base}/afws?clientId=${clientId}`);
   state.status = 'connecting';
   state.ws.addEventListener('open', () => {
     console.log('🔌 AFWS connected');

adminforth/types/Back.ts

@@ -2385,6 +2385,7 @@ export interface AdminForthResourceColumn extends Omit<AdminForthResourceColumnC
 
 export interface IWebSocketClient {
   id: string;
+  clientId?: string;
   lastPing: number;
   topics: Set<string>;
   adminUser: AdminUser;