Shared Mutable Module State Leaks Data Across SSR Requests

Category

Bug

Priority

High

Description

In lib/user-session-sync.ts, state is defined at module scope (let state = { anonymousBrowsing: false, walletConnected: false }). During Server-Side Rendering (SSR), useSyncExternalStore invokes getServerSnapshot = () => state. Because Node.js keeps module scope variables across incoming HTTP requests, modifying state during SSR leaks state across concurrent users.

Evidence from lib/user-session-sync.ts#L16-L19:

let state: SessionState = {
  anonymousBrowsing: false,
  walletConnected: false,
};

Proposed Solution

1. Replace module-level mutable variables with React Context or scoped state providers (SessionProvider).
2. Ensure SSR fallback getServerSnapshot returns a static default state object.

Acceptance Criteria

• Session state is scoped per request / component tree using React Context.
• No module-level mutable variables used for SSR snapshots.
• Session persistence across tabs uses React Context + useSyncExternalStore safely.

Files

• lib/user-session-sync.ts