5f23885097
Clerk's short-lived JWTs (60s) can expire when browser tabs are backgrounded and the SDK's refresh interval is throttled. This left users silently logged out — actions returned 401s shown as generic error toasts with no recovery path. Prevention: refresh the Clerk JWT on tab visibility change so the token is always fresh when the user returns from a backgrounded tab. Detection: replace all 12 raw fetch() calls with an authFetch wrapper that catches 401 responses and sets an authDegraded state, triggering a blocking recovery overlay instead of confusing toasts. Recovery: AuthRecoveryOverlay (mirrors ConnectionOverlay pattern) prompts the user to reload the page, which re-authenticates via Clerk's long-lived session cookie. Also adds missing try/catch to handleStartDraft, handleMakePick, handleForceAutopick, handleForceManualPick, and handleReplacePick which previously had no network error handling. Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { Button } from "~/components/ui/button";
|
|
import { Card } from "~/components/ui/card";
|
|
|
|
interface AuthRecoveryOverlayProps {
|
|
isAuthDegraded: boolean;
|
|
}
|
|
|
|
export function AuthRecoveryOverlay({
|
|
isAuthDegraded,
|
|
}: AuthRecoveryOverlayProps) {
|
|
if (!isAuthDegraded) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]">
|
|
<Card className="w-full max-w-md mx-4 p-8 text-center">
|
|
<div className="flex flex-col items-center gap-6">
|
|
<div className="w-16 h-16 rounded-full bg-destructive/15 flex items-center justify-center">
|
|
<svg
|
|
className="w-8 h-8 text-destructive"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-2">Session Expired</h2>
|
|
<p className="text-muted-foreground">
|
|
Your session has expired. Reload the page to reconnect to the
|
|
draft.
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={() => window.location.reload()}
|
|
className="w-full"
|
|
variant="default"
|
|
>
|
|
Reload Page
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|