From 87364d1b2bfd0f429496eed4d63509188788160e Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Fri, 30 Jan 2026 18:23:58 +0200 Subject: [PATCH] feat(*): wire clerkUIVersion through all framework packages Why: The `clerkUIVersion` prop was typed in `@clerk/shared/types` but never wired through framework packages, making it effectively dead code. Users could pass the prop without TypeScript errors, but it would be silently ignored. This mirrors the existing `clerkJSVersion` functionality for `@clerk/ui`. What changed: - Added `NEXT_PUBLIC_CLERK_UI_VERSION` env var support to Next.js - Added `PUBLIC_CLERK_UI_VERSION` env var support to Astro - Added `VITE_CLERK_UI_VERSION` env var support to React Router and Tanstack Start - Added `CLERK_UI_VERSION` env var support to Express - Added `NUXT_PUBLIC_CLERK_UI_VERSION` env var support to Nuxt - Wired the prop through SSR state for React Router and Tanstack Start --- packages/astro/src/env.d.ts | 1 + packages/astro/src/integration/create-integration.ts | 3 +++ packages/astro/src/internal/merge-env-vars-with-params.ts | 2 ++ packages/astro/src/server/get-safe-env.ts | 1 + packages/express/src/utils.ts | 1 + packages/nextjs/src/server/constants.ts | 1 + packages/nextjs/src/utils/clerk-script.tsx | 4 +++- packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts | 1 + packages/nuxt/src/module.ts | 1 + .../react-router/src/client/ReactRouterClerkProvider.tsx | 2 ++ packages/react-router/src/client/types.ts | 1 + packages/react-router/src/server/utils.ts | 1 + packages/react-router/src/utils/env.ts | 1 + packages/tanstack-react-start/src/client/types.ts | 2 ++ packages/tanstack-react-start/src/client/utils.ts | 6 ++++++ packages/tanstack-react-start/src/server/constants.ts | 2 ++ packages/tanstack-react-start/src/server/utils/index.ts | 2 ++ packages/tanstack-react-start/src/utils/env.ts | 1 + 18 files changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/env.d.ts b/packages/astro/src/env.d.ts index 1240941e1e2..933fc2aea3f 100644 --- a/packages/astro/src/env.d.ts +++ b/packages/astro/src/env.d.ts @@ -6,6 +6,7 @@ interface InternalEnv { readonly PUBLIC_CLERK_JS_URL?: string; readonly PUBLIC_CLERK_JS_VERSION?: string; readonly PUBLIC_CLERK_UI_URL?: string; + readonly PUBLIC_CLERK_UI_VERSION?: string; readonly PUBLIC_CLERK_PREFETCH_UI?: string; readonly CLERK_API_KEY?: string; readonly CLERK_API_URL?: string; diff --git a/packages/astro/src/integration/create-integration.ts b/packages/astro/src/integration/create-integration.ts index fc19a8371c3..ca70269ed93 100644 --- a/packages/astro/src/integration/create-integration.ts +++ b/packages/astro/src/integration/create-integration.ts @@ -21,6 +21,7 @@ function createIntegration() // These are not provided when the "bundled" integration is used const clerkJSUrl = (params as any)?.clerkJSUrl as string | undefined; const clerkJSVersion = (params as any)?.clerkJSVersion as string | undefined; + const clerkUIVersion = (params as any)?.clerkUIVersion as string | undefined; const prefetchUI = (params as any)?.prefetchUI as boolean | undefined; return { @@ -57,6 +58,7 @@ function createIntegration() ...buildEnvVarFromOption(domain, 'PUBLIC_CLERK_DOMAIN'), ...buildEnvVarFromOption(clerkJSUrl, 'PUBLIC_CLERK_JS_URL'), ...buildEnvVarFromOption(clerkJSVersion, 'PUBLIC_CLERK_JS_VERSION'), + ...buildEnvVarFromOption(clerkUIVersion, 'PUBLIC_CLERK_UI_VERSION'), ...buildEnvVarFromOption(prefetchUI === false ? 'false' : undefined, 'PUBLIC_CLERK_PREFETCH_UI'), }, @@ -167,6 +169,7 @@ function createClerkEnvSchema() { PUBLIC_CLERK_JS_VERSION: envField.string({ context: 'client', access: 'public', optional: true }), PUBLIC_CLERK_PREFETCH_UI: envField.string({ context: 'client', access: 'public', optional: true }), PUBLIC_CLERK_UI_URL: envField.string({ context: 'client', access: 'public', optional: true, url: true }), + PUBLIC_CLERK_UI_VERSION: envField.string({ context: 'client', access: 'public', optional: true }), PUBLIC_CLERK_TELEMETRY_DISABLED: envField.boolean({ context: 'client', access: 'public', optional: true }), PUBLIC_CLERK_TELEMETRY_DEBUG: envField.boolean({ context: 'client', access: 'public', optional: true }), CLERK_SECRET_KEY: envField.string({ context: 'server', access: 'secret' }), diff --git a/packages/astro/src/internal/merge-env-vars-with-params.ts b/packages/astro/src/internal/merge-env-vars-with-params.ts index 1cac532cc6f..de3405a24e5 100644 --- a/packages/astro/src/internal/merge-env-vars-with-params.ts +++ b/packages/astro/src/internal/merge-env-vars-with-params.ts @@ -37,6 +37,7 @@ const mergeEnvVarsWithParams = (params?: AstroClerkIntegrationParams & { publish clerkJSUrl: paramClerkJSUrl, clerkJSVersion: paramClerkJSVersion, clerkUIUrl: paramClerkUiUrl, + clerkUIVersion: paramClerkUIVersion, prefetchUI: paramPrefetchUI, ...rest } = params || {}; @@ -51,6 +52,7 @@ const mergeEnvVarsWithParams = (params?: AstroClerkIntegrationParams & { publish clerkJSUrl: paramClerkJSUrl || import.meta.env.PUBLIC_CLERK_JS_URL, clerkJSVersion: paramClerkJSVersion || import.meta.env.PUBLIC_CLERK_JS_VERSION, clerkUIUrl: paramClerkUiUrl || import.meta.env.PUBLIC_CLERK_UI_URL, + clerkUIVersion: paramClerkUIVersion || import.meta.env.PUBLIC_CLERK_UI_VERSION, prefetchUI: mergePrefetchUIConfig(paramPrefetchUI), telemetry: paramTelemetry || { disabled: isTruthy(import.meta.env.PUBLIC_CLERK_TELEMETRY_DISABLED), diff --git a/packages/astro/src/server/get-safe-env.ts b/packages/astro/src/server/get-safe-env.ts index 9d17c86321d..ebf98b99136 100644 --- a/packages/astro/src/server/get-safe-env.ts +++ b/packages/astro/src/server/get-safe-env.ts @@ -33,6 +33,7 @@ function getSafeEnv(context: ContextOrLocals) { clerkJsUrl: getContextEnvVar('PUBLIC_CLERK_JS_URL', context), clerkJsVersion: getContextEnvVar('PUBLIC_CLERK_JS_VERSION', context), clerkUIUrl: getContextEnvVar('PUBLIC_CLERK_UI_URL', context), + clerkUIVersion: getContextEnvVar('PUBLIC_CLERK_UI_VERSION', context), prefetchUI: getContextEnvVar('PUBLIC_CLERK_PREFETCH_UI', context) === 'false' ? false : undefined, apiVersion: getContextEnvVar('CLERK_API_VERSION', context), apiUrl: getContextEnvVar('CLERK_API_URL', context), diff --git a/packages/express/src/utils.ts b/packages/express/src/utils.ts index a2c1c78677c..13cb4106def 100644 --- a/packages/express/src/utils.ts +++ b/packages/express/src/utils.ts @@ -13,6 +13,7 @@ export const loadClientEnv = () => { clerkJSUrl: process.env.CLERK_JS || process.env.CLERK_JS_URL || '', clerkJSVersion: process.env.CLERK_JS_VERSION || '', clerkUIUrl: process.env.CLERK_UI_URL || '', + clerkUIVersion: process.env.CLERK_UI_VERSION || '', prefetchUI: process.env.CLERK_PREFETCH_UI === 'false' ? false : undefined, }; }; diff --git a/packages/nextjs/src/server/constants.ts b/packages/nextjs/src/server/constants.ts index 4165b2ae4d1..4bbc3b74fa5 100644 --- a/packages/nextjs/src/server/constants.ts +++ b/packages/nextjs/src/server/constants.ts @@ -3,6 +3,7 @@ import { isTruthy } from '@clerk/shared/underscore'; export const CLERK_JS_VERSION = process.env.NEXT_PUBLIC_CLERK_JS_VERSION || ''; export const CLERK_JS_URL = process.env.NEXT_PUBLIC_CLERK_JS_URL || ''; +export const CLERK_UI_VERSION = process.env.NEXT_PUBLIC_CLERK_UI_VERSION || ''; export const CLERK_UI_URL = process.env.NEXT_PUBLIC_CLERK_UI_URL || ''; export const API_VERSION = process.env.CLERK_API_VERSION || 'v1'; export const SECRET_KEY = process.env.CLERK_SECRET_KEY || ''; diff --git a/packages/nextjs/src/utils/clerk-script.tsx b/packages/nextjs/src/utils/clerk-script.tsx index aa4a42d811a..8b3630f29ea 100644 --- a/packages/nextjs/src/utils/clerk-script.tsx +++ b/packages/nextjs/src/utils/clerk-script.tsx @@ -38,7 +38,8 @@ function ClerkScript(props: ClerkScriptProps) { } export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] }) { - const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, nonce, prefetchUI } = useClerkNextOptions(); + const { publishableKey, clerkJSUrl, clerkJSVersion, clerkUIUrl, clerkUIVersion, nonce, prefetchUI } = + useClerkNextOptions(); const { domain, proxyUrl } = useClerk(); if (!publishableKey) { @@ -50,6 +51,7 @@ export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] }) clerkJSUrl, clerkJSVersion, clerkUIUrl, + clerkUIVersion, nonce, domain, proxyUrl, diff --git a/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts b/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts index 0050cb522f4..e59be2f5715 100644 --- a/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts +++ b/packages/nextjs/src/utils/mergeNextClerkPropsWithEnv.ts @@ -25,6 +25,7 @@ export const mergeNextClerkPropsWithEnv = (props: Omit({ jsUrl: options.clerkJSUrl, uiUrl: options.clerkUIUrl, clerkJSVersion: options.clerkJSVersion, + clerkUIVersion: options.clerkUIVersion, // prefetchUI config: can be false or undefined prefetchUI: options.prefetchUI, isSatellite: options.isSatellite, diff --git a/packages/react-router/src/client/ReactRouterClerkProvider.tsx b/packages/react-router/src/client/ReactRouterClerkProvider.tsx index 5da08272f20..4b95636a56a 100644 --- a/packages/react-router/src/client/ReactRouterClerkProvider.tsx +++ b/packages/react-router/src/client/ReactRouterClerkProvider.tsx @@ -64,6 +64,7 @@ function ClerkProviderBase({ children, ...rest }: ClerkProv __clerkJSUrl, __clerkJSVersion, __clerkUIUrl, + __clerkUIVersion, __prefetchUI, __telemetryDisabled, __telemetryDebug, @@ -93,6 +94,7 @@ function ClerkProviderBase({ children, ...rest }: ClerkProv clerkJSUrl: __clerkJSUrl, clerkJSVersion: __clerkJSVersion, clerkUIUrl: __clerkUIUrl, + clerkUIVersion: __clerkUIVersion, prefetchUI: __prefetchUI, telemetry: { disabled: __telemetryDisabled, diff --git a/packages/react-router/src/client/types.ts b/packages/react-router/src/client/types.ts index 1c7c15fcbb3..63917e97719 100644 --- a/packages/react-router/src/client/types.ts +++ b/packages/react-router/src/client/types.ts @@ -21,6 +21,7 @@ export type ClerkState = { __clerkJSUrl: string | undefined; __clerkJSVersion: string | undefined; __clerkUIUrl: string | undefined; + __clerkUIVersion: string | undefined; __prefetchUI: boolean | undefined; __telemetryDisabled: boolean | undefined; __telemetryDebug: boolean | undefined; diff --git a/packages/react-router/src/server/utils.ts b/packages/react-router/src/server/utils.ts index 2070bdeef5e..4947dcb8ef4 100644 --- a/packages/react-router/src/server/utils.ts +++ b/packages/react-router/src/server/utils.ts @@ -96,6 +96,7 @@ export function getResponseClerkState(requestState: RequestStateWithRedirectUrls __clerkJSUrl: envVars.clerkJsUrl, __clerkJSVersion: envVars.clerkJsVersion, __clerkUIUrl: envVars.clerkUIUrl, + __clerkUIVersion: envVars.clerkUIVersion, __prefetchUI: envVars.prefetchUI, __telemetryDisabled: envVars.telemetryDisabled, __telemetryDebug: envVars.telemetryDebug, diff --git a/packages/react-router/src/utils/env.ts b/packages/react-router/src/utils/env.ts index 0935e5653eb..247f50ca56c 100644 --- a/packages/react-router/src/utils/env.ts +++ b/packages/react-router/src/utils/env.ts @@ -17,6 +17,7 @@ export const getPublicEnvVariables = (context: AppLoadContext | undefined) => { clerkJsUrl: getValue('CLERK_JS_URL'), clerkJsVersion: getValue('CLERK_JS_VERSION'), clerkUIUrl: getValue('CLERK_UI_URL'), + clerkUIVersion: getValue('CLERK_UI_VERSION'), prefetchUI: getValue('CLERK_PREFETCH_UI') === 'false' ? false : undefined, telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')), telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')), diff --git a/packages/tanstack-react-start/src/client/types.ts b/packages/tanstack-react-start/src/client/types.ts index beccafca94f..f967a5a9395 100644 --- a/packages/tanstack-react-start/src/client/types.ts +++ b/packages/tanstack-react-start/src/client/types.ts @@ -18,6 +18,8 @@ export type ClerkState = { __clerk_debug: any; __clerkJSUrl: string | undefined; __clerkJSVersion: string | undefined; + __clerkUIUrl: string | undefined; + __clerkUIVersion: string | undefined; __prefetchUI: boolean | undefined; __telemetryDisabled: boolean | undefined; __telemetryDebug: boolean | undefined; diff --git a/packages/tanstack-react-start/src/client/utils.ts b/packages/tanstack-react-start/src/client/utils.ts index c281a0437b2..3dc8fe03ea8 100644 --- a/packages/tanstack-react-start/src/client/utils.ts +++ b/packages/tanstack-react-start/src/client/utils.ts @@ -20,6 +20,8 @@ export const pickFromClerkInitState = ( __signUpUrl, __clerkJSUrl, __clerkJSVersion, + __clerkUIUrl, + __clerkUIVersion, __telemetryDisabled, __telemetryDebug, __signInForceRedirectUrl, @@ -41,6 +43,8 @@ export const pickFromClerkInitState = ( signUpUrl: __signUpUrl, clerkJSUrl: __clerkJSUrl, clerkJSVersion: __clerkJSVersion, + clerkUIUrl: __clerkUIUrl, + clerkUIVersion: __clerkUIVersion, prefetchUI: __prefetchUI, telemetry: { disabled: __telemetryDisabled, @@ -66,6 +70,8 @@ export const mergeWithPublicEnvs = (restInitState: any) => { signUpUrl: restInitState.signUpUrl || envVars.signUpUrl, clerkJSUrl: restInitState.clerkJSUrl || envVars.clerkJsUrl, clerkJSVersion: restInitState.clerkJSVersion || envVars.clerkJsVersion, + clerkUIUrl: restInitState.clerkUIUrl || envVars.clerkUIUrl, + clerkUIVersion: restInitState.clerkUIVersion || envVars.clerkUIVersion, signInForceRedirectUrl: restInitState.signInForceRedirectUrl, prefetchUI: restInitState.prefetchUI ?? envVars.prefetchUI, }; diff --git a/packages/tanstack-react-start/src/server/constants.ts b/packages/tanstack-react-start/src/server/constants.ts index a757a2b9497..89590a6ec22 100644 --- a/packages/tanstack-react-start/src/server/constants.ts +++ b/packages/tanstack-react-start/src/server/constants.ts @@ -10,6 +10,8 @@ export const commonEnvs = () => { // Public environment variables CLERK_JS_VERSION: publicEnvs.clerkJsVersion, CLERK_JS_URL: publicEnvs.clerkJsUrl, + CLERK_UI_URL: publicEnvs.clerkUIUrl, + CLERK_UI_VERSION: publicEnvs.clerkUIVersion, PREFETCH_UI: publicEnvs.prefetchUI, PUBLISHABLE_KEY: publicEnvs.publishableKey, DOMAIN: publicEnvs.domain, diff --git a/packages/tanstack-react-start/src/server/utils/index.ts b/packages/tanstack-react-start/src/server/utils/index.ts index 78774a88f98..717f4312807 100644 --- a/packages/tanstack-react-start/src/server/utils/index.ts +++ b/packages/tanstack-react-start/src/server/utils/index.ts @@ -43,6 +43,8 @@ export function getResponseClerkState(requestState: RequestState, additionalStat __clerk_debug: debugRequestState(requestState), __clerkJSUrl: getEnvVariable('CLERK_JS') || getEnvVariable('CLERK_JS_URL'), __clerkJSVersion: getEnvVariable('CLERK_JS_VERSION'), + __clerkUIUrl: getEnvVariable('CLERK_UI_URL'), + __clerkUIVersion: getEnvVariable('CLERK_UI_VERSION'), __prefetchUI: getPrefetchUIFromEnv(), __telemetryDisabled: isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')), __telemetryDebug: isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')), diff --git a/packages/tanstack-react-start/src/utils/env.ts b/packages/tanstack-react-start/src/utils/env.ts index c22da072878..0bbdca423e7 100644 --- a/packages/tanstack-react-start/src/utils/env.ts +++ b/packages/tanstack-react-start/src/utils/env.ts @@ -16,6 +16,7 @@ export const getPublicEnvVariables = () => { clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'), clerkJsVersion: getValue('CLERK_JS_VERSION'), clerkUIUrl: getValue('CLERK_UI_URL'), + clerkUIVersion: getValue('CLERK_UI_VERSION'), prefetchUI: getValue('CLERK_PREFETCH_UI') === 'false' ? false : undefined, telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')), telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),