Sign out every open tab together

How to do it

After sign-out or an account switch, post a message on a BroadcastChannel, such as session, with the new user ID or none. Each tab listens, clears its data cache and in-memory state, and loads the sign-in page or the new account's start screen. A tab that missed the message, such as one asleep in the background, checks the user ID on its next response. Wipe what the browser stored, as wipe browser data on sign-out says. End the session on the server, as sign out of one device or all of them says.

Examples

TypeScript example

const sessionChannel = new BroadcastChannel('session');

export function announceSessionChange(userId: string | null) {
  sessionChannel.postMessage({ userId });
}

sessionChannel.addEventListener('message', ({ data }) => {
  if (data.userId === currentUserId) return;
  queryClient.clear();
  location.assign(data.userId ? '/' : '/sign-in');
});

Python example

def test_sign_out_reaches_other_tabs(context):
    first, second = context.new_page(), context.new_page()
    for page in (first, second):
        page.goto("https://app.example.com/customers")
    first.get_by_role("button", name="Sign out").click()
    expect(second).to_have_url(re.compile(r"/sign-in$"), timeout=2000)
    expect(second.get_by_text("Northwind Traders")).to_have_count(0)

How to check

A browser test signs in, opens a customer list in two tabs and signs out in the first. Within 2 seconds the second tab shows the sign-in page, and 0 customer names remain in its page text.

Sources

• HTML Standard on broadcasting to other browsing contexts

Related rules

• Wipe browser data on sign-out in Website
• Let people sign out of one device or all of them in Accounts