refresh progress

src/app/routes/__root.tsx

@@ -19,6 +19,7 @@ import { HeaderConfig } from "@/features/core/types/header-config";
 import { playerQueries } from "@/features/players/queries";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import FullScreenLoader from "@/components/full-screen-loader";
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient;
@@ -70,7 +71,12 @@ export const Route = createRootRouteWithContext<{
   },
   component: RootComponent,
   notFoundComponent: () => <Navigate to="/" />,
-  beforeLoad: async ({ context }) => {
+  beforeLoad: async ({ context, location }) => {
+    // Skip auth check for refresh-session route to avoid infinite loops
+    if (location.pathname === '/refresh-session') {
+      return {};
+    }
+
     // https://github.com/TanStack/router/discussions/3531
     const auth = await ensureServerQueryData(
       context.queryClient,
@@ -78,7 +84,7 @@ export const Route = createRootRouteWithContext<{
     );
     return { auth };
   },
-  pendingComponent: () => <p>Loading...</p>,
+  pendingComponent: () => <Providers><FullScreenLoader /></Providers>,
 });
 
 function RootComponent() {

src/app/routes/refresh-session.tsx

@@ -0,0 +1,39 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import FullScreenLoader from '@/components/full-screen-loader'
+import { attemptRefreshingSession } from 'supertokens-web-js/recipe/session'
+
+export const Route = createFileRoute('/refresh-session')({
+  component: RouteComponent,
+})
+
+// https://supertokens.com/docs/additional-verification/session-verification/ssr?uiType=custom
+function RouteComponent() {
+  useEffect(() => {
+    const handleRefresh = async () => {
+      try {        
+        const refreshed = await attemptRefreshingSession()
+        
+        if (refreshed) {
+          const urlParams = new URLSearchParams(window.location.search)
+          const redirect = urlParams.get('redirect')
+          
+          if (redirect) {
+            window.location.href = decodeURIComponent(redirect)
+          } else {
+            window.location.href = '/'
+          }
+        } else {
+          window.location.href = '/login'
+        }
+      } catch (error) {
+        window.location.href = '/login'
+      }
+    }
+
+    const timeout = setTimeout(handleRefresh, 100)
+    return () => clearTimeout(timeout)
+  }, [])
+
+  return <FullScreenLoader />
+}