chore: auth context

web/app/router.tsx

@@ -13,7 +13,7 @@ export function createRouter() {
       defaultPreload: "intent",
       defaultErrorComponent: DefaultCatchBoundary,
       defaultNotFoundComponent: () => <NotFound />,
-      context: { queryClient },
+      context: { queryClient, auth: undefined! },
     }),
     queryClient,
   )

web/app/routes/__root.tsx

@@ -44,6 +44,7 @@ export const fetchClerkAuth = createServerFn("GET", async (_, ctx) => {
 })
 
 export const Route = createRootRouteWithContext<{
+  auth: { userId: string }
   queryClient: QueryClient
 }>()({
   meta: () => [
@@ -77,15 +78,13 @@ export const Route = createRootRouteWithContext<{
     { rel: "manifest", href: "/site.webmanifest", color: "#fffff" },
     { rel: "icon", href: "/favicon.ico" },
   ],
-  beforeLoad: async ({ cause }) => {
+  beforeLoad: async ({ context }) => {
-    if (cause !== "stay") {
+    if (context.auth) {
-      const auth = await fetchClerkAuth()
+      return { auth: context.auth }
-      return { auth }
     }
 
-    return {
+    const auth = await fetchClerkAuth()
-      auth: null,
+    return { auth }
-    }
   },
   errorComponent: (props) => {
     return (

web/app/routes/_layout/_pages/_protected.tsx

@@ -1,8 +1,7 @@
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
 
 export const Route = createFileRoute("/_layout/_pages/_protected")({
-  beforeLoad: ({ context, location, cause }) => {
+  beforeLoad: async ({ context, location, cause }) => {
-    if (cause === "stay") return
     if (!context?.auth?.userId) {
       throw redirect({
         to: "/sign-in/$",