Medium SeverityState ManagementSecurity

The Tab Split-Personality Syndrome

1.The Symptom (The Chaos)

A user logs out of their account on Tab A, but Tab B remains completely oblivious. It continues displaying sensitive user info and crashes with unhandled 401 errors the moment the user clicks a button.

2.The Trigger Condition

The user opens the web application in multiple concurrent tabs, then changes their authentication state (log in, log out, or token refresh) inside one of those windows.

3.The Catch (Why it broke)

We treated React's Context API as a global application state provider, forgetting that context boundaries are strictly isolated to the single JavaScript execution thread of that individual browser tab.

4.Architectural Trade-offs

Synchronizing state across windows entirely prevents zombie sessions and broken user workflows, but it means idle background tabs will instantly update their UI layouts, which might briefly startle a user if they are looking closely at two windows at once.

AuthContext.tsx

[Isolated Context View]

// VULNERABLE: State mutations are entirely bound to the local runtime memory thread.
// If Tab A updates its storage, Tab B has no idea and becomes a zombie session.
export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(!!localStorage.getItem('token'));
  const [user, setUser] = useState<{ name: string } | null>(null);

  const logout = () => {
    localStorage.removeItem('token');
    setIsAuthenticated(false);
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, logout, user }}>
      {children}
    </AuthContext.Provider>
  );
};