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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user