From d868e42f87be1e6a4e3b0a6084579c7844a9e8d7 Mon Sep 17 00:00:00 2001 From: Dimitris Klouvas Date: Thu, 16 Nov 2023 22:03:31 +0200 Subject: [PATCH] chore(clerk-js,nextjs,shared): Move devBrowser to shared --- .changeset/stupid-toys-remain.md | 13 ++++++ packages/clerk-js/src/core/clerk.ts | 2 +- packages/clerk-js/src/core/constants.ts | 4 -- .../clerk-js/src/core/devBrowserHandler.ts | 16 ++++--- .../clerk-js/src/utils/cookies/devBrowser.ts | 3 +- packages/clerk-js/src/utils/index.ts | 1 - packages/nextjs/src/server/authMiddleware.ts | 2 +- packages/nextjs/src/server/devBrowser.ts | 45 ------------------- .../src}/__tests__/devbrowser.test.ts | 0 .../src/utils => shared/src}/devBrowser.ts | 10 ++++- packages/shared/src/index.ts | 7 +++ 11 files changed, 42 insertions(+), 61 deletions(-) create mode 100644 .changeset/stupid-toys-remain.md delete mode 100644 packages/nextjs/src/server/devBrowser.ts rename packages/{clerk-js/src/utils => shared/src}/__tests__/devbrowser.test.ts (100%) rename packages/{clerk-js/src/utils => shared/src}/devBrowser.ts (87%) diff --git a/.changeset/stupid-toys-remain.md b/.changeset/stupid-toys-remain.md new file mode 100644 index 00000000000..0e220ba7f68 --- /dev/null +++ b/.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` \ No newline at end of file diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts index 3592558b1a7..d7b89c1c191 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/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, diff --git a/packages/clerk-js/src/core/constants.ts b/packages/clerk-js/src/core/constants.ts index 733fa9646a6..87c905b5549 100644 --- a/packages/clerk-js/src/core/constants.ts +++ b/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'; diff --git a/packages/clerk-js/src/core/devBrowserHandler.ts b/packages/clerk-js/src/core/devBrowserHandler.ts index 7e34010c778..047de336f2c 100644 --- a/packages/clerk-js/src/core/devBrowserHandler.ts +++ b/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); } diff --git a/packages/clerk-js/src/utils/cookies/devBrowser.ts b/packages/clerk-js/src/utils/cookies/devBrowser.ts index 849d2aef37a..0b185c18b17 100644 --- a/packages/clerk-js/src/utils/cookies/devBrowser.ts +++ b/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); diff --git a/packages/clerk-js/src/utils/index.ts b/packages/clerk-js/src/utils/index.ts index 3f9f3f135c6..63a73501085 100644 --- a/packages/clerk-js/src/utils/index.ts +++ b/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'; diff --git a/packages/nextjs/src/server/authMiddleware.ts b/packages/nextjs/src/server/authMiddleware.ts index 90a38b057f4..faedc4311c5 100644 --- a/packages/nextjs/src/server/authMiddleware.ts +++ b/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, diff --git a/packages/nextjs/src/server/devBrowser.ts b/packages/nextjs/src/server/devBrowser.ts deleted file mode 100644 index 5a7074f8f7a..00000000000 --- a/packages/nextjs/src/server/devBrowser.ts +++ /dev/null @@ -1,45 +0,0 @@ -// TODO: This is a partial duplicate of part of packages/clerk-js/src/utils/devBrowser.ts -// TODO: To be removed when we can extract this utility to @clerk/shared - -export const DEV_BROWSER_SSO_JWT_PARAMETER = '__dev_session'; - -// -// Below this line should be identical to clerk-js version -// - -export const DEV_BROWSER_JWT_MARKER = '__clerk_db_jwt'; -const DEV_BROWSER_JWT_MARKER_REGEXP = /__clerk_db_jwt\[(.*)\]/; - -// Sets the dev_browser JWT in the hash or the search -export function setDevBrowserJWTInURL(url: URL, jwt: string, asQueryParam: boolean): URL { - const resultURL = new URL(url); - - // extract & strip existing jwt from hash - const jwtFromHash = extractDevBrowserJWTFromHash(resultURL.hash); - resultURL.hash = resultURL.hash.replace(DEV_BROWSER_JWT_MARKER_REGEXP, ''); - if (resultURL.href.endsWith('#')) { - resultURL.hash = ''; - } - - // extract & strip existing jwt from search - const jwtFromSearch = resultURL.searchParams.get(DEV_BROWSER_SSO_JWT_PARAMETER); - resultURL.searchParams.delete(DEV_BROWSER_SSO_JWT_PARAMETER); - - // Existing jwt takes precedence - const jwtToSet = jwtFromHash || jwtFromSearch || jwt; - - if (jwtToSet) { - if (asQueryParam) { - resultURL.searchParams.append(DEV_BROWSER_SSO_JWT_PARAMETER, jwtToSet); - } else { - resultURL.hash = resultURL.hash + `${DEV_BROWSER_JWT_MARKER}[${jwtToSet}]`; - } - } - - return resultURL; -} - -function extractDevBrowserJWTFromHash(hash: string): string { - const matches = hash.match(DEV_BROWSER_JWT_MARKER_REGEXP); - return matches ? matches[1] : ''; -} diff --git a/packages/clerk-js/src/utils/__tests__/devbrowser.test.ts b/packages/shared/src/__tests__/devbrowser.test.ts similarity index 100% rename from packages/clerk-js/src/utils/__tests__/devbrowser.test.ts rename to packages/shared/src/__tests__/devbrowser.test.ts diff --git a/packages/clerk-js/src/utils/devBrowser.ts b/packages/shared/src/devBrowser.ts similarity index 87% rename from packages/clerk-js/src/utils/devBrowser.ts rename to packages/shared/src/devBrowser.ts index 75d875afc0d..8f94b099856 100644 --- a/packages/clerk-js/src/utils/devBrowser.ts +++ b/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] : ''; diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index a8301225cf1..0201ae3c916 100644 --- a/packages/shared/src/index.ts +++ b/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';