Problem

Users cannot log out from anywhere except the profile page. Verified: signOut is called from exactly one file in the codebase — src/pages/profile/[id].tsx:65.

The header (src/layouts/headers/header.tsx, header-01.tsx, header-02.tsx) contains no useSession usage and no logout affordance. A logged-in user on any non-profile page has no way to sign out without knowing to navigate to /profile/{their-id}.

Expected behavior

• Header shows an auth-aware user menu when signed in (avatar + dropdown).
• Dropdown includes: link to profile, link to settings, and a Logout button.
• Header shows a "Sign in" link when signed out.
• Works on all three header variants.

Acceptance criteria

• Auth state visible in header on every page (including /, /about-us, etc.).
• Logout button in header works on any page.
• Logout failures are surfaced to the user (don't silently fail like the old profile handler did — see PR on security/auth-hardening branch for the pattern).
• No FOUC: while session loads, render a skeleton/placeholder, not a flash of "Sign in" followed by the avatar.

Suggested approach

1. Create src/components/header/user-menu.tsx that uses useSession() with a status === "loading" skeleton state.
2. Import it into each header variant.
3. Reuse the hardened logout handler pattern (signOut({ callbackUrl: "/login" }) with try/catch + alert on error).

Related

• Surfaced in the end-to-end user flow audit (2026-04-17).