Multi-Tab Logout

Test Scenarios:

• Login in one tab → verify other tabs become authenticated
• Logout from any tab → verify all tabs log out
• Force logout → verify alert appears in all tabs
• Test both sync methods (BroadcastChannel vs localStorage)

Playwright Test Example:

// Test logout sync across tabs
const page1 = await context.newPage();
const page2 = await context.newPage();
const page3 = await context.newPage();

await page1.goto('/challenges/multi-tab-logout');
await page2.goto('/challenges/multi-tab-logout');
await page3.goto('/challenges/multi-tab-logout');

// Login in tab 1
await page1.fill('#username-input', 'testuser');
await page1.click('#login-btn');

// Wait for sync
await page1.waitForTimeout(500);

// Verify all tabs are authenticated
await expect(page1.locator('#auth-status')).toContainText('Authenticated');
await expect(page2.locator('#auth-status')).toContainText('Authenticated');
await expect(page3.locator('#auth-status')).toContainText('Authenticated');

// Logout all tabs from tab 2
await page2.click('#logout-all-btn');

// Verify all tabs logged out
await expect(page1.locator('#auth-status')).toContainText('Not Authenticated');
await expect(page2.locator('#auth-status')).toContainText('Not Authenticated');
await expect(page3.locator('#auth-status')).toContainText('Not Authenticated');

// Verify force logout alert
await expect(page1.locator('#force-logout-alert')).toBeVisible();
await expect(page3.locator('#force-logout-alert')).toBeVisible();