Token Management in a
Multi-Role, Multi-Tab System
Designing a stable authentication system for high-concurrency browser environments with short-lived sessions.
01. The Decision Log
Option A: localStorage Only
Standard approach: Keep tokens in localStorage and sync across tabs.
Cause of "Token Thrashing" where tabs overwrite each other with old data.
Option B: Hybrid Strategy
sessionStorage for tab truth, localStorage for cross-tab coordination locks.
Ensures tab isolation while preventing redundant refresh calls.
02. Why it failed initially
The Infinite Loop
Each tab triggered its own refresh. Backend invalidated older tokens, causing the other tabs to fail, which triggered more refreshes.
React Render Noise
Treating tokens as global reactive state meant every background refresh forced the entire UI to re-calculate, causing sluggish performance.
03. The Coordination Flow
We implemented a "Single-Writer" semantics using localStorage as a lock channel. One tab writes, the others observe and sync.
Key Takeaway
Token management is not about *where* you store the token. It’s about **coordination, ownership, and failure recovery.** I prefer building boring, predictable systems over clever ones that break at midnight.
Next Improvements
- Use BroadcastChannel API for lower latency coordination
- Implement Backend grace periods for overlapping refreshes
- Add centralized Auth SDK for cross-app consistency