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:
2026-05-02 18:24:38 +02:00
parent 8e38f69205
commit d3ccdded23
9 changed files with 137 additions and 15 deletions
+5 -11
View File
@@ -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>