fix(clerk-js): Use focus event to trigger session touch (#3786)

Co-authored-by: Nikos Douvlis <[email protected]>

.changeset/new-donkeys-sneeze.md

@@ -0,0 +1,7 @@
+---
+"@clerk/clerk-js": minor
+---
+
+Fixes a bug where multiple tabs with different active organizations would not always respect the selected organization. Going forward, when a tab is focused the active organization will immediately be updated to the tab's last active organization.
+
+Additionally, `Clerk.session.getToken()` now accepts an `organizationId` option. The provided organization ID will be used to set organization-related claims in the generated session token.

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
   "files": [
-    { "path": "./dist/clerk.browser.js", "maxSize": "62kB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "63kB" },
     { "path": "./dist/clerk.headless.js", "maxSize": "43kB" },
     { "path": "./dist/ui-common*.js", "maxSize": "85KB" },
     { "path": "./dist/vendors*.js", "maxSize": "70KB" },

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

@@ -154,21 +154,21 @@ describe('Clerk singleton', () => {
       remove: jest.fn(),
       status: 'active',
       user: {},
-      touch: jest.fn(),
+      touch: jest.fn(() => Promise.resolve()),
       getToken: jest.fn(),
       lastActiveToken: { getRawString: () => 'mocked-token' },
     };
-    let evenBusSpy;
+    let eventBusSpy;
 
     beforeEach(() => {
-      evenBusSpy = jest.spyOn(eventBus, 'dispatch');
+      eventBusSpy = jest.spyOn(eventBus, 'dispatch');
     });
 
     afterEach(() => {
       mockSession.remove.mockReset();
       mockSession.touch.mockReset();
 
-      evenBusSpy?.mockRestore();
+      eventBusSpy?.mockRestore();
       // cleanup global window pollution
       (window as any).__unstable__onBeforeSetActive = null;
       (window as any).__unstable__onAfterSetActive = null;
@@ -183,12 +183,12 @@ describe('Clerk singleton', () => {
       await sut.setActive({ session: null });
       await waitFor(() => {
         expect(mockSession.touch).not.toHaveBeenCalled();
-        expect(evenBusSpy).toHaveBeenCalledWith('token:update', { token: null });
+        expect(eventBusSpy).toHaveBeenCalledWith('token:update', { token: null });
       });
     });
 
     it('calls session.touch by default', async () => {
-      mockSession.touch.mockReturnValueOnce(Promise.resolve());
+      mockSession.touch.mockReturnValue(Promise.resolve());
       mockClientFetch.mockReturnValue(Promise.resolve({ activeSessions: [mockSession] }));
 
       const sut = new Clerk(productionPublishableKey);
@@ -236,7 +236,7 @@ describe('Clerk singleton', () => {
       mockClientFetch.mockReturnValue(Promise.resolve({ activeSessions: [mockSession] }));
 
       (window as any).__unstable__onBeforeSetActive = () => {
-        expect(evenBusSpy).toHaveBeenCalledWith('token:update', { token: null });
+        expect(eventBusSpy).toHaveBeenCalledWith('token:update', { token: null });
       };
 
       const sut = new Clerk(productionPublishableKey);
@@ -249,7 +249,7 @@ describe('Clerk singleton', () => {
       mockClientFetch.mockReturnValue(Promise.resolve({ activeSessions: [mockSession] }));
 
       (window as any).__unstable__onBeforeSetActive = () => {
-        expect(evenBusSpy).toHaveBeenCalledWith('token:update', { token: mockSession.lastActiveToken });
+        expect(eventBusSpy).toHaveBeenCalledWith('token:update', { token: mockSession.lastActiveToken });
       };
 
       const sut = new Clerk(productionPublishableKey);

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

@@ -56,7 +56,7 @@ export class AuthCookieService {
       this.setClientUatCookieForDevelopmentInstances();
     });
 
-    this.refreshTokenOnVisibilityChange();
+    this.refreshTokenOnFocus();
     this.startPollingForToken();
 
     this.clientUat = createClientUatCookie(cookieSuffix);
@@ -110,27 +110,47 @@ export class AuthCookieService {
     this.poller.startPollingForSessionToken(() => this.refreshSessionToken());
   }
 
-  private refreshTokenOnVisibilityChange() {
-    document.addEventListener('visibilitychange', () => {
+  private refreshTokenOnFocus() {
+    window.addEventListener('focus', () => {
       if (document.visibilityState === 'visible') {
-        void this.refreshSessionToken();
+        // Certain data-fetching libraries that refetch on focus (such as swr) use setTimeout(cb, 0) to schedule a task on the event loop.
+        // This gives us an opportunity to ensure the session cookie is updated with a fresh token before the fetch occurs, but it needs to
+        // be done with a microtask. Promises schedule microtasks, and so by using `updateCookieImmediately: true`, we ensure that the cookie
+        // is updated as part of the scheduled microtask. Our existing event-based mechanism to update the cookie schedules a task, and so the cookie
+        // is updated too late and not guaranteed to be fresh before the refetch occurs.
+        void this.refreshSessionToken({ updateCookieImmediately: true });
       }
     });
   }
 
-  private async refreshSessionToken(): Promise<void> {
+  private async refreshSessionToken({
+    updateCookieImmediately = false,
+  }: {
+    updateCookieImmediately?: boolean;
+  } = {}): Promise<void> {
     if (!this.clerk.session) {
       return;
     }
 
     try {
-      await this.clerk.session.getToken();
+      const token = await this.clerk.session.getToken();
+      if (updateCookieImmediately) {
+        this.updateSessionCookie(token);
+      }
     } catch (e) {
       return this.handleGetTokenError(e);
     }
   }
 
   private updateSessionCookie(token: string | null) {
+    // only update session cookie from the active tab,
+    // or if the tab's selected organization matches the session's active organization
+    if (!document.hasFocus() && !this.isCurrentOrganizationActive()) {
+      return;
+    }
+
+    this.setActiveOrganizationInStorage();
+
     return token ? this.sessionCookie.set(token) : this.sessionCookie.remove();
   }
 
@@ -163,4 +183,30 @@ export class AuthCookieService {
 
     clerkCoreErrorTokenRefreshFailed(e.toString());
   }
+
+  /**
+   * The below methods are used to determine whether or not an unfocused tab can be responsible
+   * for setting the session cookie. A session cookie should only be set by a tab who's selected
+   * organization matches the session's active organization. By storing the active organization
+   * ID in local storage, we can check the value across tabs. If a tab's organization ID does not
+   * match the value in local storage, it is not responsible for updating the session cookie.
+   */
+
+  public setActiveOrganizationInStorage() {
+    if (this.clerk.organization?.id) {
+      localStorage.setItem('clerk_active_org', this.clerk.organization.id);
+    } else {
+      localStorage.removeItem('clerk_active_org');
+    }
+  }
+
+  private isCurrentOrganizationActive() {
+    const activeOrganizationId = localStorage.getItem('clerk_active_org');
+
+    if (!activeOrganizationId && !this.clerk.organization?.id) {
+      return true;
+    }
+
+    return this.clerk.organization?.id === activeOrganizationId;
+  }
 }

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

@@ -173,6 +173,7 @@ export class Clerk implements ClerkInterface {
   #listeners: Array<(emission: Resources) => void> = [];
   #options: ClerkOptions = {};
   #pageLifecycle: ReturnType<typeof createPageLifecycle> | null = null;
+  #touchThrottledUntil = 0;
 
   get publishableKey(): string {
     return this.#publishableKey;
@@ -1613,6 +1614,8 @@ export class Clerk implements ClerkInterface {
         // set in updateClient
         this.updateEnvironment(environment);
 
+        this.#authService.setActiveOrganizationInStorage();
+
         if (await this.#redirectFAPIInitiatedFlow()) {
           return false;
         }
@@ -1678,8 +1681,13 @@ export class Clerk implements ClerkInterface {
       return;
     }
 
-    this.#pageLifecycle?.onPageVisible(() => {
+    this.#pageLifecycle?.onPageFocus(() => {
       if (this.session) {
+        if (this.#touchThrottledUntil > Date.now()) {
+          return;
+        }
+        this.#touchThrottledUntil = Date.now() + 5_000;
+
         void this.#touchLastActiveSession(this.session);
       }
     });
@@ -1696,6 +1704,7 @@ export class Clerk implements ClerkInterface {
     if (!session || !this.#options.touchSession) {
       return Promise.resolve();
     }
+
     await session.touch().catch(e => {
       if (is4xxError(e)) {
         void this.handleUnauthenticated();

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

@@ -117,8 +117,8 @@ export class Session extends BaseResource implements SessionResource {
   // and retrieve it using the session id concatenated with the jwt template name.
   // e.g. session id is 'sess_abc12345' and jwt template name is 'haris'
   // The session token ID will be 'sess_abc12345' and the jwt template token ID will be 'sess_abc12345-haris'
-  #getCacheId(template?: string) {
-    return `${template ? `${this.id}-${template}` : this.id}-${this.updatedAt.getTime()}`;
+  #getCacheId(template?: string, organizationId?: string) {
+    return [this.id, template, organizationId, this.updatedAt.getTime()].filter(Boolean).join('-');
   }
 
   protected fromJSON(data: SessionJSON | null): this {
@@ -151,28 +151,38 @@ export class Session extends BaseResource implements SessionResource {
       return null;
     }
 
-    const { leewayInSeconds, template, skipCache = false } = options || {};
+    const {
+      leewayInSeconds,
+      template,
+      skipCache = false,
+      organizationId = Session.clerk.organization?.id,
+    } = options || {};
+
     if (!template && Number(leewayInSeconds) >= 60) {
       throw new Error('Leeway can not exceed the token lifespan (60 seconds)');
     }
 
-    const tokenId = this.#getCacheId(template);
+    const tokenId = this.#getCacheId(template, organizationId);
     const cachedEntry = skipCache ? undefined : SessionTokenCache.get({ tokenId }, leewayInSeconds);
 
+    // Dispatch tokenUpdate only for __session tokens with the session's active organization ID, and not JWT templates
+    const shouldDispatchTokenUpdate = !template && options?.organizationId === Session.clerk.organization?.id;
+
     if (cachedEntry) {
       const cachedToken = await cachedEntry.tokenResolver;
-      if (!template) {
+      if (shouldDispatchTokenUpdate) {
         eventBus.dispatch(events.TokenUpdate, { token: cachedToken });
       }
       // Return null when raw string is empty to indicate that there it's signed-out
       return cachedToken.getRawString() || null;
     }
     const path = template ? `${this.path()}/tokens/${template}` : `${this.path()}/tokens`;
-    const tokenResolver = Token.create(path);
+    // TODO: update template endpoint to accept organizationId
+    const params = template ? {} : { ...(organizationId && { organizationId }) };
+    const tokenResolver = Token.create(path, params);
     SessionTokenCache.set({ tokenId, tokenResolver });
     return tokenResolver.then(token => {
-      // Dispatch tokenUpdate only for __session tokens and not JWT templates
-      if (!template) {
+      if (shouldDispatchTokenUpdate) {
         eventBus.dispatch(events.TokenUpdate, { token });
       }
       // Return null when raw string is empty to indicate that there it's signed-out

packages/clerk-js/src/core/resources/__tests__/Session.test.ts

@@ -1,9 +1,9 @@
-import type { SessionJSON } from '@clerk/types';
+import type { OrganizationJSON, SessionJSON } from '@clerk/types';
 
 import { eventBus } from '../../events';
 import { createFapiClient } from '../../fapiClient';
 import { clerkMock, createUser, mockDevClerkInstance, mockJwt, mockNetworkFailedFetch } from '../../test/fixtures';
-import { BaseResource, Session } from '../internal';
+import { BaseResource, Organization, Session } from '../internal';
 
 describe('Session', () => {
   describe('creating new session', () => {
@@ -21,10 +21,11 @@ describe('Session', () => {
       global.fetch?.mockClear();
     });
 
-    it('dispatches token:update event on initilization with lastActiveToken', () => {
+    it('dispatches token:update event on initialization with lastActiveToken', () => {
       new Session({
         status: 'active',
         id: 'session_1',
+
         object: 'session',
         user: createUser({}),
         last_active_organization_id: 'activeOrganization',
@@ -34,7 +35,7 @@ describe('Session', () => {
         updated_at: new Date().getTime(),
       } as SessionJSON);
 
-      expect(dispatchSpy).toBeCalledTimes(1);
+      expect(dispatchSpy).toHaveBeenCalledTimes(1);
       expect(dispatchSpy.mock.calls[0]).toMatchSnapshot();
     });
   });
@@ -66,10 +67,67 @@ describe('Session', () => {
 
       await session.getToken();
 
-      expect(dispatchSpy).toBeCalledTimes(1);
+      expect(dispatchSpy).toHaveBeenCalledTimes(1);
       expect(dispatchSpy.mock.calls[0]).toMatchSnapshot();
     });
 
+    it('does not dispatch token:update if template is provided', async () => {
+      const session = new Session({
+        status: 'active',
+        id: 'session_1',
+        object: 'session',
+        user: createUser({}),
+        last_active_organization_id: 'activeOrganization',
+        actor: null,
+        created_at: new Date().getTime(),
+        updated_at: new Date().getTime(),
+      } as SessionJSON);
+
+      await session.getToken({ template: 'foobar' });
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(0);
+    });
+
+    it('dispatches token:update when provided organization ID matches current active organization', async () => {
+      BaseResource.clerk = clerkMock({
+        organization: new Organization({ id: 'activeOrganization' } as OrganizationJSON),
+      }) as any;
+      const session = new Session({
+        status: 'active',
+        id: 'session_1',
+        object: 'session',
+        user: createUser({}),
+        last_active_organization_id: 'activeOrganization',
+        actor: null,
+        created_at: new Date().getTime(),
+        updated_at: new Date().getTime(),
+      } as SessionJSON);
+
+      await session.getToken({ organizationId: 'activeOrganization' });
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not dispatch token:update when provided organization ID does not match current active organization', async () => {
+      BaseResource.clerk = clerkMock({
+        organization: new Organization({ id: 'anotherOrganization' } as OrganizationJSON),
+      }) as any;
+      const session = new Session({
+        status: 'active',
+        id: 'session_1',
+        object: 'session',
+        user: createUser({}),
+        last_active_organization_id: 'activeOrganization',
+        actor: null,
+        created_at: new Date().getTime(),
+        updated_at: new Date().getTime(),
+      } as SessionJSON);
+
+      await session.getToken({ organizationId: 'activeOrganization' });
+
+      expect(dispatchSpy).toHaveBeenCalledTimes(0);
+    });
+
     describe('with offline browser and network failure', () => {
       let warnSpy;
       beforeEach(() => {
@@ -105,7 +163,7 @@ describe('Session', () => {
 
         const token = await session.getToken();
 
-        expect(dispatchSpy).toBeCalledTimes(1);
+        expect(dispatchSpy).toHaveBeenCalledTimes(1);
         expect(token).toEqual(null);
       });
     });

packages/clerk-js/src/core/resources/__tests__/__snapshots__/Session.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Session creating new session dispatches token:update event on initilization with lastActiveToken 1`] = `
+exports[`Session creating new session dispatches token:update event on initialization with lastActiveToken 1`] = `
 [
   "token:update",
   {