chore(clerk-js,nextjs,shared): Move devBrowser to shared (#2149)

.changeset/stupid-toys-remain.md

@@ -0,0 +1,13 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/shared': minor
+---
+
+Move and export the following from @clerk/clerk-js and @clerk/nextjs to @clerk/shared:
+    - `DEV_BROWSER_SSO_JWT_PARAMETER`
+    - `DEV_BROWSER_JWT_MARKER`
+    - `DEV_BROWSER_SSO_JWT_KEY`
+    - `setDevBrowserJWTInURL`
+    - `getDevBrowserJWTFromURL`
+    - `getDevBrowserJWTFromResponse`

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

@@ -10,6 +10,7 @@ import {
   noop,
   parsePublishableKey,
   proxyUrlToAbsoluteURL,
+  setDevBrowserJWTInURL,
   stripScheme,
 } from '@clerk/shared';
 import type {
@@ -77,7 +78,6 @@ import {
   removeClerkQueryParam,
   requiresUserInput,
   sessionExistsAndSingleSessionModeEnabled,
-  setDevBrowserJWTInURL,
   stripOrigin,
   stripSameOrigin,
   toURL,

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

@@ -1,9 +1,5 @@
 export const PRESERVED_QUERYSTRING_PARAMS = ['after_sign_in_url', 'after_sign_up_url', 'redirect_url'];
 
-export const DEV_BROWSER_SSO_JWT_KEY = 'clerk-db-jwt';
-export const DEV_BROWSER_SSO_JWT_PARAMETER = '__dev_session';
-export const DEV_BROWSER_SSO_JWT_HTTP_HEADER = 'Clerk-Cookie';
-
 export const CLERK_MODAL_STATE = '__clerk_modal_state';
 export const CLERK_SYNCED = '__clerk_synced';
 export const CLERK_SATELLITE_URL = '__clerk_satellite_url';

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

@@ -1,5 +1,11 @@
-import { buildURL, createCookieHandler, getDevBrowserJWTFromURL, isDevOrStagingUrl, runIframe } from '../utils';
-import { DEV_BROWSER_SSO_JWT_HTTP_HEADER, DEV_BROWSER_SSO_JWT_KEY, DEV_BROWSER_SSO_JWT_PARAMETER } from './constants';
+import {
+  DEV_BROWSER_SSO_JWT_KEY,
+  getDevBrowserJWTFromResponse,
+  getDevBrowserJWTFromURL,
+  setDevBrowserJWTInURL,
+} from '@clerk/shared/devBrowser';
+
+import { buildURL, createCookieHandler, isDevOrStagingUrl, runIframe } from '../utils';
 import { clerkErrorDevInitFailed } from './errors';
 import type { FapiClient } from './fapiClient';
 
@@ -157,13 +163,13 @@ export default function createDevBrowserHandler({
     if (devOrStgApi) {
       fapiClient.onBeforeRequest(request => {
         const devBrowserJWT = getDevBrowserJWT();
-        if (devBrowserJWT) {
-          request.url?.searchParams.set(DEV_BROWSER_SSO_JWT_PARAMETER, devBrowserJWT);
+        if (devBrowserJWT && request?.url) {
+          request.url = setDevBrowserJWTInURL(request.url, devBrowserJWT, true);
         }
       });
 
       fapiClient.onAfterResponse((_, response) => {
-        const newDevBrowserJWT = response?.headers?.get(DEV_BROWSER_SSO_JWT_HTTP_HEADER);
+        const newDevBrowserJWT = getDevBrowserJWTFromResponse(response);
         if (newDevBrowserJWT) {
           setDevBrowserJWT(newDevBrowserJWT);
         }

packages/clerk-js/src/utils/cookies/devBrowser.ts

@@ -1,5 +1,4 @@
 import { createCookieHandler } from '@clerk/shared/cookie';
-
-import { DEV_BROWSER_JWT_MARKER } from '../devBrowser';
+import { DEV_BROWSER_JWT_MARKER } from '@clerk/shared/devBrowser';
 
 export const devBrowserCookie = createCookieHandler(DEV_BROWSER_JWT_MARKER);

packages/clerk-js/src/utils/index.ts

@@ -2,7 +2,6 @@ export * from './beforeUnloadTracker';
 export * from './componentGuards';
 export * from './cookies';
 export * from './dynamicParamParser';
-export * from './devBrowser';
 export * from './email';
 export * from './encoders';
 export * from './errors';

packages/nextjs/src/server/authMiddleware.ts

@@ -1,5 +1,6 @@
 import type { AuthObject, RequestState } from '@clerk/backend';
 import { buildRequestUrl, constants, TokenVerificationErrorReason } from '@clerk/backend';
+import { DEV_BROWSER_JWT_MARKER, setDevBrowserJWTInURL } from '@clerk/shared/devBrowser';
 import { isDevelopmentFromApiKey } from '@clerk/shared/keys';
 import type { Autocomplete } from '@clerk/types';
 import type Link from 'next/link';
@@ -10,7 +11,6 @@ import { isRedirect, mergeResponses, paths, setHeader, stringifyHeaders } from '
 import { withLogger } from '../utils/debugLogger';
 import { authenticateRequest, handleInterstitialState, handleUnknownState } from './authenticateRequest';
 import { SECRET_KEY } from './constants';
-import { DEV_BROWSER_JWT_MARKER, setDevBrowserJWTInURL } from './devBrowser';
 import {
   clockSkewDetected,
   infiniteRedirectLoopDetected,

packages/clerk-js/src/utils/devBrowser.ts → packages/shared/src/devBrowser.ts

@@ -1,7 +1,9 @@
-import { DEV_BROWSER_SSO_JWT_PARAMETER } from '../core/constants';
-
+export const DEV_BROWSER_SSO_JWT_PARAMETER = '__dev_session';
 export const DEV_BROWSER_JWT_MARKER = '__clerk_db_jwt';
+export const DEV_BROWSER_SSO_JWT_KEY = 'clerk-db-jwt';
+
 const DEV_BROWSER_JWT_MARKER_REGEXP = /__clerk_db_jwt\[(.*)\]/;
+const DEV_BROWSER_SSO_JWT_HTTP_HEADER = 'Clerk-Cookie';
 
 // Sets the dev_browser JWT in the hash or the search
 export function setDevBrowserJWTInURL(url: URL, jwt: string, asQueryParam: boolean): URL {
@@ -59,6 +61,10 @@ export function getDevBrowserJWTFromURL(url: URL): string {
   return jwt;
 }
 
+export function getDevBrowserJWTFromResponse({ headers }: { headers?: Headers } = {}) {
+  return headers?.get(DEV_BROWSER_SSO_JWT_HTTP_HEADER);
+}
+
 function extractDevBrowserJWTFromHash(hash: string): string {
   const matches = hash.match(DEV_BROWSER_JWT_MARKER_REGEXP);
   return matches ? matches[1] : '';

packages/shared/src/index.ts

@@ -30,3 +30,10 @@ export * from './proxy';
 export * from './underscore';
 export * from './url';
 export { createWorkerTimers } from './workerTimers';
+export {
+  DEV_BROWSER_SSO_JWT_PARAMETER,
+  DEV_BROWSER_JWT_MARKER,
+  getDevBrowserJWTFromURL,
+  setDevBrowserJWTInURL,
+  getDevBrowserJWTFromResponse,
+} from './devBrowser';