fix(clerk-js): keep dev browser token in memory to prevent stale partitioned cookie reads (#8161)

Author: brkalow

.changeset/fix-dev-browser-partitioned-cookie.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix dev browser token being read from a stale non-partitioned cookie when `partitionedCookies` is enabled. The token is now kept in memory so FAPI requests always use the authoritative value.

integration/tests/dev-browser-partitioned-cookies.test.ts

@@ -0,0 +1,87 @@
+import { expect, test } from '@playwright/test';
+import { parsePublishableKey } from '@clerk/shared/keys';
+
+import { appConfigs } from '../presets';
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })(
+  'dev browser partitioned cookies @generic',
+  ({ app }) => {
+    test.describe.configure({ mode: 'serial' });
+
+    let fakeUser: FakeUser;
+
+    test.beforeAll(async () => {
+      const u = createTestUtils({ app });
+      fakeUser = u.services.users.createFakeUser();
+      await u.services.users.createBapiUser(fakeUser);
+    });
+
+    test.afterAll(async () => {
+      await fakeUser.deleteIfExists();
+      await app.teardown();
+    });
+
+    test('URL query param dev browser token takes precedence over existing partitioned cookie on initial load', async ({
+      page,
+      context,
+    }) => {
+      const pk = app.env.publicVariables.get('CLERK_PUBLISHABLE_KEY');
+      const { frontendApi } = parsePublishableKey(pk)!;
+      const fapiOrigin = `https://${frontendApi}`;
+
+      // Obtain a valid dev browser token directly from FAPI before any page load
+      const devBrowserRes = await page.request.post(`${fapiOrigin}/v1/dev_browser`);
+      expect(devBrowserRes.ok()).toBe(true);
+      const { id: freshToken } = await devBrowserRes.json();
+      expect(freshToken).toBeTruthy();
+
+      // Pre-set a stale __clerk_db_jwt cookie before the page ever loads.
+      // This simulates the partitioned cookie that already exists in the browser
+      // from a previous session.
+      const appUrl = new URL(app.serverUrl);
+      await context.addCookies([
+        {
+          name: '__clerk_db_jwt',
+          value: 'stale_partitioned_value',
+          domain: appUrl.hostname,
+          path: '/',
+        },
+      ]);
+
+      // Collect every dev browser token attached to FAPI requests
+      const fapiTokens: string[] = [];
+      page.on('request', req => {
+        if (req.url().includes('__clerk_db_jwt') && req.url().includes('/v1/')) {
+          const url = new URL(req.url());
+          const token = url.searchParams.get('__clerk_db_jwt');
+          if (token) {
+            fapiTokens.push(token);
+          }
+        }
+      });
+
+      // Initial page load with the fresh token in the URL query param,
+      // simulating a redirect back from Clerk's Account Portal.
+      const signInUrl = new URL(app.serverUrl + '/sign-in');
+      signInUrl.searchParams.set('__clerk_db_jwt', freshToken);
+
+      await page.goto(signInUrl.toString());
+      await page.waitForLoadState('networkidle');
+
+      // Every FAPI request during initial load must use the URL token,
+      // not the stale partitioned cookie.
+      expect(fapiTokens.length).toBeGreaterThan(0);
+      for (const token of fapiTokens) {
+        expect(token).toBe(freshToken);
+        expect(token).not.toBe('stale_partitioned_value');
+      }
+
+      // Verify clerk-js is functional: sign in should succeed
+      const u = createTestUtils({ app, page, context });
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.expect.toBeSignedIn();
+    });
+  },
+);

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

@@ -37,15 +37,22 @@ export function createDevBrowser({
 }: CreateDevBrowserOptions): DevBrowser {
   const devBrowserCookie = createDevBrowserCookie(cookieSuffix, cookieOptions);
 
+  // Hold the dev browser token in memory so it's always available to FAPI
+  // interceptors, even before Environment resolves and cookies can be written
+  // with the correct Partitioned attribute.
+  let devBrowserInMemory: string | undefined;
+
   function getDevBrowser() {
-    return devBrowserCookie.get();
+    return devBrowserInMemory || devBrowserCookie.get();
   }
 
   function setDevBrowser(devBrowser: string) {
+    devBrowserInMemory = devBrowser;
     devBrowserCookie.set(devBrowser);
   }
 
   function removeDevBrowser() {
+    devBrowserInMemory = undefined;
     devBrowserCookie.remove();
   }
 
@@ -81,7 +88,9 @@ export function createDevBrowser({
     }
 
     // 2. If no dev browser is found in the first step, check if one is already available in the __clerk_db_jwt JS cookie
-    if (devBrowserCookie.get()) {
+    const existingDevBrowser = devBrowserCookie.get();
+    if (existingDevBrowser) {
+      devBrowserInMemory = existingDevBrowser;
       return;
     }