Pass clerkJSVersion in interstitial

.changeset/witty-books-jam.md

@@ -0,0 +1,11 @@
+---
+'@clerk/clerk-sdk-node': patch
+'@clerk/nextjs': patch
+'@clerk/remix': patch
+'@clerk/backend': patch
+---
+
+Allow `clerkJSVersion` to be passed when loading interstitial. Support for
+- Nextjs
+- Remix
+- Node

packages/backend/src/tokens/interstitial.ts

@@ -16,6 +16,11 @@ export type LoadInterstitialOptions = {
   apiUrl: string;
   frontendApi: string;
   publishableKey: string;
+  clerkJSUrl?: string;
+  clerkJSVersion?: string;
+  /**
+   * @deprecated
+   */
   pkgVersion?: string;
   debugData?: DebugRequestSate;
   isSatellite?: boolean;
@@ -47,6 +52,8 @@ export function loadInterstitialFromLocal(options: Omit<LoadInterstitialOptions,
     debugData,
     frontendApi,
     pkgVersion,
+    clerkJSUrl,
+    clerkJSVersion,
     publishableKey,
     proxyUrl,
     isSatellite = false,
@@ -114,7 +121,13 @@ export function loadInterstitialFromLocal(options: Omit<LoadInterstitialOptions,
                 ${domain ? `script.setAttribute('data-clerk-domain', '${domain}');` : ''}
                 ${proxyUrl ? `script.setAttribute('data-clerk-proxy-url', '${proxyUrl}')` : ''};
                 script.async = true;
-                script.src = '${getScriptUrl(proxyUrl || domainOnlyInProd || frontendApi, pkgVersion)}';
+                script.src = '${
+                  clerkJSUrl ||
+                  getScriptUrl(proxyUrl || domainOnlyInProd || frontendApi, {
+                    pkgVersion,
+                    clerkJSVersion,
+                  })
+                }';
                 script.crossOrigin = 'anonymous';
                 script.addEventListener('load', startClerk);
                 document.body.appendChild(script);
@@ -143,10 +156,11 @@ export async function loadInterstitialFromBAPI(options: LoadInterstitialOptions)
 
 export function buildPublicInterstitialUrl(options: LoadInterstitialOptions) {
   options.frontendApi = parsePublishableKey(options.publishableKey)?.frontendApi || options.frontendApi || '';
-  const { apiUrl, frontendApi, pkgVersion, publishableKey, proxyUrl, isSatellite, domain, signInUrl } = options;
+  const { apiUrl, frontendApi, pkgVersion, clerkJSVersion, publishableKey, proxyUrl, isSatellite, domain, signInUrl } =
+    options;
   const url = new URL(apiUrl);
   url.pathname = joinPaths(url.pathname, API_VERSION, '/public/interstitial');
-  url.searchParams.append('clerk_js_version', getClerkJsMajorVersionOrTag(frontendApi, pkgVersion));
+  url.searchParams.append('clerk_js_version', clerkJSVersion || getClerkJsMajorVersionOrTag(frontendApi, pkgVersion));
   if (publishableKey) {
     url.searchParams.append('publishable_key', publishableKey);
   } else {
@@ -190,8 +204,11 @@ const getClerkJsMajorVersionOrTag = (frontendApi: string, pkgVersion?: string) =
   return pkgVersion.split('.')[0] || 'latest';
 };
 
-const getScriptUrl = (frontendApi: string, pkgVersion?: string) => {
+const getScriptUrl = (
+  frontendApi: string,
+  { pkgVersion, clerkJSVersion }: { pkgVersion?: string; clerkJSVersion?: string },
+) => {
   const noSchemeFrontendApi = frontendApi.replace(/http(s)?:\/\//, '');
   const major = getClerkJsMajorVersionOrTag(frontendApi, pkgVersion);
-  return `https://${noSchemeFrontendApi}/npm/@clerk/clerk-js@${major}/dist/clerk.browser.js`;
+  return `https://${noSchemeFrontendApi}/npm/@clerk/clerk-js@${clerkJSVersion || major}/dist/clerk.browser.js`;
 };

packages/nextjs/src/server/__tests__/__snapshots__/exports.test.ts.snap

@@ -7,6 +7,8 @@ exports[`/server public exports should not include a breaking change 1`] = `
   "API_VERSION",
   "AllowlistIdentifier",
   "AuthStatus",
+  "CLERK_JS_URL",
+  "CLERK_JS_VERSION",
   "Clerk",
   "Client",
   "DOMAIN",

packages/nextjs/src/server/authenticateRequest.ts

@@ -5,10 +5,11 @@ import { NextResponse } from 'next/server';
 import type { RequestState } from './clerkClient';
 import {
   API_KEY,
+  CLERK_JS_URL,
+  CLERK_JS_VERSION,
   clerkClient,
   debugRequestState,
   FRONTEND_API,
-  JS_VERSION,
   PUBLISHABLE_KEY,
   SECRET_KEY,
 } from './clerkClient';
@@ -56,10 +57,11 @@ export const handleInterstitialState = (requestState: RequestState, opts: WithAu
     clerkClient.localInterstitial({
       frontendApi: opts.frontendApi || FRONTEND_API,
       publishableKey: opts.publishableKey || PUBLISHABLE_KEY,
-      pkgVersion: JS_VERSION,
-      proxyUrl: requestState.proxyUrl as any,
+      clerkJSUrl: CLERK_JS_URL,
+      clerkJSVersion: CLERK_JS_VERSION,
+      proxyUrl: requestState.proxyUrl,
       isSatellite: requestState.isSatellite,
-      domain: requestState.domain as any,
+      domain: requestState.domain,
       debugData: debugRequestState(requestState),
       signInUrl: requestState.signInUrl,
     }),

packages/nextjs/src/server/clerkClient.ts

@@ -1,6 +1,11 @@
 import { Clerk } from '@clerk/backend';
 
+/**
+ * @deprecated
+ */
 export const JS_VERSION = process.env.CLERK_JS_VERSION || '';
+export const CLERK_JS_VERSION = process.env.NEXT_PUBLIC_CLERK_JS_VERSION || '';
+export const CLERK_JS_URL = process.env.NEXT_PUBLIC_CLERK_JS || '';
 export const API_URL = process.env.CLERK_API_URL || 'https://api.clerk.dev';
 export const API_VERSION = process.env.CLERK_API_VERSION || 'v1';
 export const API_KEY = process.env.CLERK_API_KEY || '';

packages/nextjs/src/server/withClerkMiddleware.ts

@@ -4,7 +4,16 @@ import type { NextMiddleware } from 'next/dist/server/web/types';
 import type { NextFetchEvent, NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
-import { API_KEY, API_URL, clerkClient, FRONTEND_API, JS_VERSION, PUBLISHABLE_KEY, SECRET_KEY } from './clerkClient';
+import {
+  API_KEY,
+  API_URL,
+  CLERK_JS_URL,
+  CLERK_JS_VERSION,
+  clerkClient,
+  FRONTEND_API,
+  PUBLISHABLE_KEY,
+  SECRET_KEY,
+} from './clerkClient';
 import type { WithAuthOptions } from './types';
 import { decorateRequest, getCookie, handleMultiDomainAndProxy, setCustomAttributeOnRequest } from './utils';
 
@@ -71,7 +80,8 @@ export const withClerkMiddleware: WithClerkMiddleware = (...args: unknown[]) =>
           apiUrl: API_URL,
           frontendApi: opts.frontendApi || FRONTEND_API,
           publishableKey: opts.publishableKey || PUBLISHABLE_KEY,
-          pkgVersion: JS_VERSION,
+          clerkJSUrl: CLERK_JS_URL,
+          clerkJSVersion: CLERK_JS_VERSION,
           proxyUrl: requestState.proxyUrl as any,
           isSatellite: requestState.isSatellite,
           domain: requestState.domain as any,

packages/nextjs/src/ssr/withServerSideAuth.ts

@@ -5,6 +5,8 @@ import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
 
 import {
   API_URL,
+  CLERK_JS_URL,
+  CLERK_JS_VERSION,
   clerkClient,
   FRONTEND_API,
   JS_VERSION,
@@ -63,6 +65,8 @@ export const withServerSideAuth: WithServerSideAuth = (cbOrOptions: any, options
         publishableKey: PUBLISHABLE_KEY,
         frontendApi: FRONTEND_API,
         pkgVersion: JS_VERSION,
+        clerkJSUrl: CLERK_JS_URL,
+        clerkJSVersion: CLERK_JS_VERSION,
         proxyUrl: requestState.proxyUrl as any,
         isSatellite: requestState.isSatellite,
         domain: requestState.domain as any,

packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts

@@ -6,6 +6,7 @@ export const mergeNextClerkPropsWithEnv = (props: Omit<NextClerkProviderProps, '
     frontendApi: props.frontendApi || process.env.NEXT_PUBLIC_CLERK_FRONTEND_API || '',
     publishableKey: props.publishableKey || process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY || '',
     clerkJSUrl: props.clerkJSUrl || process.env.NEXT_PUBLIC_CLERK_JS,
+    clerkJSVersion: props.clerkJSVersion || process.env.NEXT_PUBLIC_CLERK_JS_VERSION,
     proxyUrl: props.proxyUrl || process.env.NEXT_PUBLIC_CLERK_PROXY_URL || '',
     domain: props.domain || process.env.NEXT_PUBLIC_CLERK_DOMAIN || '',
     isSatellite: props.isSatellite || process.env.NEXT_PUBLIC_CLERK_IS_SATELLITE === 'true',

packages/remix/src/client/RemixClerkProvider.tsx

@@ -46,6 +46,8 @@ export function ClerkProvider({ children, ...rest }: RemixClerkProviderProps): J
     __isSatellite,
     __clerk_debug,
     __signInUrl,
+    __clerkJSUrl,
+    __clerkJSVersion,
   } = clerkState?.__internal_clerk_state || {};
 
   React.useEffect(() => {
@@ -66,6 +68,8 @@ export function ClerkProvider({ children, ...rest }: RemixClerkProviderProps): J
       domain={__domain as any}
       isSatellite={__isSatellite}
       signInUrl={__signInUrl}
+      clerkJSUrl={__clerkJSUrl}
+      clerkJSVersion={__clerkJSVersion}
       {...restProps}
     >
       {children}

packages/remix/src/client/types.ts

@@ -12,6 +12,8 @@ export type ClerkState = {
     __isSatellite: boolean;
     __signInUrl: string | undefined;
     __clerk_debug: any;
+    __clerkJSUrl: string | undefined;
+    __clerkJSVersion: string | undefined;
   };
 };
 

packages/remix/src/ssr/utils.ts

@@ -3,6 +3,7 @@ import { constants, debugRequestState, loadInterstitialFromLocal } from '@clerk/
 import { json } from '@remix-run/server-runtime';
 import cookie from 'cookie';
 
+import { getEnvVariable } from '../utils';
 import type { LoaderFunctionArgs, LoaderFunctionArgsWithAuth } from './types';
 
 /**
@@ -75,6 +76,10 @@ export const unknownResponse = (requestState: RequestState) => {
 };
 
 export const interstitialJsonResponse = (requestState: RequestState, opts: { loader: 'root' | 'nested' }) => {
+  console.log('HEEEE', {
+    clerkJSUrl: getEnvVariable('CLERK_JS'),
+    clerkJSVersion: getEnvVariable('CLERK_JS_VERSION'),
+  });
   return json(
     wrapWithClerkState({
       __loader: opts.loader,
@@ -84,6 +89,8 @@ export const interstitialJsonResponse = (requestState: RequestState, opts: { loa
         publishableKey: requestState.publishableKey,
         // TODO: This needs to be the version of clerk/remix not clerk/react
         // pkgVersion: LIB_VERSION,
+        clerkJSUrl: getEnvVariable('CLERK_JS'),
+        clerkJSVersion: getEnvVariable('CLERK_JS_VERSION'),
         proxyUrl: requestState.proxyUrl,
         isSatellite: requestState.isSatellite,
         domain: requestState.domain,
@@ -108,6 +115,8 @@ export const injectRequestStateIntoResponse = async (response: Response, request
     __isSatellite: requestState.isSatellite,
     __signInUrl: requestState.signInUrl,
     __clerk_debug: debugRequestState(requestState),
+    __clerkJSUrl: getEnvVariable('CLERK_JS'),
+    __clerkJSVersion: getEnvVariable('CLERK_JS_VERSION'),
   });
   // set the correct content-type header in case the user returned a `Response` directly
   // without setting the header, instead of using the `json()` helper

packages/sdk-node/src/authenticateRequest.ts

@@ -20,6 +20,7 @@ export async function loadInterstitial({
   clerkClient: ClerkClient;
   requestState: RequestState;
 }) {
+  const { clerkJSVersion, clerkJSUrl } = loadClientEnv();
   /**
    * When publishable key or frontendApi is present utilize the localInterstitial method
    * and avoid the extra network call
@@ -32,6 +33,8 @@ export async function loadInterstitial({
       signInUrl: requestState.signInUrl,
       isSatellite: requestState.isSatellite,
       domain: requestState.domain,
+      clerkJSVersion,
+      clerkJSUrl,
     });
   }
   return await clerkClient.remotePrivateInterstitial();

packages/sdk-node/src/clerkClient.ts

@@ -8,6 +8,8 @@ export const loadClientEnv = () => {
   return {
     publishableKey: process.env.CLERK_PUBLISHABLE_KEY || '',
     frontendApi: process.env.CLERK_FRONTEND_API || '',
+    clerkJSUrl: process.env.CLERK_JS || '',
+    clerkJSVersion: process.env.CLERK_JS_VERSION || '',
   };
 };
 
@@ -23,6 +25,7 @@ export const loadApiEnv = () => {
     isSatellite: process.env.CLERK_IS_SATELLITE === 'true',
   };
 };
+
 /**
  * This needs to be a *named* function in order to support the older
  * new Clerk() syntax for v4 compatibility.