refactor broadcast to be intitiated within tokenCache

Author: jacekradko

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

@@ -325,28 +325,24 @@ describe('SessionTokenCache', () => {
   });
 
   describe('broadcast sending', () => {
-    it('broadcasts when set() is called with metadata', () => {
+    it('broadcasts automatically when token resolves with valid claims', async () => {
+      const futureExp = Math.floor(Date.now() / 1000) + 3600;
       const tokenResolver = Promise.resolve({
         getRawString: () => mockJwt,
-        jwt: { claims: { iat: 1675876730 } },
+        jwt: { claims: { exp: futureExp, iat: 1675876730, sid: 'session_123' } },
       } as any);
 
-      SessionTokenCache.set(
-        {
-          tokenId: 'session_123',
-          tokenResolver,
-        },
-        {
-          organizationId: null,
-          sessionId: 'session_123',
-          template: undefined,
-          tokenRaw: mockJwt,
-        },
-      );
+      SessionTokenCache.set({
+        tokenId: 'session_123',
+        tokenResolver,
+      });
+
+      // Wait for the token to resolve and broadcast to happen
+      await tokenResolver;
 
       expect(mockBroadcastChannel.postMessage).toHaveBeenCalledWith(
         expect.objectContaining({
-          organizationId: null,
+          organizationId: undefined,
           sessionId: 'session_123',
           template: undefined,
           tokenId: 'session_123',
@@ -356,38 +352,36 @@ describe('SessionTokenCache', () => {
       );
     });
 
-    it('does not broadcast when set() is called without metadata', () => {
+    it('does not broadcast when token has no sid claim', async () => {
+      const futureExp = Math.floor(Date.now() / 1000) + 3600;
       const tokenResolver = Promise.resolve({
         getRawString: () => mockJwt,
-        jwt: { claims: { iat: 1675876730 } },
+        jwt: { claims: { exp: futureExp, iat: 1675876730 } },
       } as any);
 
       SessionTokenCache.set({
         tokenId: 'session_123',
         tokenResolver,
       });
 
+      await tokenResolver;
+
       expect(mockBroadcastChannel.postMessage).not.toHaveBeenCalled();
     });
 
-    it('validates tokenId matches expected format before broadcasting', () => {
+    it('validates tokenId matches expected format before broadcasting', async () => {
+      const futureExp = Math.floor(Date.now() / 1000) + 3600;
       const tokenResolver = Promise.resolve({
         getRawString: () => mockJwt,
-        jwt: { claims: { iat: 1675876730 } },
+        jwt: { claims: { exp: futureExp, iat: 1675876730, sid: 'session_123' } },
       } as any);
 
-      SessionTokenCache.set(
-        {
-          tokenId: 'wrong-token-id',
-          tokenResolver,
-        },
-        {
-          sessionId: 'session_123',
-          tokenRaw: mockJwt,
-          template: undefined,
-          organizationId: null,
-        },
-      );
+      SessionTokenCache.set({
+        tokenId: 'wrong-token-id',
+        tokenResolver,
+      });
+
+      await tokenResolver;
 
       expect(mockBroadcastChannel.postMessage).not.toHaveBeenCalled();
     });

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

@@ -32,7 +32,7 @@ import {
   serializePublicKeyCredentialAssertion,
   webAuthnGetCredential as webAuthnGetCredentialOnWindow,
 } from '@/utils/passkeys';
-import { buildTokenId } from '@/utils/tokenId';
+import { TokenId } from '@/utils/tokenId';
 
 import { clerkInvalidStrategy, clerkMissingWebAuthnPublicKeyOptions } from '../errors';
 import { eventBus, events } from '../events';
@@ -145,7 +145,7 @@ export class Session extends BaseResource implements SessionResource {
   #getCacheId(template?: string, organizationId?: string | null) {
     const resolvedOrganizationId =
       typeof organizationId === 'undefined' ? this.lastActiveOrganizationId : organizationId;
-    return buildTokenId(this.id, template, resolvedOrganizationId);
+    return TokenId.build(this.id, template, resolvedOrganizationId);
   }
 
   startVerification = async ({ level }: SessionVerifyCreateParams): Promise<SessionVerificationResource> => {
@@ -399,19 +399,6 @@ export class Session extends BaseResource implements SessionResource {
     return tokenResolver.then(token => {
       const tokenRaw = token.getRawString();
 
-      // Update cache with broadcast metadata now that we have the resolved token
-      SessionTokenCache.set(
-        { tokenId, tokenResolver: Promise.resolve(token) },
-        tokenRaw
-          ? {
-              organizationId,
-              sessionId: this.id,
-              template,
-              tokenRaw,
-            }
-          : undefined,
-      );
-
       if (shouldDispatchTokenUpdate) {
         eventBus.emit(events.TokenUpdate, { token });
 

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

@@ -1,7 +1,7 @@
 import type { TokenResource } from '@clerk/types';
 
 import { debugLogger } from '@/utils/debug';
-import { buildTokenId } from '@/utils/tokenId';
+import { TokenId } from '@/utils/tokenId';
 
 import { Token } from './resources/internal';
 
@@ -30,30 +30,6 @@ interface TokenCacheEntry extends TokenCacheKeyJSON {
   tokenResolver: Promise<TokenResource>;
 }
 
-/**
- * Metadata broadcast to other tabs when a token is fetched or refreshed.
- * Contains session and organization context along with the raw token value.
- */
-export interface TokenBroadcastMetadata {
-  /**
-   * Organization ID associated with the token, if any.
-   * Nullable for tokens not scoped to an organization.
-   */
-  organizationId?: string | null;
-  /**
-   * Session ID for which the token was issued.
-   */
-  sessionId: string;
-  /**
-   * JWT template name used to generate the token, if applicable.
-   */
-  template?: string;
-  /**
-   * Raw JWT token string.
-   */
-  tokenRaw: string;
-}
-
 type Seconds = number;
 
 /**
@@ -90,13 +66,12 @@ export interface TokenCache {
   get(cacheKeyJSON: TokenCacheKeyJSON, leeway?: number): TokenCacheEntry | undefined;
 
   /**
-   * Stores a token entry in the cache and optionally broadcasts to other tabs.
+   * Stores a token entry in the cache and broadcasts to other tabs when the token resolves.
    *
    * @param entry - TokenCacheEntry containing tokenId, tokenResolver, and optional audience
-   * @param broadcast - Optional metadata to broadcast this token update to other tabs via BroadcastChannel
-   * Side effects: Schedules automatic expiration cleanup, broadcasts to other tabs if metadata provided
+   * Side effects: Schedules automatic expiration cleanup, broadcasts to other tabs when token resolves
    */
-  set(entry: TokenCacheEntry, broadcast?: TokenBroadcastMetadata): void;
+  set(entry: TokenCacheEntry): void;
 
   /**
    * Returns the current number of cached entries.
@@ -224,7 +199,7 @@ const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
    * Validates token ID, parses JWT, and updates cache if token is newer than existing entry.
    */
   const handleBroadcastMessage = async ({ data }: MessageEvent<SessionTokenEvent>) => {
-    const expectedTokenId = buildTokenId(data.sessionId, data.template, data.organizationId);
+    const expectedTokenId = TokenId.build(data.sessionId, data.template, data.organizationId);
     if (data.tokenId !== expectedTokenId) {
       debugLogger.warn(
         'Ignoring token broadcast with mismatched tokenId',
@@ -304,49 +279,16 @@ const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
     });
   };
 
-  const set = (entry: TokenCacheEntry, broadcast?: TokenBroadcastMetadata) => {
-    // Ensure BroadcastChannel is initialized so this tab can receive broadcasts
-    const channel = ensureBroadcastChannel();
+  const set = (entry: TokenCacheEntry) => {
+    ensureBroadcastChannel();
 
     setInternal(entry);
-
-    if (broadcast && channel) {
-      const expectedTokenId = buildTokenId(broadcast.sessionId, broadcast.template, broadcast.organizationId);
-      if (entry.tokenId !== expectedTokenId) {
-        return;
-      }
-
-      // Generate a unique trace ID for this broadcast
-      const traceId = `bc_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
-
-      debugLogger.info(
-        'Broadcasting token update to other tabs',
-        {
-          organizationId: broadcast.organizationId,
-          sessionId: broadcast.sessionId,
-          template: broadcast.template,
-          tokenId: entry.tokenId,
-          traceId,
-        },
-        'tokenCache',
-      );
-
-      const message: SessionTokenEvent = {
-        organizationId: broadcast.organizationId,
-        sessionId: broadcast.sessionId,
-        template: broadcast.template,
-        tokenId: entry.tokenId,
-        tokenRaw: broadcast.tokenRaw,
-        traceId,
-      };
-
-      channel.postMessage(message);
-    }
   };
 
   /**
    * Internal cache setter that stores an entry and schedules expiration cleanup.
    * Resolves the token promise to extract expiration claims and set a deletion timeout.
+   * Automatically broadcasts to other tabs when the token resolves.
    */
   const setInternal = (entry: TokenCacheEntry) => {
     const cacheKey = new TokenCacheKey(prefix, {
@@ -395,6 +337,44 @@ const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
         if (typeof (timeoutId as any).unref === 'function') {
           (timeoutId as any).unref();
         }
+
+        const channel = broadcastChannel;
+        if (channel) {
+          const tokenRaw = newToken.getRawString();
+          if (tokenRaw && claims.sid) {
+            const sessionId = claims.sid;
+            const organizationId = claims.org_id || (claims.o as any)?.id;
+            const template = TokenId.extractTemplate(entry.tokenId, sessionId, organizationId);
+
+            const expectedTokenId = TokenId.build(sessionId, template, organizationId);
+            if (entry.tokenId === expectedTokenId) {
+              const traceId = `bc_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+
+              debugLogger.info(
+                'Broadcasting token update to other tabs',
+                {
+                  organizationId,
+                  sessionId,
+                  template,
+                  tokenId: entry.tokenId,
+                  traceId,
+                },
+                'tokenCache',
+              );
+
+              const message: SessionTokenEvent = {
+                organizationId,
+                sessionId,
+                template,
+                tokenId: entry.tokenId,
+                tokenRaw,
+                traceId,
+              };
+
+              channel.postMessage(message);
+            }
+          }
+        }
       })
       .catch(() => {
         deleteKey();