Authentication Demo

Demonstrates Google OAuth with SSR-safe session handling using the Atlas auth module.

Current Session

Live session state from useSession() hook

UserMenu Component

Pre-built dropdown menu component for user actions

Click the avatar to see the menu:

SSR-Safe Pattern

The session is fetched from /api/auth/me on mount. During SSR, the session is not available to prevent hydration mismatches. Use getServerSession() in Server Components for server-side session access.

Implementation

Key patterns demonstrated on this page

useSession() hook

Client-side hook that fetches session from /api/auth/me

SignInButton component

Redirects to OAuth flow with PKCE and returnTo support

UserMenu component

Pre-built avatar dropdown with sign out action

Encrypted session cookies

Tokens stored in httpOnly cookies with AES-GCM encryption