diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx index 4b89b0f..52846c1 100644 --- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx +++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx @@ -1,4 +1,5 @@ import { useLoaderData, Link, useRevalidator } from "react-router"; +import { useAuth } from "@clerk/react-router"; import { eq, and, asc, desc, inArray } from "drizzle-orm"; import { database } from "~/database/context"; import * as schema from "~/database/schema"; @@ -229,6 +230,7 @@ export default function DraftRoom() { ownerMap, } = useLoaderData(); const { revalidate, state: revalidatorState } = useRevalidator(); + const { userId: clerkUserId } = useAuth(); const { isConnected, connectionError, isReconnecting, reconnectCount, on, off } = useDraftSocket(season.id, userTeam?.id); const { permissionState: notificationsPermission, @@ -268,6 +270,15 @@ export default function DraftRoom() { } }, [reconnectCount, revalidate]); + // Guard against Clerk JWT expiry race: if the loader ran without a userId (expired + // short-lived JWT) but the Clerk client SDK has a valid session, revalidate so the + // loader re-runs with a fresh token and returns correct userTeam/userQueue data. + useEffect(() => { + if (clerkUserId && !currentUserId) { + revalidate(); + } + }, [clerkUserId, currentUserId, revalidate]); + // Track revalidation lifecycle to sync local state from fresh loader data. // // The problem: `picks` and `currentPick` are local state initialized once