Fix #290: Implement multi-tab session synchronization#321
Merged
Conversation
Add useSessionSync hook to detect and synchronize wallet session changes across browser tabs and wallet provider account switches. Ensures wallet logout or account switch in one tab is reflected in all other tabs. New components: - useSessionSync hook: Listens for storage events and wallet provider changes to detect session mutations in other tabs Detects: - Storage events (localStorage changes from other tabs) - Wallet provider account changes (Leather, Xverse) - Session logout/login from other tabs - Account switching via provider UI Implementation: - Registers storage event listener on mount for blockstack-session key - Registers provider accountsChanged event listeners for both Leather and Xverse extensions - Invokes callback with updated session state when changes detected - Cleans up all listeners on unmount to prevent memory leaks Updated App.jsx: - Added useSessionSync to recompute session state on cross-tab changes - Session restoration now happens both on mount and on external changes - Auth loading state properly reset when session changes Testing: - 12 comprehensive unit tests covering all scenarios - Storage events (logout, login, account switch) - Provider account change events - Listener lifecycle (mount/unmount) - Multiple rapid changes - Edge cases (null key, other keys) - All 1724 frontend tests passing - All 91 contract tests passing Benefits: - Users see immediate logout if they disconnect in another tab - Account switching is instantly reflected - No stale wallet addresses visible - Works across multiple browser windows/tabs - Gracefully handles providers without event support Fixes #290
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements real-time wallet session synchronization across browser tabs. When a user disconnects their wallet or switches accounts in one tab, all other tabs immediately reflect this change.
What's Fixed
Multi-tab logout detection: If user disconnects in tab A, tab B immediately recognizes logout
Account switching: Switching accounts in wallet provider UI instantly updates all tabs
Provider events: Listens to wallet extension events (Leather, Xverse accountsChanged)
Storage sync: Detects localStorage changes from other tabs
Implementation
Created useSessionSync hook that:
Updated App.jsx to:
Testing
Acceptance Criteria Met
Session changes in one tab are reflected in other tabs
Logout in another tab clears session immediately
Account switch is detected and reflected
No stale wallet address remains visible
Tests cover multi-tab/session-change scenarios
Listener lifecycle properly managed (no memory leaks)
Fixes #290