Merge pull request 'development' (#11) from development into main

Reviewed-on: #11

src/app/routes/__root.tsx

@@ -122,25 +122,12 @@ export const Route = createRootRouteWithContext<{
         context.queryClient,
         playerQueries.auth()
       );
+
+      console.log('__root beforeLoad auth data:', auth);
+
       return { auth };
     } catch (error: any) {
-      if (typeof window !== 'undefined') {
+      console.error('__root beforeLoad error:', error);
-        const { doesSessionExist, attemptRefreshingSession } = await import('supertokens-web-js/recipe/session');
-
-        const sessionExists = await doesSessionExist();
-        if (sessionExists) {
-          try {
-            await attemptRefreshingSession();
-            const auth = await ensureServerQueryData(
-              context.queryClient,
-              playerQueries.auth()
-            );
-            return { auth };
-          } catch {
-            return {};
-          }
-        }
-      }
       return {};
     }
   },

src/app/routes/_authed.tsx

@@ -5,10 +5,14 @@ import { Flex, Loader } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed")({
   beforeLoad: ({ context }) => {
+    console.log('_authed beforeLoad context:', context.auth);
+
     if (!context.auth?.user) {
+      console.log('_authed: No user in context, redirecting to login');
       throw redirect({ to: "/login" });
     }
 
+    console.log('_authed: User found, allowing access');
     return {
       auth: {
         ...context.auth,

src/app/routes/refresh-session.tsx

@@ -1,14 +1,26 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useEffect, useRef } from 'react'
 import FullScreenLoader from '@/components/full-screen-loader'
-import { attemptRefreshingSession } from 'supertokens-web-js/recipe/session'
+import { refreshManager } from '@/lib/supertokens/refresh-manager'
-import { resetRefreshFlag, getOrCreateRefreshPromise } from '@/lib/supertokens/client'
 import { logger } from '@/lib/supertokens'
 
 export const Route = createFileRoute('/refresh-session')({
   component: RouteComponent,
 })
 
+function clearSuperTokensCookies() {
+  const cookieNames = ['sAccessToken', 'sRefreshToken', 'sIdRefreshToken', 'sFrontToken'];
+  const cookieDomain = (window as any).__COOKIE_DOMAIN__ || undefined;
+
+  cookieNames.forEach(name => {
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+
+    if (cookieDomain) {
+      document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=${cookieDomain}`;
+    }
+  });
+}
+
 function RouteComponent() {
   const hasAttemptedRef = useRef(false);
 
@@ -20,9 +32,17 @@ function RouteComponent() {
       try {
         logger.info("Refresh session route: starting refresh");
 
-        const refreshed = await getOrCreateRefreshPromise(async () => {
+        const cookies = document.cookie.split(';');
-          return await attemptRefreshingSession();
+        const accessTokenCookies = cookies.filter(c => c.trim().startsWith('sAccessToken='));
-        });
+
+        if (accessTokenCookies.length > 1) {
+          logger.warn(`Found ${accessTokenCookies.length} access tokens, clearing all before refresh`);
+          clearSuperTokensCookies();
+
+          await new Promise(resolve => setTimeout(resolve, 100));
+        }
+
+        const refreshed = await refreshManager.refresh();
 
         if (refreshed) {
           logger.info("Refresh session route: refresh successful");

src/components/session-monitor.tsx

@@ -1,14 +1,11 @@
 import { useEffect, useRef } from 'react';
-import { useNavigate } from '@tanstack/react-router';
+import { refreshManager } from '@/lib/supertokens/refresh-manager';
-import { doesSessionExist } from 'supertokens-web-js/recipe/session';
-import { getOrCreateRefreshPromise } from '@/lib/supertokens/client';
-import { attemptRefreshingSession } from 'supertokens-web-js/recipe/session';
 import { logger } from '@/lib/supertokens';
+import { ensureSuperTokensFrontend } from '@/lib/supertokens/client';
 
 export function SessionMonitor() {
-  const navigate = useNavigate();
   const lastRefreshTimeRef = useRef<number>(0);
-  const REFRESH_COOLDOWN = 30 * 1000;
+  const REFRESH_COOLDOWN = 5 * 1000;
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
@@ -22,23 +19,27 @@ export function SessionMonitor() {
       }
 
       const now = Date.now();
-      if (now - lastRefreshTimeRef.current < REFRESH_COOLDOWN) {
+      const timeSinceLastRefresh = now - lastRefreshTimeRef.current;
-        logger.info('Session monitor: skipping refresh (cooldown)');
+
+      if (timeSinceLastRefresh < REFRESH_COOLDOWN) {
+        logger.info(`Session monitor: skipping refresh (refreshed ${timeSinceLastRefresh}ms ago)`);
         return;
       }
 
       try {
+        ensureSuperTokensFrontend();
+
+        const { doesSessionExist } = await import('supertokens-web-js/recipe/session');
+
         const sessionExists = await doesSessionExist();
         if (!sessionExists) {
           logger.info('Session monitor: no session exists, skipping refresh');
           return;
         }
 
-        logger.info('Session monitor: tab became visible, refreshing session');
+        logger.info('Session monitor: tab became visible, checking session freshness');
 
-        const refreshed = await getOrCreateRefreshPromise(async () => {
+        const refreshed = await refreshManager.refresh();
-          return await attemptRefreshingSession();
-        });
 
         if (refreshed) {
           lastRefreshTimeRef.current = Date.now();
@@ -46,19 +47,17 @@ export function SessionMonitor() {
         } else {
           logger.warn('Session monitor: refresh returned false');
         }
-      } catch (error) {
+      } catch (error: any) {
-        logger.error('Session monitor: error refreshing session', error);
+        logger.error('Session monitor: error refreshing session', error?.message);
       }
     };
 
-    handleVisibilityChange();
-
     document.addEventListener('visibilitychange', handleVisibilityChange);
 
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
-  }, [navigate]);
+  }, []);
 
   return null;
 }

src/features/players/queries.ts

@@ -1,8 +1,5 @@
 import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
 import { listPlayers, getPlayer, getUnassociatedPlayers, fetchMe, getPlayerStats, getAllPlayerStats, getPlayerMatches, getUnenrolledPlayers, getPlayersActivity } from "./server";
-import { logger } from '@/lib/supertokens';
-
-let queryRefreshRedirect: Promise<void> | null = null;
 
 export const playerKeys = {
   auth: ['auth'],
@@ -64,37 +61,7 @@ export const useMe = () => {
       staleTime: 30 * 1000,
       refetchOnMount: false,
       refetchOnWindowFocus: true,
-      retry: (failureCount, error: any) => {
+      retry: 3,
-        if (error?.response?.status === 401) {
-          const errorData = error?.response?.data;
-          if (errorData?.error === 'SESSION_REFRESH_REQUIRED') {
-            logger.warn("Query detected SESSION_REFRESH_REQUIRED");
-
-            if (!queryRefreshRedirect) {
-              const currentUrl = window.location.pathname + window.location.search;
-              logger.info("Query initiating refresh redirect to:", currentUrl);
-
-              queryRefreshRedirect = new Promise<void>((resolve) => {
-                setTimeout(() => {
-                  window.location.href = `/refresh-session?redirect=${encodeURIComponent(currentUrl)}`;
-                  resolve();
-                }, 100);
-              });
-
-              queryRefreshRedirect.finally(() => {
-                setTimeout(() => {
-                  queryRefreshRedirect = null;
-                }, 1000);
-              });
-            } else {
-              logger.info("Query: refresh redirect already in progress");
-            }
-
-            return false;
-          }
-        }
-        return failureCount < 3;
-      },
     },
   });
 };

src/features/players/server.ts

@@ -10,29 +10,50 @@ import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
 import { serverFnLoggingMiddleware } from "@/utils/activities";
 
 export const fetchMe = createServerFn()
-  .handler(async () => 
+  .handler(async () =>
     toServerResult(async () => {
       const request = getRequest();
-      
+
       try {
         const context = await getSessionContext(request);
-        
+
         await pbAdmin.authPromise;
         const result = await pbAdmin.getPlayerByAuthId(context.userAuthId);
         return {
-          user: result || undefined, 
+          user: result || undefined,
-          roles: context.roles, 
+          roles: context.roles,
           metadata: context.metadata,
           phone: context.phone
         };
       } catch (error: any) {
-        // logger.info("FetchMe: Session error", error)
+        logger.info("FetchMe: Error caught", {
-        if (error?.response?.status === 401) {
+          message: error?.message,
-          const errorData = error?.response?.data;
+          isResponse: error instanceof Response,
-          if (errorData?.error === "SESSION_REFRESH_REQUIRED") {
+          status: error instanceof Response ? error.status : error?.response?.status
+        });
+
+        if (error instanceof Response) {
+          const status = error.status;
+          if (status === 440) {
+            logger.info("FetchMe: Session refresh required (440)");
             throw error;
           }
         }
+
+        if (error?.response?.status === 440 || error?.response?.status === 401) {
+          const errorData = error?.response?.data;
+          if (errorData?.error === "SESSION_REFRESH_REQUIRED") {
+            logger.info("FetchMe: Session refresh required (legacy)");
+            throw error;
+          }
+        }
+
+        if (error?.message === "Unauthenticated") {
+          logger.info("FetchMe: No authenticated user (expected when not logged in)");
+          return { user: undefined, roles: [], metadata: {}, phone: undefined };
+        }
+
+        logger.warn("FetchMe: Unexpected error, returning default", error);
         return { user: undefined, roles: [], metadata: {}, phone: undefined };
       }
     })

src/lib/supertokens/client.ts

@@ -4,34 +4,15 @@ import Passwordless from "supertokens-web-js/recipe/passwordless";
 import { appInfo } from "./config";
 import { logger } from "./";
 
-let refreshPromise: Promise<boolean> | null = null;
 
 export const resetRefreshFlag = () => {
-  refreshPromise = null;
+  logger.warn("resetRefreshFlag is deprecated. Use refreshManager.reset() instead.");
 };
 
+
 export const getOrCreateRefreshPromise = (refreshFn: () => Promise<boolean>): Promise<boolean> => {
-  if (refreshPromise) {
+  logger.warn("getOrCreateRefreshPromise is deprecated. Use refreshManager.refresh() instead.");
-    logger.info("Reusing existing refresh promise");
+  return refreshFn();
-    return refreshPromise;
-  }
-
-  logger.info("Creating new refresh promise");
-  refreshPromise = refreshFn()
-    .then((result) => {
-      logger.info("Refresh completed successfully:", result);
-      setTimeout(() => {
-        refreshPromise = null;
-      }, 500);
-      return result;
-    })
-    .catch((error) => {
-      logger.error("Refresh failed:", error);
-      refreshPromise = null;
-      throw error;
-    });
-
-  return refreshPromise;
 };
 
 export const frontendConfig = () => {

src/lib/supertokens/refresh-manager.ts

@@ -0,0 +1,77 @@
+import { attemptRefreshingSession } from 'supertokens-web-js/recipe/session';
+import { logger } from './index';
+
+class SessionRefreshManager {
+  private refreshPromise: Promise<boolean> | null = null;
+  private redirectPromise: Promise<void> | null = null;
+  private lastRefreshTime: number = 0;
+  private readonly MIN_REFRESH_INTERVAL = 1000;
+
+  async refresh(): Promise<boolean> {
+    if (this.refreshPromise) {
+      logger.info('RefreshManager: Reusing existing refresh promise');
+      return this.refreshPromise;
+    }
+
+    const timeSinceLastRefresh = Date.now() - this.lastRefreshTime;
+    if (timeSinceLastRefresh < this.MIN_REFRESH_INTERVAL) {
+      logger.info(`RefreshManager: Skipping refresh (last refresh ${timeSinceLastRefresh}ms ago)`);
+      return true;
+    }
+
+    logger.info('RefreshManager: Starting new session refresh');
+    this.refreshPromise = attemptRefreshingSession()
+      .then((result) => {
+        logger.info('RefreshManager: Refresh completed successfully:', result);
+        this.lastRefreshTime = Date.now();
+        return result;
+      })
+      .catch((error) => {
+        logger.error('RefreshManager: Refresh failed:', error);
+        throw error;
+      })
+      .finally(() => {
+        setTimeout(() => {
+          this.refreshPromise = null;
+        }, 500);
+      });
+
+    return this.refreshPromise;
+  }
+
+  async redirectToRefresh(currentPath: string): Promise<void> {
+    if (this.redirectPromise) {
+      logger.info('RefreshManager: Redirect already in progress, waiting...');
+      return this.redirectPromise;
+    }
+
+    logger.info('RefreshManager: Initiating refresh redirect to:', currentPath);
+    this.redirectPromise = new Promise<void>((resolve) => {
+      setTimeout(() => {
+        window.location.href = `/refresh-session?redirect=${encodeURIComponent(currentPath)}`;
+        resolve();
+      }, 100);
+    });
+
+    this.redirectPromise.finally(() => {
+      setTimeout(() => {
+        this.redirectPromise = null;
+      }, 1000);
+    });
+
+    return this.redirectPromise;
+  }
+
+  reset(): void {
+    logger.info('RefreshManager: Resetting state');
+    this.refreshPromise = null;
+    this.redirectPromise = null;
+    this.lastRefreshTime = 0;
+  }
+
+  getTimeSinceLastRefresh(): number {
+    return Date.now() - this.lastRefreshTime;
+  }
+}
+
+export const refreshManager = new SessionRefreshManager();

src/lib/supertokens/server.ts

@@ -28,6 +28,26 @@ export const backendConfig = (): TypeInput => {
         olderCookieDomain: undefined,
         antiCsrf: process.env.NODE_ENV === "production" ? "VIA_TOKEN" : "NONE",
 
+        sessionExpiredStatusCode: 440,
+        invalidClaimStatusCode: 403,
+
+        override: {
+          functions: (originalImplementation) => ({
+            ...originalImplementation,
+            refreshSession: async (input) => {
+              logger.info('Backend: Refresh session attempt');
+              try {
+                const result = await originalImplementation.refreshSession(input);
+                logger.info('Backend: Refresh session successful');
+                return result;
+              } catch (error) {
+                logger.error('Backend: Refresh session failed:', error);
+                throw error;
+              }
+            },
+          }),
+        },
+
         // Debug only
         exposeAccessTokenToFrontendInCookieBasedAuth: process.env.NODE_ENV !== "production",
       }),

src/lib/tanstack-query/hooks/use-server-mutation.ts

@@ -1,10 +1,7 @@
 import { useMutation, UseMutationOptions } from "@tanstack/react-query";
 import { ServerResult } from "../types";
 import toast from '@/lib/sonner'
-import { logger } from '@/lib/supertokens'
+import { handleQueryError } from '../utils/global-error-handler';
-
-
-let sessionRefreshRedirect: Promise<void> | null = null;
 
 export function useServerMutation<TData, TVariables = unknown>(
   options: Omit<UseMutationOptions<TData, Error, TVariables>, 'mutationFn'> & {
@@ -14,14 +11,14 @@ export function useServerMutation<TData, TVariables = unknown>(
     showSuccessToast?: boolean;
   }
 ) {
-  const { 
+  const {
-    mutationFn, 
+    mutationFn,
-    successMessage, 
+    successMessage,
-    showErrorToast = true, 
+    showErrorToast = true,
     showSuccessToast = true,
     onSuccess,
     onError,
-    ...mutationOptions 
+    ...mutationOptions
   } = options;
 
   return useMutation({
@@ -29,51 +26,17 @@ export function useServerMutation<TData, TVariables = unknown>(
     mutationFn: async (variables: TVariables) => {
       try {
         const result = await mutationFn(variables);
-        
+
         if (!result.success) {
           if (showErrorToast) {
             toast.error(result.error.userMessage);
           }
           throw new Error(result.error.userMessage);
         }
-        
+
         return result.data;
       } catch (error: any) {
-        if (error?.response?.status === 401) {
+        await handleQueryError(error);
-          try {
-            const errorData = typeof error.response.data === 'string'
-              ? JSON.parse(error.response.data)
-              : error.response.data;
-
-            if (errorData?.error === "SESSION_REFRESH_REQUIRED") {
-              logger.warn("Mutation detected SESSION_REFRESH_REQUIRED");
-
-              if (!sessionRefreshRedirect) {
-                const currentUrl = window.location.pathname + window.location.search;
-                logger.info("Mutation initiating refresh redirect to:", currentUrl);
-
-                sessionRefreshRedirect = new Promise<void>((resolve) => {
-                  setTimeout(() => {
-                    window.location.href = `/refresh-session?redirect=${encodeURIComponent(currentUrl)}`;
-                    resolve();
-                  }, 100);
-                });
-
-                sessionRefreshRedirect.finally(() => {
-                  setTimeout(() => {
-                    sessionRefreshRedirect = null;
-                  }, 1000);
-                });
-              } else {
-                logger.info("Mutation: refresh redirect already in progress, waiting...");
-                await sessionRefreshRedirect;
-              }
-
-              throw new Error("SESSION_REFRESH_REQUIRED");
-            }
-          } catch (parseError) {}
-        }
-
         throw error;
       }
     },

src/lib/tanstack-query/hooks/use-server-query.ts

@@ -1,6 +1,7 @@
 import { QueryKey, useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { ServerResult } from "../types";
 import toast from '@/lib/sonner'
+import { handleQueryError } from '../utils/global-error-handler';
 
 export function useServerQuery<TData>(
     options: {
@@ -17,16 +18,21 @@ export function useServerQuery<TData>(
     ...queryOptions,
     queryKey,
     queryFn: async () => {
-      const result = await queryFn();
+      try {
-      
+        const result = await queryFn();
-      if (!result.success) {
+
-        if (showErrorToast) {
+        if (!result.success) {
-          toast.error(result.error.userMessage);
+          if (showErrorToast) {
+            toast.error(result.error.userMessage);
+          }
+          throw new Error(result.error.userMessage);
         }
-        throw new Error(result.error.userMessage);
+
+        return result.data;
+      } catch (error: any) {
+        await handleQueryError(error);
+        throw error;
       }
-      
-      return result.data;
     }
   });
 }

src/lib/tanstack-query/hooks/use-server-suspense-query.ts

@@ -1,6 +1,7 @@
 import { QueryKey, UseQueryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { ServerResult } from "../types";
 import toast from '@/lib/sonner'
+import { handleQueryError } from '../utils/global-error-handler';
 
 export function useServerSuspenseQuery<TData>(
   options: {
@@ -16,16 +17,21 @@ export function useServerSuspenseQuery<TData>(
     ...queryOptions,
     queryKey,
     queryFn: async () => {
-      const result = await queryFn();
+      try {
-      
+        const result = await queryFn();
-      if (!result.success) {
+
-        if (showErrorToast) {
+        if (!result.success) {
-          toast.error(result.error.userMessage);
+          if (showErrorToast) {
+            toast.error(result.error.userMessage);
+          }
+          throw new Error(result.error.userMessage);
         }
-        throw new Error(result.error.userMessage);
+
+        return result.data;
+      } catch (error: any) {
+        await handleQueryError(error);
+        throw error;
       }
-      
-      return result.data;
     }
   });
 

src/lib/tanstack-query/utils/global-error-handler.ts

@@ -0,0 +1,60 @@
+import { refreshManager } from '@/lib/supertokens/refresh-manager';
+import { logger } from '@/lib/supertokens';
+
+export async function handleQueryError(error: any): Promise<void> {
+  if (typeof window === 'undefined') {
+    throw error;
+  }
+
+  if (!error || typeof error !== 'object') {
+    throw error;
+  }
+
+  if (error instanceof Response) {
+    const status = error.status;
+
+    if (status === 440) {
+      try {
+        const errorData = await error.json();
+
+        if (errorData?.error === 'SESSION_REFRESH_REQUIRED' && errorData?.shouldRetry === true) {
+          logger.warn('Query detected SESSION_REFRESH_REQUIRED (Response), initiating redirect');
+
+          const currentUrl = window.location.pathname + window.location.search;
+          await refreshManager.redirectToRefresh(currentUrl);
+
+          throw new Error('Redirecting to refresh session');
+        }
+      } catch (parseError) {
+      }
+    }
+    throw error;
+  }
+
+  const status = error?.response?.status;
+
+  if (status === 440) {
+    try {
+      let errorData = error?.response?.data;
+
+      if (typeof errorData === 'string') {
+        try {
+          errorData = JSON.parse(errorData);
+        } catch {
+        }
+      }
+
+      if (errorData?.error === 'SESSION_REFRESH_REQUIRED' && errorData?.shouldRetry === true) {
+        logger.warn('Query detected SESSION_REFRESH_REQUIRED (legacy format), initiating redirect');
+
+        const currentUrl = window.location.pathname + window.location.search;
+        await refreshManager.redirectToRefresh(currentUrl);
+
+        throw new Error('Redirecting to refresh session');
+      }
+    } catch (parseError) {
+    }
+  }
+
+  throw error;
+}

src/utils/supertokens.ts

@@ -101,20 +101,24 @@ export const superTokensFunctionMiddleware = createMiddleware({
   type: "function",
 }).server(async ({ next }) => {
   const request = getRequest();
-  
+
   try {
     const context = await getSessionContext(request, { isServerFunction: true });
     return next({ context });
   } catch (error: any) {
     if (error.message === "SESSION_REFRESH_REQUIRED") {
       throw new Response(
-        JSON.stringify({ 
+        JSON.stringify({
           error: "SESSION_REFRESH_REQUIRED",
-          message: "Session needs to be refreshed" 
+          message: "Session needs to be refreshed",
+          shouldRetry: true
         }),
-        { 
+        {
-          status: 401,
+          status: 440,
-          headers: { "Content-Type": "application/json" }
+          headers: {
+            "Content-Type": "application/json",
+            "X-Session-Expired": "true"
+          }
         }
       );
     }
@@ -126,7 +130,7 @@ export const superTokensAdminFunctionMiddleware = createMiddleware({
   type: "function",
 }).server(async ({ next }) => {
   const request = getRequest();
-  
+
   try {
     const context = await getSessionContext(request, { isServerFunction: true });
 
@@ -139,13 +143,17 @@ export const superTokensAdminFunctionMiddleware = createMiddleware({
   } catch (error: any) {
     if (error.message === "SESSION_REFRESH_REQUIRED") {
       throw new Response(
-        JSON.stringify({ 
+        JSON.stringify({
           error: "SESSION_REFRESH_REQUIRED",
-          message: "Session needs to be refreshed" 
+          message: "Session needs to be refreshed",
+          shouldRetry: true
         }),
-        { 
+        {
-          status: 401,
+          status: 440,
-          headers: { "Content-Type": "application/json" }
+          headers: {
+            "Content-Type": "application/json",
+            "X-Session-Expired": "true"
+          }
         }
       );
     }