feat(shared): Use both __clerk_db_jwt and __dev_browser in redirects (#2431)

Author: dimkl

.changeset/wise-clocks-type.md

@@ -0,0 +1,6 @@
+---
+'@clerk/shared': minor
+---
+
+Use both `__clerk_db_jwt` and `__dev_browser` search params to sync dev browser between application and Account Portal in development instances.
+This change is required to support the next major version of the ClerkJS.

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

@@ -2113,7 +2113,7 @@ describe('Clerk singleton', () => {
       await sut.load();
 
       const url = sut.buildUrlWithAuth('https://example.com/some-path', { useQueryParam: true });
-      expect(url).toBe('https://example.com/some-path?__dev_session=deadbeef');
+      expect(url).toBe('https://example.com/some-path?__dev_session=deadbeef&__clerk_db_jwt=deadbeef');
     });
 
     it('uses the query param to propagate the dev_browser JWT to Account Portal pages on dev - non-kima', async () => {
@@ -2122,7 +2122,7 @@ describe('Clerk singleton', () => {
       await sut.load();
 
       const url = sut.buildUrlWithAuth('https://accounts.abcef.12345.dev.lclclerk.com');
-      expect(url).toBe('https://accounts.abcef.12345.dev.lclclerk.com/?__dev_session=deadbeef');
+      expect(url).toBe('https://accounts.abcef.12345.dev.lclclerk.com/?__dev_session=deadbeef&__clerk_db_jwt=deadbeef');
     });
 
     it('uses the query param to propagate the dev_browser JWT to Account Portal pages on dev - kima', async () => {
@@ -2131,7 +2131,7 @@ describe('Clerk singleton', () => {
       await sut.load();
 
       const url = sut.buildUrlWithAuth('https://rested-anemone-14.accounts.dev');
-      expect(url).toBe('https://rested-anemone-14.accounts.dev/?__dev_session=deadbeef');
+      expect(url).toBe('https://rested-anemone-14.accounts.dev/?__dev_session=deadbeef&__clerk_db_jwt=deadbeef');
     });
   });
 

packages/nextjs/src/server/authMiddleware.test.ts

@@ -474,7 +474,7 @@ describe('Dev Browser JWT when redirecting to cross origin', function () {
 
     expect(resp?.status).toEqual(307);
     expect(resp?.headers.get('location')).toEqual(
-      'https://accounts.included.katydid-92.lcl.dev/sign-in?redirect_url=https%3A%2F%2Fwww.clerk.com%2Fprotected&__dev_session=test_jwt',
+      'https://accounts.included.katydid-92.lcl.dev/sign-in?redirect_url=https%3A%2F%2Fwww.clerk.com%2Fprotected&__dev_session=test_jwt&__clerk_db_jwt=test_jwt',
     );
     expect(resp?.headers.get('x-clerk-auth-reason')).toEqual('redirect');
     expect(authenticateRequest).toBeCalled();

packages/shared/src/__tests__/devbrowser.test.ts

@@ -11,10 +11,20 @@ describe('setDevBrowserJWTInURL(url, jwt)', () => {
     ['/foo?bar=42#qux', 'deadbeef', false, '/foo?bar=42#qux__clerk_db_jwt[deadbeef]'],
     ['/foo#__clerk_db_jwt[deadbeef]', 'deadbeef', false, '/foo#__clerk_db_jwt[deadbeef]'],
     ['/foo?bar=42#qux__clerk_db_jwt[deadbeef]', 'deadbeef', false, '/foo?bar=42#qux__clerk_db_jwt[deadbeef]'],
-    ['/foo', 'deadbeef', true, '/foo?__dev_session=deadbeef'],
-    ['/foo?bar=42', 'deadbeef', true, '/foo?bar=42&__dev_session=deadbeef'],
-    ['/foo?bar=42&__clerk_db_jwt=deadbeef', 'deadbeef', true, '/foo?bar=42&__dev_session=deadbeef'],
-    ['/foo?bar=42&__dev_session=deadbeef', 'deadbeef', true, '/foo?bar=42&__dev_session=deadbeef'],
+    ['/foo', 'deadbeef', true, '/foo?__dev_session=deadbeef&__clerk_db_jwt=deadbeef'],
+    ['/foo?bar=42', 'deadbeef', true, '/foo?bar=42&__dev_session=deadbeef&__clerk_db_jwt=deadbeef'],
+    [
+      '/foo?bar=42&__clerk_db_jwt=deadbeef',
+      'deadbeef',
+      true,
+      '/foo?bar=42&__dev_session=deadbeef&__clerk_db_jwt=deadbeef',
+    ],
+    [
+      '/foo?bar=42&__dev_session=deadbeef',
+      'deadbeef',
+      true,
+      '/foo?bar=42&__dev_session=deadbeef&__clerk_db_jwt=deadbeef',
+    ],
   ];
 
   test.each(testCases)(

packages/shared/src/devBrowser.ts

@@ -13,7 +13,9 @@ export function setDevBrowserJWTInURL(url: URL, jwt: string, asQueryParam: boole
 
   if (jwtToSet) {
     if (asQueryParam) {
+      // Temporarily add the dev browser jwt to both the `__clerk_db_jwt` and `__dev_session`
       resultURL.searchParams.append(DEV_BROWSER_SSO_JWT_PARAMETER, jwtToSet);
+      resultURL.searchParams.append(DEV_BROWSER_JWT_MARKER, jwtToSet);
     } else {
       resultURL.hash = resultURL.hash + `${DEV_BROWSER_JWT_MARKER}[${jwtToSet}]`;
     }