Handle bad tokens more resiliently

Author: Villagers654

frontend/src/utils/api.ts

@@ -8,6 +8,13 @@ export const API_BASE_URL = RAW_URL.endsWith('/')
     : RAW_URL;
 
 export const BACKEND_URL = new URL(API_BASE_URL).origin;
+const WRITE_METHODS = new Set(['post', 'put', 'delete', 'patch']);
+const CSRF_COOKIE_NAME = 'XSRF-TOKEN';
+
+type RetriableAxiosConfig = InternalAxiosRequestConfig & {
+    _csrfRetryAttempted?: boolean;
+    _csrfRefreshAttempted?: boolean;
+};
 
 export const getCookie = (name: string): string | null => {
     if (typeof document === 'undefined') return null;
@@ -23,6 +30,32 @@ export const getCookie = (name: string): string | null => {
     return null;
 };
 
+let csrfRefreshPromise: Promise<void> | null = null;
+
+const shouldAttachCsrfToken = (method?: string) => WRITE_METHODS.has(method?.toLowerCase() || '');
+
+const setCsrfHeader = (config: InternalAxiosRequestConfig, token: string) => {
+    if (typeof config.headers?.set === 'function') {
+        config.headers.set('X-XSRF-TOKEN', token);
+    } else {
+        (config.headers as any)['X-XSRF-TOKEN'] = token;
+    }
+};
+
+const refreshCsrfToken = async () => {
+    if (typeof window === 'undefined') return;
+
+    if (!csrfRefreshPromise) {
+        csrfRefreshPromise = api.get(`/status?t=${Date.now()}`, {
+            headers: { 'Cache-Control': 'no-cache' }
+        }).then(() => undefined).finally(() => {
+            csrfRefreshPromise = null;
+        });
+    }
+
+    await csrfRefreshPromise;
+};
+
 export const api = axios.create({
     baseURL: API_BASE_URL,
     withCredentials: true,
@@ -33,19 +66,22 @@ export const api = axios.create({
 });
 
 api.interceptors.request.use(
-    (config: InternalAxiosRequestConfig) => {
+    async (config: InternalAxiosRequestConfig) => {
         if (!config.headers) {
             config.headers = {} as any;
         }
 
-        if (['post', 'put', 'delete', 'patch'].includes(config.method?.toLowerCase() || '')) {
-            const token = getCookie('XSRF-TOKEN');
+        const retryableConfig = config as RetriableAxiosConfig;
+        if (shouldAttachCsrfToken(config.method)) {
+            let token = getCookie(CSRF_COOKIE_NAME);
+            if (!token && !retryableConfig._csrfRefreshAttempted) {
+                retryableConfig._csrfRefreshAttempted = true;
+                await refreshCsrfToken();
+                token = getCookie(CSRF_COOKIE_NAME);
+            }
+
             if (token) {
-                if (typeof config.headers.set === 'function') {
-                    config.headers.set('X-XSRF-TOKEN', token);
-                } else {
-                    (config.headers as any)['X-XSRF-TOKEN'] = token;
-                }
+                setCsrfHeader(config, token);
             }
         }
 
@@ -54,6 +90,32 @@ api.interceptors.request.use(
     error => Promise.reject(error)
 );
 
+api.interceptors.response.use(
+    response => response,
+    async (error) => {
+        const config = error.config as RetriableAxiosConfig | undefined;
+        if (!config || !shouldAttachCsrfToken(config.method) || config._csrfRetryAttempted || error.response?.status !== 403) {
+            return Promise.reject(error);
+        }
+
+        config._csrfRetryAttempted = true;
+
+        try {
+            await refreshCsrfToken();
+            const token = getCookie(CSRF_COOKIE_NAME);
+            if (token) {
+                if (!config.headers) {
+                    config.headers = {} as any;
+                }
+                setCsrfHeader(config, token);
+            }
+            return await api.request(config);
+        } catch {
+            return Promise.reject(error);
+        }
+    }
+);
+
 export const extractApiErrorMessage = (error: unknown, fallback: string): string => {
     if (typeof error === 'string' && error.trim()) {
         return error;