fix(clerk-js): Broadcast sign out to all tabs on long lived clients

.changeset/new-fishes-rescue.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Bug fix: Broadcast a sign out event to all opened tabs when `Clerk.signOut()` or `User.delete()` is called.

integration/testUtils/index.ts

@@ -36,10 +36,14 @@ const createExpectPageObject = ({ page }: TestArgs) => {
       expect(redirect.status()).toBe(307);
       expect(redirect.headers()['x-clerk-auth-status']).toContain('handshake');
     },
-    toBeSignedOut: () => {
-      return page.waitForFunction(() => {
-        return !window.Clerk?.user;
-      });
+    toBeSignedOut: (args?: { timeOut: number }) => {
+      return page.waitForFunction(
+        () => {
+          return !window.Clerk?.user;
+        },
+        null,
+        { timeout: args?.timeOut },
+      );
     },
     toBeSignedIn: async () => {
       return page.waitForFunction(() => {

integration/tests/sign-out-smoke.test.ts

@@ -55,7 +55,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign out
       await m.po.expect.toBeSignedOut();
     });
 
-    await mainTab.po.expect.toBeSignedOut();
+    await mainTab.po.expect.toBeSignedOut({ timeOut: 2 * 1_000 });
   });
 
   test('sign out persisting client', async ({ page, context }) => {

packages/clerk-js/src/core/clerk.ts

@@ -374,6 +374,9 @@ export class Clerk implements ClerkInterface {
 
     const handleSetActive = () => {
       const signOutCallback = typeof callbackOrOptions === 'function' ? callbackOrOptions : undefined;
+
+      // Notify other tabs that user is signing out.
+      eventBus.dispatch(events.UserSignOut, null);
       if (signOutCallback) {
         return this.setActive({
           session: null,
@@ -908,14 +911,6 @@ export class Clerk implements ClerkInterface {
 
     await onBeforeSetActive();
 
-    // If this.session exists, then signOut was triggered by the current tab
-    // and should emit. Other tabs should not emit the same event again
-    const shouldSignOutSession = this.session && newSession === null;
-    if (shouldSignOutSession) {
-      this.#broadcastSignOutEvent();
-      eventBus.dispatch(events.TokenUpdate, { token: null });
-    }
-
     //1. setLastActiveSession to passed user session (add a param).
     //   Note that this will also update the session's active organization
     //   id.
@@ -1534,6 +1529,7 @@ export class Clerk implements ClerkInterface {
     });
   };
 
+  // TODO: Deprecate this one, and mark it as internal. Is there actual benefit for external developers to use this ? Should they ever reach for it ?
   public handleUnauthenticated = async (opts = { broadcast: true }): Promise<unknown> => {
     if (!this.client || !this.session) {
       return;
@@ -1545,7 +1541,7 @@ export class Clerk implements ClerkInterface {
         return;
       }
       if (opts.broadcast) {
-        this.#broadcastSignOutEvent();
+        eventBus.dispatch(events.UserSignOut, null);
       }
       return this.setActive({ session: null });
     } catch (err) {
@@ -2061,11 +2057,21 @@ export class Clerk implements ClerkInterface {
       this.#sessionTouchOfflineScheduler.schedule(performTouch);
     });
 
+    /**
+     * Background tabs get notified of a signout event from active tab.
+     */
     this.#broadcastChannel?.addEventListener('message', ({ data }) => {
       if (data.type === 'signout') {
-        void this.handleUnauthenticated();
+        void this.handleUnauthenticated({ broadcast: false });
       }
     });
+
+    /**
+     * Allow resources within the singleton to notify other tabs about a signout event (scoped to a single tab)
+     */
+    eventBus.on(events.UserSignOut, () => {
+      this.#broadcastChannel?.postMessage({ type: 'signout' });
+    });
   };
 
   // TODO: Be more conservative about touches. Throttle, don't touch when only one user, etc
@@ -2100,10 +2106,6 @@ export class Clerk implements ClerkInterface {
     }
   };
 
-  #broadcastSignOutEvent = () => {
-    this.#broadcastChannel?.postMessage({ type: 'signout' });
-  };
-
   #setTransitiveState = () => {
     this.session = undefined;
     this.organization = undefined;

packages/clerk-js/src/core/events.ts

@@ -2,6 +2,7 @@ import type { TokenResource } from '@clerk/types';
 
 export const events = {
   TokenUpdate: 'token:update',
+  UserSignOut: 'user:signOut',
 } as const;
 
 type ClerkEvent = (typeof events)[keyof typeof events];
@@ -11,6 +12,7 @@ type TokenUpdatePayload = { token: TokenResource | null };
 
 type EventPayload = {
   [events.TokenUpdate]: TokenUpdatePayload;
+  [events.UserSignOut]: null;
 };
 
 const createEventBus = () => {

packages/clerk-js/src/core/resources/Client.ts

@@ -83,7 +83,10 @@ export class Client extends BaseResource implements ClientResource {
   removeSessions(): Promise<ClientResource> {
     return this._baseDelete({
       path: this.path() + '/sessions',
-    }) as unknown as Promise<ClientResource>;
+    }).then(e => {
+      SessionTokenCache.clear();
+      return e as unknown as ClientResource;
+    });
   }
 
   clearCache(): void {

packages/clerk-js/src/core/resources/User.ts

@@ -35,6 +35,7 @@ import type {
 import { unixEpochToDate } from '../../utils/date';
 import { normalizeUnsafeMetadata } from '../../utils/resourceParams';
 import { getFullName } from '../../utils/user';
+import { eventBus, events } from '../events';
 import { BackupCode } from './BackupCode';
 import {
   BaseResource,
@@ -241,7 +242,10 @@ export class User extends BaseResource implements UserResource {
   };
 
   delete = (): Promise<void> => {
-    return this._baseDelete({ path: '/me' });
+    return this._baseDelete({ path: '/me' }).then(res => {
+      eventBus.dispatch(events.UserSignOut, null);
+      return res;
+    });
   };
 
   getSessions = async (): Promise<SessionWithActivities[]> => {