fix(clerk-js): Force devBrowser to create suffixed cookies (#4776)

.changeset/shy-steaks-tell.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+---
+
+fix: Properly detect and create devBrowser when the suffixed version is missing but an unsuffixed version exists
+
+If the __clerk_db_jwt referred to a different instance, we’d fetch `/environment` and `/client` with mismatched publishable keys and JWTs, breaking the app.   

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

@@ -8,7 +8,7 @@ import { getSecureAttribute } from '../getSecureAttribute';
 
 export type DevBrowserCookieHandler = {
   set: (jwt: string) => void;
-  get: () => string | undefined;
+  get: (mode?: 'only-suffixed') => string | undefined;
   remove: () => void;
 };
 
@@ -22,7 +22,12 @@ export const createDevBrowserCookie = (cookieSuffix: string): DevBrowserCookieHa
   const devBrowserCookie = createCookieHandler(DEV_BROWSER_JWT_KEY);
   const suffixedDevBrowserCookie = createCookieHandler(getSuffixedCookieName(DEV_BROWSER_JWT_KEY, cookieSuffix));
 
-  const get = () => suffixedDevBrowserCookie.get() || devBrowserCookie.get();
+  const get = (mode?: 'only-suffixed') => {
+    if (mode === 'only-suffixed') {
+      return suffixedDevBrowserCookie.get();
+    }
+    return suffixedDevBrowserCookie.get() || devBrowserCookie.get();
+  };
 
   const set = (jwt: string) => {
     const expires = addYears(Date.now(), 1);

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

@@ -71,8 +71,8 @@ export function createDevBrowser({ cookieSuffix, frontendApi, fapiClient }: Crea
       return;
     }
 
-    // 2. If no JWT is found in the first step, check if a JWT is already available in the __clerk_db_jwt JS cookie
-    if (devBrowserCookie.get()) {
+    // 2. If no JWT is found in the first step, check if a JWT is already available in the suffixed __clerk_db_jwt JS cookie
+    if (devBrowserCookie.get('only-suffixed')) {
       return;
     }