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
+33
View File
@@ -0,0 +1,33 @@
import { useState, type ComponentProps } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useNavigate } from '@tanstack/react-router';
import { performLogout } from '@/auth/logout';
import { Button } from '@/ui/primitives/button';
type ButtonProps = ComponentProps<typeof Button>;
export type LogoutButtonProps = Omit<ButtonProps, 'onClick' | 'disabled' | 'children'>;
export function LogoutButton({ variant = 'outline', ...rest }: LogoutButtonProps) {
const queryClient = useQueryClient();
const navigate = useNavigate();
const [isLoggingOut, setIsLoggingOut] = useState(false);
async function onClick() {
if (isLoggingOut) return;
setIsLoggingOut(true);
try {
await performLogout({ queryClient, navigate });
} catch {
// Even if the orchestration throws somewhere, the auth store is now
// anonymous and the user is signed out locally. Nothing useful to
// recover here.
}
}
return (
<Button variant={variant} onClick={onClick} disabled={isLoggingOut} {...rest}>
{isLoggingOut ? 'Signing out…' : 'Sign out'}
</Button>
);
}