Next.js Better Auth Session Guard Pattern

Problem

In Next.js 16 App Router applications using Better Auth, session invalidation isn't automatically detected client-side. This creates a security and UX issue where:

• User signs out → header updates to signed-out state
• Protected content (dashboard, profile, etc.) remains visible
• Content only disappears after user interaction triggers re-render
• E2E tests fail because session state isn't consistent

Root Cause: Server-side auth check in layouts only runs on initial render (wrapped in Suspense). There's no client-side monitoring for session state changes after the initial server validation.

Context / Trigger Conditions