feat(clerk-js): Dedupe getToken requests

packages/clerk-js/bundlewatch.config.json

@@ -2,6 +2,7 @@
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "821KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
+    { "path": "./dist/clerk.channel.browser.js", "maxSize": "81KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "123KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "63KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },

packages/clerk-js/package.json

@@ -26,6 +26,7 @@
   "module": "dist/clerk.mjs",
   "types": "dist/types/index.d.ts",
   "files": [
+    "channel",
     "dist",
     "headless",
     "no-rhc"
@@ -42,6 +43,7 @@
     "bundlewatch:fix": "node bundlewatch-fix.mjs",
     "clean": "rimraf ./dist",
     "dev": "rspack serve --config rspack.config.js",
+    "dev:channel": "rspack serve --config rspack.config.js --env variant=\"clerk.channel.browser\"",
     "dev:chips": "rspack serve --config rspack.config.js --env variant=\"clerk.chips.browser\"",
     "dev:headless": "rspack serve --config rspack.config.js --env variant=\"clerk.headless.browser\"",
     "dev:origin": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000}",

packages/clerk-js/rspack.config.js

@@ -17,6 +17,7 @@ const variants = {
   clerkHeadlessBrowser: 'clerk.headless.browser',
   clerkLegacyBrowser: 'clerk.legacy.browser',
   clerkCHIPS: 'clerk.chips.browser',
+  clerkChannelBrowser: 'clerk.channel.browser',
 };
 
 const variantToSourceFile = {
@@ -27,6 +28,7 @@ const variantToSourceFile = {
   [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
   [variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
   [variants.clerkCHIPS]: './src/index.chips.browser.ts',
+  [variants.clerkChannelBrowser]: './src/index.channel.browser.ts',
 };
 
 /**
@@ -58,6 +60,7 @@ const common = ({ mode, variant, disableRHC = false }) => {
          */
         __BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
         __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
+        __BUILD_VARIANT_CHANNEL__: variant === variants.clerkChannelBrowser,
         __BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
       }),
       new rspack.EnvironmentPlugin({
@@ -424,6 +427,13 @@ const prodConfig = ({ mode, env, analysis }) => {
     commonForProdChunked(),
   );
 
+  const clerkChannelBrowser = merge(
+    entryForVariant(variants.clerkChannelBrowser),
+    common({ mode, variant: variants.clerkChannelBrowser }),
+    commonForProd(),
+    commonForProdChunked(),
+  );
+
   const clerkEsm = merge(
     entryForVariant(variants.clerk),
     common({ mode, variant: variants.clerk }),
@@ -538,6 +548,7 @@ const prodConfig = ({ mode, env, analysis }) => {
     clerkHeadless,
     clerkHeadlessBrowser,
     clerkCHIPS,
+    clerkChannelBrowser,
     clerkEsm,
     clerkEsmNoRHC,
     clerkCjs,
@@ -645,6 +656,11 @@ const devConfig = ({ mode, env }) => {
       common({ mode, variant: variants.clerkCHIPS }),
       commonForDev(),
     ),
+    [variants.clerkChannelBrowser]: merge(
+      entryForVariant(variants.clerkChannelBrowser),
+      common({ mode, variant: variants.clerkChannelBrowser }),
+      commonForDev(),
+    ),
   };
 
   if (!entryToConfigMap[variant]) {

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

@@ -132,15 +132,20 @@ interface SessionTokenEvent {
 }
 
 /**
- * Creates an in-memory token cache with BroadcastChannel synchronization across tabs.
+ * Creates an in-memory token cache with optional BroadcastChannel synchronization across tabs.
  * Automatically manages token expiration and cleanup via scheduled timeouts.
+ * BroadcastChannel support is enabled only in the channel build variant.
  */
 const MemoryTokenCache = (prefix = KEY_PREFIX): TokenCache => {
   const cache = new Map<string, TokenCacheValue>();
 
   let broadcastChannel: BroadcastChannel | null = null;
 
   const ensureBroadcastChannel = (): BroadcastChannel | null => {
+    if (!__BUILD_VARIANT_CHANNEL__) {
+      return null;
+    }
+
     if (broadcastChannel) {
       return broadcastChannel;
     }

packages/clerk-js/src/global.d.ts

@@ -11,6 +11,7 @@ declare const __DEV__: boolean;
  * Build time feature flags.
  */
 declare const __BUILD_DISABLE_RHC__: string;
+declare const __BUILD_VARIANT_CHANNEL__: boolean;
 declare const __BUILD_VARIANT_CHIPS__: boolean;
 
 interface Window {

packages/clerk-js/src/index.channel.browser.ts

@@ -0,0 +1,36 @@
+// It's crucial this is the first import,
+// otherwise chunk loading will not work
+// eslint-disable-next-line
+import './utils/setWebpackChunkPublicPath';
+
+import { Clerk } from './core/clerk';
+
+import { mountComponentRenderer } from './ui/Components';
+
+Clerk.mountComponentRenderer = mountComponentRenderer;
+
+const publishableKey =
+  document.querySelector('script[data-clerk-publishable-key]')?.getAttribute('data-clerk-publishable-key') ||
+  window.__clerk_publishable_key ||
+  '';
+
+const proxyUrl =
+  document.querySelector('script[data-clerk-proxy-url]')?.getAttribute('data-clerk-proxy-url') ||
+  window.__clerk_proxy_url ||
+  '';
+
+const domain =
+  document.querySelector('script[data-clerk-domain]')?.getAttribute('data-clerk-domain') || window.__clerk_domain || '';
+
+// Ensure that if the script has already been injected we don't overwrite the existing Clerk instance.
+if (!window.Clerk) {
+  window.Clerk = new Clerk(publishableKey, {
+    proxyUrl,
+    // @ts-expect-error
+    domain,
+  });
+}
+
+if (module.hot) {
+  module.hot.accept();
+}