feat: task 1.8 logout flow + cross-tab sync + strict tsconfig
- src/auth/logout.ts: performLogout({ queryClient, navigate? })
orchestration. Calls store.logout(), clears query cache, navigates
to /login. Server-call failures swallowed; local state still flips
to anonymous.
- src/auth/cross-tab-sync.ts: startCrossTabSync(). Subscribes to the
auth store and bumps trm-auth-version in localStorage on status
transitions; listens for storage events and re-runs initialize()
when another tab bumps. Idempotent via module-level guard. No-ops
if localStorage is unavailable.
- src/ui/components/logout-button.tsx: <LogoutButton> wraps shadcn
Button. Pass-through props but locks onClick / disabled / children.
Local isLoggingOut for "Signing out..." indicator + double-click
guard.
- src/auth/bootstrap.tsx: <AuthBootstrap> now calls startCrossTabSync()
alongside the existing init steps. Single mount point.
- src/auth/index.ts: re-export performLogout + startCrossTabSync.
- src/routes/_authed/index.tsx: replaced the inline sign-out button
with <LogoutButton />. The existing useEffect on 'anonymous' status
handles navigation when cross-tab sync fires.
Bonus: tsconfig.app.json now has "strict": true. TanStack Router emits
a conditional-type error ("strictNullChecks must be enabled") in
editors when strict is off; tsc -b was lenient. Caught in 1.7's
review. Typecheck remained green after enabling.
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useEffect } from 'react';
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router';
|
||||
import { useAuthStore } from '@/auth';
|
||||
import { Button } from '@/ui/primitives/button';
|
||||
import { LogoutButton } from '@/ui/components/logout-button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/ui/primitives/card';
|
||||
|
||||
export const Route = createFileRoute('/_authed/')({
|
||||
@@ -14,8 +14,9 @@ function HomePage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Belt-and-braces: if the auth state flips to anonymous mid-session
|
||||
// (logout in another tab, server-side revocation), bounce to /login.
|
||||
// The `beforeLoad` gate only runs on navigation, not on store changes.
|
||||
// (logout in another tab via cross-tab sync, server-side revocation),
|
||||
// bounce to /login. The `beforeLoad` gate only runs on navigation, not
|
||||
// on store changes.
|
||||
useEffect(() => {
|
||||
if (status === 'anonymous') {
|
||||
void navigate({ to: '/login' });
|
||||
@@ -26,20 +27,13 @@ function HomePage() {
|
||||
|
||||
const displayName = user.first_name ?? user.email ?? user.id;
|
||||
|
||||
async function onSignOut() {
|
||||
await useAuthStore.getState().logout();
|
||||
// The effect above will pick up the status change and navigate.
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-4">
|
||||
<header className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-semibold">TRM</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">{displayName}</span>
|
||||
<Button variant="outline" onClick={onSignOut}>
|
||||
Sign out
|
||||
</Button>
|
||||
<LogoutButton />
|
||||
</div>
|
||||
</header>
|
||||
<Card>
|
||||
|
||||
Reference in New Issue
Block a user