refresh progress

src/app/routeTree.gen.ts

@@ -11,6 +11,7 @@
 import { createServerRootRoute } from '@tanstack/react-start/server'
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as RefreshSessionRouteImport } from './routes/refresh-session'
 import { Route as LogoutRouteImport } from './routes/logout'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AuthedRouteImport } from './routes/_authed'
@@ -33,6 +34,11 @@ import { ServerRoute as ApiFilesCollectionRecordIdFileServerRouteImport } from '
 
 const rootServerRouteImport = createServerRootRoute()
 
+const RefreshSessionRoute = RefreshSessionRouteImport.update({
+  id: '/refresh-session',
+  path: '/refresh-session',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LogoutRoute = LogoutRouteImport.update({
   id: '/logout',
   path: '/logout',
@@ -137,6 +143,7 @@ const ApiFilesCollectionRecordIdFileServerRoute =
 export interface FileRoutesByFullPath {
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
+  '/refresh-session': typeof RefreshSessionRoute
   '/admin': typeof AuthedAdminRouteWithChildren
   '/settings': typeof AuthedSettingsRoute
   '/': typeof AuthedIndexRoute
@@ -153,6 +160,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
+  '/refresh-session': typeof RefreshSessionRoute
   '/settings': typeof AuthedSettingsRoute
   '/': typeof AuthedIndexRoute
   '/admin/preview': typeof AuthedAdminPreviewRoute
@@ -170,6 +178,7 @@ export interface FileRoutesById {
   '/_authed': typeof AuthedRouteWithChildren
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
+  '/refresh-session': typeof RefreshSessionRoute
   '/_authed/admin': typeof AuthedAdminRouteWithChildren
   '/_authed/settings': typeof AuthedSettingsRoute
   '/_authed/': typeof AuthedIndexRoute
@@ -188,6 +197,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/login'
     | '/logout'
+    | '/refresh-session'
     | '/admin'
     | '/settings'
     | '/'
@@ -204,6 +214,7 @@ export interface FileRouteTypes {
   to:
     | '/login'
     | '/logout'
+    | '/refresh-session'
     | '/settings'
     | '/'
     | '/admin/preview'
@@ -220,6 +231,7 @@ export interface FileRouteTypes {
     | '/_authed'
     | '/login'
     | '/logout'
+    | '/refresh-session'
     | '/_authed/admin'
     | '/_authed/settings'
     | '/_authed/'
@@ -238,6 +250,7 @@ export interface RootRouteChildren {
   AuthedRoute: typeof AuthedRouteWithChildren
   LoginRoute: typeof LoginRoute
   LogoutRoute: typeof LogoutRoute
+  RefreshSessionRoute: typeof RefreshSessionRoute
 }
 export interface FileServerRoutesByFullPath {
   '/api/auth/$': typeof ApiAuthSplatServerRoute
@@ -288,6 +301,13 @@ export interface RootServerRouteChildren {
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/refresh-session': {
+      id: '/refresh-session'
+      path: '/refresh-session'
+      fullPath: '/refresh-session'
+      preLoaderRoute: typeof RefreshSessionRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/logout': {
       id: '/logout'
       path: '/logout'
@@ -475,6 +495,7 @@ const rootRouteChildren: RootRouteChildren = {
   AuthedRoute: AuthedRouteWithChildren,
   LoginRoute: LoginRoute,
   LogoutRoute: LogoutRoute,
+  RefreshSessionRoute: RefreshSessionRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

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 />
+}