chore(clerk-js): Backport CHIPS removal to release/core-2 (#7946)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: brkalow

.changeset/remove-chips-build-variant.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/shared": patch
+---
+
+Remove CHIPS build variant and use `partitioned_cookies` environment flag from the Clerk API to control partitioned cookie behavior at runtime.

packages/clerk-js/package.json

@@ -42,7 +42,6 @@
     "bundlewatch:fix": "node bundlewatch-fix.mjs",
     "clean": "rimraf ./dist",
     "dev": "rspack serve --config rspack.config.js",
-    "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}",
     "dev:sandbox": "rspack serve --config rspack.config.js --env devOrigin=http://localhost:${PORT:-4000} --env sandbox=1",

packages/clerk-js/rspack.config.js

@@ -16,7 +16,6 @@ const variants = {
   clerkHeadless: 'clerk.headless',
   clerkHeadlessBrowser: 'clerk.headless.browser',
   clerkLegacyBrowser: 'clerk.legacy.browser',
-  clerkCHIPS: 'clerk.chips.browser',
 };
 
 const variantToSourceFile = {
@@ -26,7 +25,6 @@ const variantToSourceFile = {
   [variants.clerkHeadless]: './src/index.headless.ts',
   [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
   [variants.clerkLegacyBrowser]: './src/index.legacy.browser.ts',
-  [variants.clerkCHIPS]: './src/index.browser.ts',
 };
 
 /**
@@ -58,7 +56,6 @@ const common = ({ mode, variant, disableRHC = false }) => {
          */
         __BUILD_FLAG_KEYLESS_UI__: isDevelopment(mode),
         __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
-        __BUILD_VARIANT_CHIPS__: variant === variants.clerkCHIPS,
       }),
       new rspack.EnvironmentPlugin({
         CLERK_ENV: mode,
@@ -447,13 +444,6 @@ const prodConfig = ({ mode, env, analysis }) => {
     // externalsForHeadless(),
   );
 
-  const clerkCHIPS = merge(
-    entryForVariant(variants.clerkCHIPS),
-    common({ mode, variant: variants.clerkCHIPS }),
-    commonForProd(),
-    commonForProdChunked(),
-  );
-
   const clerkEsm = merge(
     entryForVariant(variants.clerk),
     common({ mode, variant: variants.clerk }),
@@ -567,7 +557,6 @@ const prodConfig = ({ mode, env, analysis }) => {
     clerkLegacyBrowser,
     clerkHeadless,
     clerkHeadlessBrowser,
-    clerkCHIPS,
     clerkEsm,
     clerkEsmNoRHC,
     clerkCjs,
@@ -670,11 +659,6 @@ const devConfig = ({ mode, env }) => {
       commonForDev(),
       // externalsForHeadless(),
     ),
-    [variants.clerkCHIPS]: merge(
-      entryForVariant(variants.clerkCHIPS),
-      common({ mode, variant: variants.clerkCHIPS }),
-      commonForDev(),
-    ),
   };
 
   if (!entryToConfigMap[variant]) {

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

@@ -12,6 +12,7 @@ import { debugLogger } from '@/utils/debug';
 import { clerkMissingDevBrowserJwt } from '../errors';
 import { eventBus, events } from '../events';
 import type { FapiClient } from '../fapiClient';
+import { Environment } from '../resources/Environment';
 import { createActiveContextCookie } from './cookies/activeContext';
 import type { ClientUatCookieHandler } from './cookies/clientUat';
 import { createClientUatCookie } from './cookies/clientUat';
@@ -74,16 +75,27 @@ export class AuthCookieService {
 
     eventBus.on(events.UserSignOut, () => this.handleSignOut());
 
+    // After Environment resolves, re-write dev browser cookies with correct
+    // partitioned attributes. Dev browser cookies are initially written before
+    // Environment is fetched, so they may have stale attributes.
+    eventBus.on(events.EnvironmentUpdate, () => {
+      this.devBrowser.refreshCookies();
+    });
+
     this.refreshTokenOnFocus();
     this.startPollingForToken();
 
-    this.clientUat = createClientUatCookie(cookieSuffix);
-    this.sessionCookie = createSessionCookie(cookieSuffix);
+    const cookieOptions = {
+      usePartitionedCookies: () => Environment.getInstance().partitionedCookies,
+    };
+    this.clientUat = createClientUatCookie(cookieSuffix, cookieOptions);
+    this.sessionCookie = createSessionCookie(cookieSuffix, cookieOptions);
     this.activeCookie = createActiveContextCookie();
     this.devBrowser = createDevBrowser({
       frontendApi: clerk.frontendApi,
       fapiClient,
       cookieSuffix,
+      cookieOptions,
     });
   }
 

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

@@ -50,7 +50,8 @@ describe('Thrown errors', () => {
     const devBrowserHandler = createDevBrowser({
       frontendApi: 'white-koala-42.clerk.accounts.dev',
       fapiClient: mockFapiClient,
-      publishableKey: 'pk_test_d2hpdGUta29hbGEtNDIuY2xlcmsuYWNjb3VudHMuZGV2JA',
+      cookieSuffix: 'test-suffix',
+      cookieOptions: { usePartitionedCookies: () => false },
     });
 
     await expect(devBrowserHandler.setup()).rejects.toThrow(

packages/clerk-js/src/core/auth/cookies/__tests__/clientUat.test.ts

@@ -19,6 +19,7 @@ describe('createClientUatCookie', () => {
   const mockCookieSuffix = 'test-suffix';
   const mockExpires = new Date('2024-12-31');
   const mockDomain = 'test.domain';
+  const defaultOptions = { usePartitionedCookies: () => false };
   const mockSet = vi.fn();
   const mockRemove = vi.fn();
   const mockGet = vi.fn();
@@ -39,14 +40,14 @@ describe('createClientUatCookie', () => {
   });
 
   it('should create both suffixed and non-suffixed cookie handlers', () => {
-    createClientUatCookie(mockCookieSuffix);
+    createClientUatCookie(mockCookieSuffix, defaultOptions);
     expect(createCookieHandler).toHaveBeenCalledTimes(2);
     expect(createCookieHandler).toHaveBeenCalledWith('__client_uat');
     expect(createCookieHandler).toHaveBeenCalledWith('__client_uat_test-suffix');
   });
 
   it('should set cookies with correct parameters in non-cross-origin context', () => {
-    const cookieHandler = createClientUatCookie(mockCookieSuffix);
+    const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set({
       id: 'test-client',
       updatedAt: new Date('2024-01-01'),
@@ -65,7 +66,7 @@ describe('createClientUatCookie', () => {
 
   it('should set cookies with None sameSite in cross-origin context', () => {
     (inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
-    const cookieHandler = createClientUatCookie(mockCookieSuffix);
+    const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set({
       id: 'test-client',
       updatedAt: new Date('2024-01-01'),
@@ -82,7 +83,7 @@ describe('createClientUatCookie', () => {
   });
 
   it('should set value to 0 when client is undefined', () => {
-    const cookieHandler = createClientUatCookie(mockCookieSuffix);
+    const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set(undefined);
 
     expect(mockSet).toHaveBeenCalledWith('0', {
@@ -95,7 +96,7 @@ describe('createClientUatCookie', () => {
   });
 
   it('should set value to 0 when client has no signed in sessions', () => {
-    const cookieHandler = createClientUatCookie(mockCookieSuffix);
+    const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set({
       id: 'test-client',
       updatedAt: new Date('2024-01-01'),
@@ -114,7 +115,7 @@ describe('createClientUatCookie', () => {
   it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
     mockGet.mockImplementationOnce(() => '1234567890').mockImplementationOnce(() => '9876543210');
 
-    const cookieHandler = createClientUatCookie(mockCookieSuffix);
+    const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
     const result = cookieHandler.get();
 
     expect(result).toBe(1234567890);
@@ -123,15 +124,15 @@ describe('createClientUatCookie', () => {
   it('should return 0 when no cookie value is present', () => {
     mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => undefined);
 
-    const cookieHandler = createClientUatCookie(mockCookieSuffix);
+    const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
     const result = cookieHandler.get();
 
     expect(result).toBe(0);
   });
 
   it('should set cookies with SameSite=None when the host requires it', () => {
     (requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
-    const cookieHandler = createClientUatCookie(mockCookieSuffix);
+    const cookieHandler = createClientUatCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set({
       id: 'test-client',
       updatedAt: new Date('2024-01-01'),
@@ -146,4 +147,21 @@ describe('createClientUatCookie', () => {
       partitioned: false,
     });
   });
+
+  it('should set partitioned cookies when usePartitionedCookies returns true', () => {
+    const cookieHandler = createClientUatCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
+    cookieHandler.set({
+      id: 'test-client',
+      updatedAt: new Date('2024-01-01'),
+      signedInSessions: ['session1'],
+    });
+
+    expect(mockSet).toHaveBeenCalledWith('1704067200', {
+      domain: mockDomain,
+      expires: mockExpires,
+      sameSite: 'None',
+      secure: true,
+      partitioned: true,
+    });
+  });
 });

packages/clerk-js/src/core/auth/cookies/__tests__/session.test.ts

@@ -17,6 +17,7 @@ describe('createSessionCookie', () => {
   const mockCookieSuffix = 'test-suffix';
   const mockToken = 'test-token';
   const mockExpires = new Date('2024-12-31');
+  const defaultOptions = { usePartitionedCookies: () => false };
   const mockSet = vi.fn();
   const mockRemove = vi.fn();
   const mockGet = vi.fn();
@@ -36,14 +37,14 @@ describe('createSessionCookie', () => {
   });
 
   it('should create both suffixed and non-suffixed cookie handlers', () => {
-    createSessionCookie(mockCookieSuffix);
+    createSessionCookie(mockCookieSuffix, defaultOptions);
     expect(createCookieHandler).toHaveBeenCalledTimes(2);
     expect(createCookieHandler).toHaveBeenCalledWith('__session');
     expect(createCookieHandler).toHaveBeenCalledWith('__session_test-suffix');
   });
 
   it('should set cookies with correct parameters in non-cross-origin context', () => {
-    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set(mockToken);
 
     expect(mockSet).toHaveBeenCalledTimes(2);
@@ -57,7 +58,7 @@ describe('createSessionCookie', () => {
 
   it('should set cookies with None sameSite in cross-origin context', () => {
     (inCrossOriginIframe as ReturnType<typeof vi.fn>).mockReturnValue(true);
-    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set(mockToken);
 
     expect(mockSet).toHaveBeenCalledWith(mockToken, {
@@ -69,14 +70,14 @@ describe('createSessionCookie', () => {
   });
 
   it('should remove both cookies when remove is called', () => {
-    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.remove();
 
     expect(mockRemove).toHaveBeenCalledTimes(2);
   });
 
   it('should remove cookies with the same attributes as set', () => {
-    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set(mockToken);
     cookieHandler.remove();
 
@@ -102,7 +103,7 @@ describe('createSessionCookie', () => {
   it('should get cookie value from suffixed cookie first, then fallback to non-suffixed', () => {
     mockGet.mockImplementationOnce(() => 'suffixed-value').mockImplementationOnce(() => 'non-suffixed-value');
 
-    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
     const result = cookieHandler.get();
 
     expect(result).toBe('suffixed-value');
@@ -111,15 +112,15 @@ describe('createSessionCookie', () => {
   it('should fallback to non-suffixed cookie when suffixed cookie is not present', () => {
     mockGet.mockImplementationOnce(() => undefined).mockImplementationOnce(() => 'non-suffixed-value');
 
-    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
     const result = cookieHandler.get();
 
     expect(result).toBe('non-suffixed-value');
   });
 
   it('should set cookies with None sameSite on .replit.dev origins', () => {
     (requiresSameSiteNone as ReturnType<typeof vi.fn>).mockReturnValue(true);
-    const cookieHandler = createSessionCookie(mockCookieSuffix);
+    const cookieHandler = createSessionCookie(mockCookieSuffix, defaultOptions);
     cookieHandler.set(mockToken);
 
     expect(mockSet).toHaveBeenCalledWith(mockToken, {
@@ -129,4 +130,17 @@ describe('createSessionCookie', () => {
       partitioned: false,
     });
   });
+
+  it('should set partitioned cookies when usePartitionedCookies returns true', () => {
+    const cookieHandler = createSessionCookie(mockCookieSuffix, { usePartitionedCookies: () => true });
+    cookieHandler.set(mockToken);
+
+    expect(mockRemove).toHaveBeenCalledTimes(2);
+    expect(mockSet).toHaveBeenCalledWith(mockToken, {
+      expires: mockExpires,
+      sameSite: 'None',
+      secure: true,
+      partitioned: true,
+    });
+  });
 });

packages/clerk-js/src/core/auth/cookies/clientUat.ts

@@ -15,13 +15,20 @@ export type ClientUatCookieHandler = {
   get: () => number;
 };
 
+export type ClientUatCookieOptions = {
+  usePartitionedCookies: () => boolean;
+};
+
 /**
  * Create a long-lived JS cookie to store the client last updated_at timestamp
  * for development instances (for production instance is set by FAPI).
  * The cookie is used as hint from the Clerk Backend packages to identify
  * if the user is authenticated or not.
  */
-export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHandler => {
+export const createClientUatCookie = (
+  cookieSuffix: string,
+  options: ClientUatCookieOptions,
+): ClientUatCookieHandler => {
   const clientUatCookie = createCookieHandler(CLIENT_UAT_COOKIE_NAME);
   const suffixedClientUatCookie = createCookieHandler(getSuffixedCookieName(CLIENT_UAT_COOKIE_NAME, cookieSuffix));
 
@@ -38,13 +45,10 @@ export const createClientUatCookie = (cookieSuffix: string): ClientUatCookieHand
      * Generally, this is handled by redirectWithAuth() being called and relying on the dev browser ID in the URL,
      * but if that isn't used we rely on this. In production, nothing is cross-domain and Lax is used when client_uat is set from FAPI.
      */
-    const sameSite = __BUILD_VARIANT_CHIPS__
-      ? 'None'
-      : inCrossOriginIframe() || requiresSameSiteNone()
-        ? 'None'
-        : 'Strict';
+    const isPartitioned = options.usePartitionedCookies();
+    const sameSite = isPartitioned || inCrossOriginIframe() || requiresSameSiteNone() ? 'None' : 'Strict';
     const secure = getSecureAttribute(sameSite);
-    const partitioned = __BUILD_VARIANT_CHIPS__ && secure;
+    const partitioned = isPartitioned && secure;
     const domain = getCookieDomain(undefined, undefined, { sameSite, secure });
 
     // '0' indicates the user is signed out