fix(clerk-js): rewrite __clerk_db_jwt without a missing-cookie window

.changeset/dev-browser-cookie-atomic.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/backend': patch
+---
+
+Development instances no longer drop the suffixed `__clerk_db_jwt` cookie while rewriting it, which was causing intermittent `dev-browser-missing` 401s on concurrent requests.

packages/backend/src/tokens/__tests__/authenticateContext.test.ts

@@ -27,6 +27,23 @@ describe('AuthenticateContext', () => {
 
   describe('suffixedCookies', () => {
     describe('use un-suffixed cookies', () => {
+      it('still reads a suffixed __clerk_db_jwt when session cookies are un-suffixed', async () => {
+        const headers = new Headers({
+          cookie: createCookieHeader({
+            __client_uat: clientUat,
+            __session: session,
+            __clerk_db_jwt_MqCvchyS: '__clerk_db_jwt-suffixed',
+          }),
+        });
+        const clerkRequest = createClerkRequest(new Request('http://example.com', { headers }));
+        const context = await createAuthenticateContext(clerkRequest, {
+          publishableKey: pkLive,
+        });
+
+        expect(context.usesSuffixedCookies()).toBe(false);
+        expect(context.devBrowserToken).toBe('__clerk_db_jwt-suffixed');
+      });
+
       it('request with un-suffixed cookies', async () => {
         const headers = new Headers({
           cookie: createCookieHeader({
@@ -172,6 +189,29 @@ describe('AuthenticateContext', () => {
         expect(context.devBrowserToken).toBe('__clerk_db_jwt-suffixed');
       });
 
+      /**
+       * @see https://github.com/clerk/javascript/issues/10411
+       */
+      it('dev: falls back to unsuffixed __clerk_db_jwt when the suffixed cookie is missing', async () => {
+        const headers = new Headers({
+          cookie: createCookieHeader({
+            __client_uat: clientUat,
+            __client_uat_vWCgMp3A: suffixedClientUat,
+            __session: session,
+            __session_vWCgMp3A: suffixedSession,
+            __clerk_db_jwt: '__clerk_db_jwt',
+          }),
+        });
+        const clerkRequest = createClerkRequest(new Request('http://example.com', { headers }));
+        const context = await createAuthenticateContext(clerkRequest, {
+          publishableKey: pkTest,
+        });
+
+        expect(context.usesSuffixedCookies()).toBe(true);
+        expect(context.sessionTokenInCookie).toBe(suffixedSession);
+        expect(context.devBrowserToken).toBe('__clerk_db_jwt');
+      });
+
       it('dev: request with suffixed session and signed-out suffixed client_uat', async () => {
         const headers = new Headers({
           cookie: createCookieHeader({

packages/backend/src/tokens/authenticateContext.ts

@@ -317,7 +317,11 @@ class AuthenticateContext implements AuthenticateContext {
   private initHandshakeValues() {
     this.devBrowserToken =
       this.getQueryParam(constants.QueryParameters.DevBrowser) ||
-      this.getSuffixedOrUnSuffixedCookie(constants.Cookies.DevBrowser);
+      (this.usesSuffixedCookies()
+        ? this.getSuffixedCookie(constants.Cookies.DevBrowser) ||
+          this.getCookie(constants.Cookies.DevBrowser)
+        : this.getCookie(constants.Cookies.DevBrowser) ||
+          this.getSuffixedCookie(constants.Cookies.DevBrowser));
     // Using getCookie since we don't suffix the handshake token cookie
     this.handshakeToken =
       this.getQueryParam(constants.QueryParameters.Handshake) || this.getCookie(constants.Cookies.Handshake);

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

@@ -2,21 +2,24 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { createDevBrowserCookie } from '../devBrowser';
 
-const { cookieStore, removeCalls, setCalls } = vi.hoisted(() => ({
+const { cookieStore, removeCalls, setCalls, ops } = vi.hoisted(() => ({
   cookieStore: new Map<string, string>(),
   removeCalls: [] as Array<{ name: string; attributes?: object }>,
   setCalls: [] as Array<{ name: string; value: string; attributes?: object }>,
+  ops: [] as Array<{ op: 'set' | 'remove'; name: string }>,
 }));
 
 vi.mock('@clerk/shared/cookie', () => ({
   createCookieHandler: (name: string) => ({
     get: () => cookieStore.get(name),
     remove: (attributes?: object) => {
       removeCalls.push({ name, attributes });
+      ops.push({ op: 'remove', name });
       cookieStore.delete(name);
     },
     set: (value: string, attributes?: object) => {
       setCalls.push({ name, value, attributes });
+      ops.push({ op: 'set', name });
       cookieStore.set(name, value);
     },
   }),
@@ -37,6 +40,7 @@ describe('createDevBrowserCookie', () => {
     cookieStore.clear();
     removeCalls.length = 0;
     setCalls.length = 0;
+    ops.length = 0;
   });
 
   afterEach(() => {
@@ -87,27 +91,11 @@ describe('createDevBrowserCookie', () => {
     ]);
   });
 
-  it('clears stale partitioned cookie variants before writing a new dev browser', () => {
+  it('writes both cookies and does not remove partitioned variants after an unpartitioned write', () => {
     const cookieHandler = createDevBrowserCookie(cookieSuffix, defaultOptions);
 
     cookieHandler.set(devBrowser);
 
-    expect(removeCalls).toContainEqual({
-      name: suffixedCookieName,
-      attributes: {
-        sameSite: 'None',
-        secure: true,
-        partitioned: true,
-      },
-    });
-    expect(removeCalls).toContainEqual({
-      name: unsuffixedCookieName,
-      attributes: {
-        sameSite: 'None',
-        secure: true,
-        partitioned: true,
-      },
-    });
     expect(setCalls).toEqual([
       {
         name: suffixedCookieName,
@@ -130,6 +118,24 @@ describe('createDevBrowserCookie', () => {
         },
       },
     ]);
+    expect(removeCalls).toEqual([]);
+    expect(ops.filter(op => op.op === 'remove')).toEqual([]);
+    expect(cookieStore.get(suffixedCookieName)).toBe(devBrowser);
+    expect(cookieStore.get(unsuffixedCookieName)).toBe(devBrowser);
+  });
+
+  it('writes both partitioned cookies before stripping unpartitioned variants', () => {
+    vi.stubGlobal('location', { protocol: 'https:', hostname: 'example.com' });
+    const cookieHandler = createDevBrowserCookie(cookieSuffix, {
+      usePartitionedCookies: () => true,
+    });
+
+    cookieHandler.set(devBrowser);
+
+    expect(ops.map(op => op.op)).toEqual(['set', 'set', 'remove', 'remove', 'remove', 'remove']);
+    expect(ops[0]).toEqual({ op: 'set', name: suffixedCookieName });
+    expect(ops[1]).toEqual({ op: 'set', name: unsuffixedCookieName });
+    expect(ops.slice(2).every(op => op.op === 'remove')).toBe(true);
   });
 
   it('reads the suffixed cookie before falling back to the unsuffixed cookie', () => {

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

@@ -46,26 +46,42 @@ export const createDevBrowserCookie = (
 
   const get = () => suffixedDevBrowserCookie.get() || devBrowserCookie.get();
 
+  const cookies = [suffixedDevBrowserCookie, devBrowserCookie];
+
   const removeAll = () => {
     const attributes = getCookieAttributes(options);
 
-    for (const cookie of [suffixedDevBrowserCookie, devBrowserCookie]) {
+    for (const cookie of cookies) {
       cookie.remove(attributes);
       cookie.remove();
       cookie.remove(partitionedCookieAttributes);
     }
   };
 
+  const removeStaleAttributeVariants = (wrotePartitioned: boolean) => {
+    // Only strip the variants we did not just write. Removing Partitioned
+    // after an unpartitioned write can expire the live cookie on Safari
+    // builds that ignore the Partitioned attribute.
+    if (!wrotePartitioned) {
+      return;
+    }
+
+    for (const cookie of cookies) {
+      cookie.remove({ sameSite: 'Lax', secure: getSecureAttribute('Lax'), partitioned: false });
+      cookie.remove({ sameSite: 'None', secure: getSecureAttribute('None'), partitioned: false });
+    }
+  };
+
   const set = (devBrowser: string) => {
     const expires = addYears(Date.now(), 1);
     const { sameSite, secure, partitioned } = getCookieAttributes(options);
 
-    // Remove stale variants before writing. The environment may not be loaded
-    // yet, so the current partitioned-cookies setting cannot be trusted.
-    removeAll();
-
+    // Write both cookies first so a concurrent request never sees a hole
+    // between remove() and set(). Then drop only the attribute variants
+    // that are not the ones we just wrote.
     suffixedDevBrowserCookie.set(devBrowser, { expires, sameSite, secure, partitioned });
     devBrowserCookie.set(devBrowser, { expires, sameSite, secure, partitioned });
+    removeStaleAttributeVariants(partitioned);
   };
 
   const remove = () => removeAll();