fix(tanstack-start): Fix environment variable loading in runtime contexts

.changeset/loud-melons-hope.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix environment variable loading in runtime contexts

packages/tanstack-start/src/server/clerkClient.ts

@@ -1,34 +1,25 @@
 import { createClerkClient } from '@clerk/backend';
 
-import {
- API_URL,
- API_VERSION,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SDK_METADATA,
- SECRET_KEY,
- TELEMETRY_DEBUG,
- TELEMETRY_DISABLED,
-} from './constants';
+import { commonEnvs } from './constants';
 
-const clerkClient: typeof createClerkClient = options =>
- createClerkClient({
- secretKey: SECRET_KEY,
- publishableKey: PUBLISHABLE_KEY,
- apiUrl: API_URL,
- apiVersion: API_VERSION,
+const clerkClient: typeof createClerkClient = options => {
+ const commonEnv = commonEnvs();
+ return createClerkClient({
+ secretKey: commonEnv.SECRET_KEY,
+ publishableKey: commonEnv.PUBLISHABLE_KEY,
+ apiUrl: commonEnv.API_URL,
+ apiVersion: commonEnv.API_VERSION,
  userAgent: `${PACKAGE_NAME}@${PACKAGE_VERSION}`,
- proxyUrl: PROXY_URL,
- domain: DOMAIN,
- isSatellite: IS_SATELLITE,
- sdkMetadata: SDK_METADATA,
+ proxyUrl: commonEnv.PROXY_URL,
+ domain: commonEnv.DOMAIN,
+ isSatellite: commonEnv.IS_SATELLITE,
+ sdkMetadata: commonEnv.SDK_METADATA,
  telemetry: {
- disabled: TELEMETRY_DISABLED,
- debug: TELEMETRY_DEBUG,
+ disabled: commonEnv.TELEMETRY_DISABLED,
+ debug: commonEnv.TELEMETRY_DEBUG,
  },
  ...options,
  });
+};
 
 export { clerkClient };

packages/tanstack-start/src/server/constants.ts

@@ -1,25 +1,36 @@
 import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey';
+import { getEvent } from 'vinxi/http';
 
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
 
-export const CLERK_JS_VERSION = getPublicEnvVariables().clerkJsVersion || '';
-export const CLERK_JS_URL = getPublicEnvVariables().clerkJsUrl || '';
-export const API_VERSION = getEnvVariable('CLERK_API_VERSION') || 'v1';
-export const SECRET_KEY = getEnvVariable('CLERK_SECRET_KEY') || '';
-export const PUBLISHABLE_KEY = getPublicEnvVariables().publishableKey || '';
-export const ENCRYPTION_KEY = getEnvVariable('CLERK_ENCRYPTION_KEY') || '';
-export const API_URL = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(PUBLISHABLE_KEY);
-export const DOMAIN = getPublicEnvVariables().domain || '';
-export const PROXY_URL = getPublicEnvVariables().proxyUrl || '';
-export const CLERK_JWT_KEY = getEnvVariable('CLERK_JWT_KEY') || '';
-export const IS_SATELLITE = getPublicEnvVariables().isSatellite || false;
-export const SIGN_IN_URL = getPublicEnvVariables().signInUrl || '';
-export const SIGN_UP_URL = getPublicEnvVariables().signUpUrl || '';
-export const SDK_METADATA = {
- name: PACKAGE_NAME,
- version: PACKAGE_VERSION,
- environment: getEnvVariable('NODE_ENV'),
-};
+export const commonEnvs = () => {
+ const event = getEvent();
+ const publicEnvs = getPublicEnvVariables(event);
+
+ return {
+ // Public environment variables
+ CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
+ CLERK_JS_URL: publicEnvs.clerkJsUrl,
+ PUBLISHABLE_KEY: publicEnvs.publishableKey,
+ DOMAIN: publicEnvs.domain,
+ PROXY_URL: publicEnvs.proxyUrl,
+ IS_SATELLITE: publicEnvs.isSatellite,
+ SIGN_IN_URL: publicEnvs.signInUrl,
+ SIGN_UP_URL: publicEnvs.signUpUrl,
+ TELEMETRY_DISABLED: publicEnvs.telemetryDisabled,
+ TELEMETRY_DEBUG: publicEnvs.telemetryDebug,
 
-export const TELEMETRY_DISABLED = getPublicEnvVariables().telemetryDisabled;
-export const TELEMETRY_DEBUG = getPublicEnvVariables().telemetryDebug;
+ // Server-only environment variables
+ API_VERSION: getEnvVariable('CLERK_API_VERSION', 'v1', event),
+ SECRET_KEY: getEnvVariable('CLERK_SECRET_KEY', '', event),
+ ENCRYPTION_KEY: getEnvVariable('CLERK_ENCRYPTION_KEY', '', event),
+ CLERK_JWT_KEY: getEnvVariable('CLERK_JWT_KEY', '', event),
+ API_URL: getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publicEnvs.publishableKey),
+
+ SDK_METADATA: {
+ name: PACKAGE_NAME,
+ version: PACKAGE_VERSION,
+ environment: getEnvVariable('NODE_ENV', '', event),
+ },
+ } as const;
+};

packages/tanstack-start/src/server/loadOptions.ts

@@ -3,36 +3,29 @@ import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import { getEvent } from 'vinxi/http';
 
 import { errorThrower } from '../utils';
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
-import {
- CLERK_JWT_KEY,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SECRET_KEY,
- SIGN_IN_URL,
- SIGN_UP_URL,
-} from './constants';
+import { commonEnvs } from './constants';
 import type { LoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (request: Request, overrides: LoaderOptions = {}) => {
  const clerkRequest = createClerkRequest(patchRequest(request));
-
- const secretKey = overrides.secretKey || SECRET_KEY;
- const publishableKey = overrides.publishableKey || PUBLISHABLE_KEY;
- const jwtKey = overrides.jwtKey || CLERK_JWT_KEY;
- const apiUrl = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(publishableKey);
- const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || DOMAIN;
- const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || IS_SATELLITE;
- const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, PROXY_URL);
- const signInUrl = overrides.signInUrl || SIGN_IN_URL;
- const signUpUrl = overrides.signUpUrl || SIGN_UP_URL;
- const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables().afterSignInUrl;
- const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables().afterSignUpUrl;
+ const commonEnv = commonEnvs();
+ const event = getEvent();
+ const secretKey = overrides.secretKey || commonEnv.SECRET_KEY;
+ const publishableKey = overrides.publishableKey || commonEnv.PUBLISHABLE_KEY;
+ const jwtKey = overrides.jwtKey || commonEnv.CLERK_JWT_KEY;
+ const apiUrl = getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publishableKey);
+ const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || commonEnv.DOMAIN;
+ const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || commonEnv.IS_SATELLITE;
+ const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, commonEnv.PROXY_URL);
+ const signInUrl = overrides.signInUrl || commonEnv.SIGN_IN_URL;
+ const signUpUrl = overrides.signUpUrl || commonEnv.SIGN_UP_URL;
+ const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(event).afterSignInUrl;
+ const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(event).afterSignUpUrl;
 
  let proxyUrl;
  if (!!relativeOrAbsoluteProxyUrl && isProxyUrlRelative(relativeOrAbsoluteProxyUrl)) {

packages/tanstack-start/src/utils/env.ts

@@ -1,50 +1,55 @@
 import { isTruthy } from '@clerk/shared/underscore';
+import type { HTTPEvent } from 'vinxi/http';
 
 /**
  *
  * Utility function to get env variables.
  *
  * @param name env variable name
  * @param defaultVaue default value to return if the env variable is not set
+ * @param event - H3Event object for accessing runtime environment variables
  * @returns string
  *
  * @internal
  */
-export const getEnvVariable = (name: string, defaultVaue: string = ''): string => {
+export const getEnvVariable = (name: string, defaultValue: string = '', event?: HTTPEvent) => {
+ // Cloudflare context check
+ const cfValue = event?.context?.cloudflare?.env[name];
+ if (cfValue) {
+ return cfValue;
+ }
+
  // Node envs
  if (typeof process !== 'undefined' && process.env && typeof process.env[name] === 'string') {
- return process.env[name] || defaultVaue;
+ return process.env[name];
  }
 
- // @ts-expect-error - Vite specific
+ // Vite specific envs
  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[name] === 'string') {
- // @ts-expect-error - Vite specific
  return import.meta.env[name];
  }
 
- return defaultVaue;
+ return defaultValue;
 };
 
-export const getPublicEnvVariables = () => {
- return {
- publishableKey: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- domain: getEnvVariable('VITE_CLERK_DOMAIN') || getEnvVariable('CLERK_DOMAIN'),
- isSatellite: isTruthy(getEnvVariable('VITE_CLERK_IS_SATELLITE')) || isTruthy(getEnvVariable('CLERK_IS_SATELLITE')),
- proxyUrl: getEnvVariable('VITE_CLERK_PROXY_URL') || getEnvVariable('CLERK_PROXY_URL'),
- pk: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- signInUrl: getEnvVariable('VITE_CLERK_SIGN_IN_URL') || getEnvVariable('CLERK_SIGN_IN_URL'),
- signUpUrl: getEnvVariable('VITE_CLERK_SIGN_UP_URL') || getEnvVariable('CLERK_SIGN_UP_URL'),
- clerkJsUrl: getEnvVariable('VITE_CLERK_JS_URL') || getEnvVariable('CLERK_JS'),
- clerkJsVariant: (getEnvVariable('VITE_CLERK_JS_VARIANT') || getEnvVariable('CLERK_JS_VARIANT')) as
- | ''
- | 'headless'
- | undefined,
- clerkJsVersion: getEnvVariable('VITE_CLERK_JS_VERSION') || getEnvVariable('CLERK_JS_VERSION'),
- telemetryDisabled:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DISABLED')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
- telemetryDebug:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),
- afterSignInUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL') || getEnvVariable('CLERK_AFTER_SIGN_IN_URL'),
- afterSignUpUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_UP_URL') || getEnvVariable('CLERK_AFTER_SIGN_UP_URL'),
+export const getPublicEnvVariables = (event?: HTTPEvent) => {
+ const getValue = (name: string): string => {
+ return getEnvVariable(`VITE_${name}`, '', event) || getEnvVariable(name, '', event);
  };
+
+ return {
+ publishableKey: getValue('CLERK_PUBLISHABLE_KEY'),
+ domain: getValue('CLERK_DOMAIN'),
+ isSatellite: isTruthy(getValue('CLERK_IS_SATELLITE')),
+ proxyUrl: getValue('CLERK_PROXY_URL'),
+ signInUrl: getValue('CLERK_SIGN_IN_URL'),
+ signUpUrl: getValue('CLERK_SIGN_UP_URL'),
+ clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
+ clerkJsVariant: getValue('CLERK_JS_VARIANT') as '' | 'headless' | undefined,
+ clerkJsVersion: getValue('CLERK_JS_VERSION'),
+ telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
+ telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),
+ afterSignInUrl: getValue('CLERK_AFTER_SIGN_IN_URL'),
+ afterSignUpUrl: getValue('CLERK_AFTER_SIGN_UP_URL'),
+ } as const;
 };

packages/tanstack-start/tsconfig.json

@@ -25,5 +25,5 @@
  "skipLibCheck": true,
  "strict": true
  },
- "include": ["src"]
+ "include": ["src", "vite-env.d.ts"]
 }

packages/tanstack-start/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(overrideOptions => {
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${!isProd}`,
  },
+ external: ['vinxi/http'],
  };
 
  return runAfterLast([

packages/tanstack-start/vite-env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+ [key: string]: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}

.changeset/loud-melons-hope.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix environment variable loading in runtime contexts

packages/tanstack-start/src/server/clerkClient.ts

@@ -1,34 +1,25 @@
 import { createClerkClient } from '@clerk/backend';
 
-import {
- API_URL,
- API_VERSION,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SDK_METADATA,
- SECRET_KEY,
- TELEMETRY_DEBUG,
- TELEMETRY_DISABLED,
-} from './constants';
+import { commonEnvs } from './constants';
 
-const clerkClient: typeof createClerkClient = options =>
- createClerkClient({
- secretKey: SECRET_KEY,
- publishableKey: PUBLISHABLE_KEY,
- apiUrl: API_URL,
- apiVersion: API_VERSION,
+const clerkClient: typeof createClerkClient = options => {
+ const commonEnv = commonEnvs();
+ return createClerkClient({
+ secretKey: commonEnv.SECRET_KEY,
+ publishableKey: commonEnv.PUBLISHABLE_KEY,
+ apiUrl: commonEnv.API_URL,
+ apiVersion: commonEnv.API_VERSION,
  userAgent: `${PACKAGE_NAME}@${PACKAGE_VERSION}`,
- proxyUrl: PROXY_URL,
- domain: DOMAIN,
- isSatellite: IS_SATELLITE,
- sdkMetadata: SDK_METADATA,
+ proxyUrl: commonEnv.PROXY_URL,
+ domain: commonEnv.DOMAIN,
+ isSatellite: commonEnv.IS_SATELLITE,
+ sdkMetadata: commonEnv.SDK_METADATA,
  telemetry: {
- disabled: TELEMETRY_DISABLED,
- debug: TELEMETRY_DEBUG,
+ disabled: commonEnv.TELEMETRY_DISABLED,
+ debug: commonEnv.TELEMETRY_DEBUG,
  },
  ...options,
  });
+};
 
 export { clerkClient };

packages/tanstack-start/src/server/constants.ts

@@ -1,25 +1,36 @@
 import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey';
+import { getEvent } from 'vinxi/http';
 
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
 
-export const CLERK_JS_VERSION = getPublicEnvVariables().clerkJsVersion || '';
-export const CLERK_JS_URL = getPublicEnvVariables().clerkJsUrl || '';
-export const API_VERSION = getEnvVariable('CLERK_API_VERSION') || 'v1';
-export const SECRET_KEY = getEnvVariable('CLERK_SECRET_KEY') || '';
-export const PUBLISHABLE_KEY = getPublicEnvVariables().publishableKey || '';
-export const ENCRYPTION_KEY = getEnvVariable('CLERK_ENCRYPTION_KEY') || '';
-export const API_URL = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(PUBLISHABLE_KEY);
-export const DOMAIN = getPublicEnvVariables().domain || '';
-export const PROXY_URL = getPublicEnvVariables().proxyUrl || '';
-export const CLERK_JWT_KEY = getEnvVariable('CLERK_JWT_KEY') || '';
-export const IS_SATELLITE = getPublicEnvVariables().isSatellite || false;
-export const SIGN_IN_URL = getPublicEnvVariables().signInUrl || '';
-export const SIGN_UP_URL = getPublicEnvVariables().signUpUrl || '';
-export const SDK_METADATA = {
- name: PACKAGE_NAME,
- version: PACKAGE_VERSION,
- environment: getEnvVariable('NODE_ENV'),
-};
+export const commonEnvs = () => {
+ const event = getEvent();
+ const publicEnvs = getPublicEnvVariables(event);
+
+ return {
+ // Public environment variables
+ CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
+ CLERK_JS_URL: publicEnvs.clerkJsUrl,
+ PUBLISHABLE_KEY: publicEnvs.publishableKey,
+ DOMAIN: publicEnvs.domain,
+ PROXY_URL: publicEnvs.proxyUrl,
+ IS_SATELLITE: publicEnvs.isSatellite,
+ SIGN_IN_URL: publicEnvs.signInUrl,
+ SIGN_UP_URL: publicEnvs.signUpUrl,
+ TELEMETRY_DISABLED: publicEnvs.telemetryDisabled,
+ TELEMETRY_DEBUG: publicEnvs.telemetryDebug,
 
-export const TELEMETRY_DISABLED = getPublicEnvVariables().telemetryDisabled;
-export const TELEMETRY_DEBUG = getPublicEnvVariables().telemetryDebug;
+ // Server-only environment variables
+ API_VERSION: getEnvVariable('CLERK_API_VERSION', 'v1', event),
+ SECRET_KEY: getEnvVariable('CLERK_SECRET_KEY', '', event),
+ ENCRYPTION_KEY: getEnvVariable('CLERK_ENCRYPTION_KEY', '', event),
+ CLERK_JWT_KEY: getEnvVariable('CLERK_JWT_KEY', '', event),
+ API_URL: getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publicEnvs.publishableKey),
+
+ SDK_METADATA: {
+ name: PACKAGE_NAME,
+ version: PACKAGE_VERSION,
+ environment: getEnvVariable('NODE_ENV', '', event),
+ },
+ } as const;
+};

packages/tanstack-start/src/server/loadOptions.ts

@@ -3,36 +3,29 @@ import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import { getEvent } from 'vinxi/http';
 
 import { errorThrower } from '../utils';
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
-import {
- CLERK_JWT_KEY,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SECRET_KEY,
- SIGN_IN_URL,
- SIGN_UP_URL,
-} from './constants';
+import { commonEnvs } from './constants';
 import type { LoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (request: Request, overrides: LoaderOptions = {}) => {
  const clerkRequest = createClerkRequest(patchRequest(request));
-
- const secretKey = overrides.secretKey || SECRET_KEY;
- const publishableKey = overrides.publishableKey || PUBLISHABLE_KEY;
- const jwtKey = overrides.jwtKey || CLERK_JWT_KEY;
- const apiUrl = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(publishableKey);
- const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || DOMAIN;
- const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || IS_SATELLITE;
- const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, PROXY_URL);
- const signInUrl = overrides.signInUrl || SIGN_IN_URL;
- const signUpUrl = overrides.signUpUrl || SIGN_UP_URL;
- const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables().afterSignInUrl;
- const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables().afterSignUpUrl;
+ const commonEnv = commonEnvs();
+ const event = getEvent();
+ const secretKey = overrides.secretKey || commonEnv.SECRET_KEY;
+ const publishableKey = overrides.publishableKey || commonEnv.PUBLISHABLE_KEY;
+ const jwtKey = overrides.jwtKey || commonEnv.CLERK_JWT_KEY;
+ const apiUrl = getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publishableKey);
+ const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || commonEnv.DOMAIN;
+ const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || commonEnv.IS_SATELLITE;
+ const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, commonEnv.PROXY_URL);
+ const signInUrl = overrides.signInUrl || commonEnv.SIGN_IN_URL;
+ const signUpUrl = overrides.signUpUrl || commonEnv.SIGN_UP_URL;
+ const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(event).afterSignInUrl;
+ const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(event).afterSignUpUrl;
 
  let proxyUrl;
  if (!!relativeOrAbsoluteProxyUrl && isProxyUrlRelative(relativeOrAbsoluteProxyUrl)) {

packages/tanstack-start/src/utils/env.ts

@@ -1,50 +1,55 @@
 import { isTruthy } from '@clerk/shared/underscore';
+import type { HTTPEvent } from 'vinxi/http';
 
 /**
  *
  * Utility function to get env variables.
  *
  * @param name env variable name
  * @param defaultVaue default value to return if the env variable is not set
+ * @param event - H3Event object for accessing runtime environment variables
  * @returns string
  *
  * @internal
  */
-export const getEnvVariable = (name: string, defaultVaue: string = ''): string => {
+export const getEnvVariable = (name: string, defaultValue: string = '', event?: HTTPEvent) => {
+ // Cloudflare context check
+ const cfValue = event?.context?.cloudflare?.env[name];
+ if (cfValue) {
+ return cfValue;
+ }
+
  // Node envs
  if (typeof process !== 'undefined' && process.env && typeof process.env[name] === 'string') {
- return process.env[name] || defaultVaue;
+ return process.env[name];
  }
 
- // @ts-expect-error - Vite specific
+ // Vite specific envs
  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[name] === 'string') {
- // @ts-expect-error - Vite specific
  return import.meta.env[name];
  }
 
- return defaultVaue;
+ return defaultValue;
 };
 
-export const getPublicEnvVariables = () => {
- return {
- publishableKey: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- domain: getEnvVariable('VITE_CLERK_DOMAIN') || getEnvVariable('CLERK_DOMAIN'),
- isSatellite: isTruthy(getEnvVariable('VITE_CLERK_IS_SATELLITE')) || isTruthy(getEnvVariable('CLERK_IS_SATELLITE')),
- proxyUrl: getEnvVariable('VITE_CLERK_PROXY_URL') || getEnvVariable('CLERK_PROXY_URL'),
- pk: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- signInUrl: getEnvVariable('VITE_CLERK_SIGN_IN_URL') || getEnvVariable('CLERK_SIGN_IN_URL'),
- signUpUrl: getEnvVariable('VITE_CLERK_SIGN_UP_URL') || getEnvVariable('CLERK_SIGN_UP_URL'),
- clerkJsUrl: getEnvVariable('VITE_CLERK_JS_URL') || getEnvVariable('CLERK_JS'),
- clerkJsVariant: (getEnvVariable('VITE_CLERK_JS_VARIANT') || getEnvVariable('CLERK_JS_VARIANT')) as
- | ''
- | 'headless'
- | undefined,
- clerkJsVersion: getEnvVariable('VITE_CLERK_JS_VERSION') || getEnvVariable('CLERK_JS_VERSION'),
- telemetryDisabled:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DISABLED')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
- telemetryDebug:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),
- afterSignInUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL') || getEnvVariable('CLERK_AFTER_SIGN_IN_URL'),
- afterSignUpUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_UP_URL') || getEnvVariable('CLERK_AFTER_SIGN_UP_URL'),
+export const getPublicEnvVariables = (event?: HTTPEvent) => {
+ const getValue = (name: string): string => {
+ return getEnvVariable(`VITE_${name}`, '', event) || getEnvVariable(name, '', event);
  };
+
+ return {
+ publishableKey: getValue('CLERK_PUBLISHABLE_KEY'),
+ domain: getValue('CLERK_DOMAIN'),
+ isSatellite: isTruthy(getValue('CLERK_IS_SATELLITE')),
+ proxyUrl: getValue('CLERK_PROXY_URL'),
+ signInUrl: getValue('CLERK_SIGN_IN_URL'),
+ signUpUrl: getValue('CLERK_SIGN_UP_URL'),
+ clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
+ clerkJsVariant: getValue('CLERK_JS_VARIANT') as '' | 'headless' | undefined,
+ clerkJsVersion: getValue('CLERK_JS_VERSION'),
+ telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
+ telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),
+ afterSignInUrl: getValue('CLERK_AFTER_SIGN_IN_URL'),
+ afterSignUpUrl: getValue('CLERK_AFTER_SIGN_UP_URL'),
+ } as const;
 };

packages/tanstack-start/tsconfig.json

@@ -25,5 +25,5 @@
  "skipLibCheck": true,
  "strict": true
  },
- "include": ["src"]
+ "include": ["src", "vite-env.d.ts"]
 }

packages/tanstack-start/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(overrideOptions => {
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${!isProd}`,
  },
+ external: ['vinxi/http'],
  };
 
  return runAfterLast([

packages/tanstack-start/vite-env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+ [key: string]: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}

.changeset/loud-melons-hope.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix environment variable loading in runtime contexts

packages/tanstack-start/src/server/clerkClient.ts

@@ -1,34 +1,25 @@
 import { createClerkClient } from '@clerk/backend';
 
-import {
- API_URL,
- API_VERSION,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SDK_METADATA,
- SECRET_KEY,
- TELEMETRY_DEBUG,
- TELEMETRY_DISABLED,
-} from './constants';
+import { commonEnvs } from './constants';
 
-const clerkClient: typeof createClerkClient = options =>
- createClerkClient({
- secretKey: SECRET_KEY,
- publishableKey: PUBLISHABLE_KEY,
- apiUrl: API_URL,
- apiVersion: API_VERSION,
+const clerkClient: typeof createClerkClient = options => {
+ const commonEnv = commonEnvs();
+ return createClerkClient({
+ secretKey: commonEnv.SECRET_KEY,
+ publishableKey: commonEnv.PUBLISHABLE_KEY,
+ apiUrl: commonEnv.API_URL,
+ apiVersion: commonEnv.API_VERSION,
  userAgent: `${PACKAGE_NAME}@${PACKAGE_VERSION}`,
- proxyUrl: PROXY_URL,
- domain: DOMAIN,
- isSatellite: IS_SATELLITE,
- sdkMetadata: SDK_METADATA,
+ proxyUrl: commonEnv.PROXY_URL,
+ domain: commonEnv.DOMAIN,
+ isSatellite: commonEnv.IS_SATELLITE,
+ sdkMetadata: commonEnv.SDK_METADATA,
  telemetry: {
- disabled: TELEMETRY_DISABLED,
- debug: TELEMETRY_DEBUG,
+ disabled: commonEnv.TELEMETRY_DISABLED,
+ debug: commonEnv.TELEMETRY_DEBUG,
  },
  ...options,
  });
+};
 
 export { clerkClient };

packages/tanstack-start/src/server/constants.ts

@@ -1,25 +1,36 @@
 import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey';
+import { getEvent } from 'vinxi/http';
 
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
 
-export const CLERK_JS_VERSION = getPublicEnvVariables().clerkJsVersion || '';
-export const CLERK_JS_URL = getPublicEnvVariables().clerkJsUrl || '';
-export const API_VERSION = getEnvVariable('CLERK_API_VERSION') || 'v1';
-export const SECRET_KEY = getEnvVariable('CLERK_SECRET_KEY') || '';
-export const PUBLISHABLE_KEY = getPublicEnvVariables().publishableKey || '';
-export const ENCRYPTION_KEY = getEnvVariable('CLERK_ENCRYPTION_KEY') || '';
-export const API_URL = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(PUBLISHABLE_KEY);
-export const DOMAIN = getPublicEnvVariables().domain || '';
-export const PROXY_URL = getPublicEnvVariables().proxyUrl || '';
-export const CLERK_JWT_KEY = getEnvVariable('CLERK_JWT_KEY') || '';
-export const IS_SATELLITE = getPublicEnvVariables().isSatellite || false;
-export const SIGN_IN_URL = getPublicEnvVariables().signInUrl || '';
-export const SIGN_UP_URL = getPublicEnvVariables().signUpUrl || '';
-export const SDK_METADATA = {
- name: PACKAGE_NAME,
- version: PACKAGE_VERSION,
- environment: getEnvVariable('NODE_ENV'),
-};
+export const commonEnvs = () => {
+ const event = getEvent();
+ const publicEnvs = getPublicEnvVariables(event);
+
+ return {
+ // Public environment variables
+ CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
+ CLERK_JS_URL: publicEnvs.clerkJsUrl,
+ PUBLISHABLE_KEY: publicEnvs.publishableKey,
+ DOMAIN: publicEnvs.domain,
+ PROXY_URL: publicEnvs.proxyUrl,
+ IS_SATELLITE: publicEnvs.isSatellite,
+ SIGN_IN_URL: publicEnvs.signInUrl,
+ SIGN_UP_URL: publicEnvs.signUpUrl,
+ TELEMETRY_DISABLED: publicEnvs.telemetryDisabled,
+ TELEMETRY_DEBUG: publicEnvs.telemetryDebug,
 
-export const TELEMETRY_DISABLED = getPublicEnvVariables().telemetryDisabled;
-export const TELEMETRY_DEBUG = getPublicEnvVariables().telemetryDebug;
+ // Server-only environment variables
+ API_VERSION: getEnvVariable('CLERK_API_VERSION', 'v1', event),
+ SECRET_KEY: getEnvVariable('CLERK_SECRET_KEY', '', event),
+ ENCRYPTION_KEY: getEnvVariable('CLERK_ENCRYPTION_KEY', '', event),
+ CLERK_JWT_KEY: getEnvVariable('CLERK_JWT_KEY', '', event),
+ API_URL: getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publicEnvs.publishableKey),
+
+ SDK_METADATA: {
+ name: PACKAGE_NAME,
+ version: PACKAGE_VERSION,
+ environment: getEnvVariable('NODE_ENV', '', event),
+ },
+ } as const;
+};

packages/tanstack-start/src/server/loadOptions.ts

@@ -3,36 +3,29 @@ import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import { getEvent } from 'vinxi/http';
 
 import { errorThrower } from '../utils';
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
-import {
- CLERK_JWT_KEY,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SECRET_KEY,
- SIGN_IN_URL,
- SIGN_UP_URL,
-} from './constants';
+import { commonEnvs } from './constants';
 import type { LoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (request: Request, overrides: LoaderOptions = {}) => {
  const clerkRequest = createClerkRequest(patchRequest(request));
-
- const secretKey = overrides.secretKey || SECRET_KEY;
- const publishableKey = overrides.publishableKey || PUBLISHABLE_KEY;
- const jwtKey = overrides.jwtKey || CLERK_JWT_KEY;
- const apiUrl = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(publishableKey);
- const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || DOMAIN;
- const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || IS_SATELLITE;
- const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, PROXY_URL);
- const signInUrl = overrides.signInUrl || SIGN_IN_URL;
- const signUpUrl = overrides.signUpUrl || SIGN_UP_URL;
- const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables().afterSignInUrl;
- const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables().afterSignUpUrl;
+ const commonEnv = commonEnvs();
+ const event = getEvent();
+ const secretKey = overrides.secretKey || commonEnv.SECRET_KEY;
+ const publishableKey = overrides.publishableKey || commonEnv.PUBLISHABLE_KEY;
+ const jwtKey = overrides.jwtKey || commonEnv.CLERK_JWT_KEY;
+ const apiUrl = getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publishableKey);
+ const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || commonEnv.DOMAIN;
+ const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || commonEnv.IS_SATELLITE;
+ const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, commonEnv.PROXY_URL);
+ const signInUrl = overrides.signInUrl || commonEnv.SIGN_IN_URL;
+ const signUpUrl = overrides.signUpUrl || commonEnv.SIGN_UP_URL;
+ const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(event).afterSignInUrl;
+ const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(event).afterSignUpUrl;
 
  let proxyUrl;
  if (!!relativeOrAbsoluteProxyUrl && isProxyUrlRelative(relativeOrAbsoluteProxyUrl)) {

packages/tanstack-start/src/utils/env.ts

@@ -1,50 +1,55 @@
 import { isTruthy } from '@clerk/shared/underscore';
+import type { HTTPEvent } from 'vinxi/http';
 
 /**
  *
  * Utility function to get env variables.
  *
  * @param name env variable name
  * @param defaultVaue default value to return if the env variable is not set
+ * @param event - H3Event object for accessing runtime environment variables
  * @returns string
  *
  * @internal
  */
-export const getEnvVariable = (name: string, defaultVaue: string = ''): string => {
+export const getEnvVariable = (name: string, defaultValue: string = '', event?: HTTPEvent) => {
+ // Cloudflare context check
+ const cfValue = event?.context?.cloudflare?.env[name];
+ if (cfValue) {
+ return cfValue;
+ }
+
  // Node envs
  if (typeof process !== 'undefined' && process.env && typeof process.env[name] === 'string') {
- return process.env[name] || defaultVaue;
+ return process.env[name];
  }
 
- // @ts-expect-error - Vite specific
+ // Vite specific envs
  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[name] === 'string') {
- // @ts-expect-error - Vite specific
  return import.meta.env[name];
  }
 
- return defaultVaue;
+ return defaultValue;
 };
 
-export const getPublicEnvVariables = () => {
- return {
- publishableKey: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- domain: getEnvVariable('VITE_CLERK_DOMAIN') || getEnvVariable('CLERK_DOMAIN'),
- isSatellite: isTruthy(getEnvVariable('VITE_CLERK_IS_SATELLITE')) || isTruthy(getEnvVariable('CLERK_IS_SATELLITE')),
- proxyUrl: getEnvVariable('VITE_CLERK_PROXY_URL') || getEnvVariable('CLERK_PROXY_URL'),
- pk: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- signInUrl: getEnvVariable('VITE_CLERK_SIGN_IN_URL') || getEnvVariable('CLERK_SIGN_IN_URL'),
- signUpUrl: getEnvVariable('VITE_CLERK_SIGN_UP_URL') || getEnvVariable('CLERK_SIGN_UP_URL'),
- clerkJsUrl: getEnvVariable('VITE_CLERK_JS_URL') || getEnvVariable('CLERK_JS'),
- clerkJsVariant: (getEnvVariable('VITE_CLERK_JS_VARIANT') || getEnvVariable('CLERK_JS_VARIANT')) as
- | ''
- | 'headless'
- | undefined,
- clerkJsVersion: getEnvVariable('VITE_CLERK_JS_VERSION') || getEnvVariable('CLERK_JS_VERSION'),
- telemetryDisabled:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DISABLED')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
- telemetryDebug:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),
- afterSignInUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL') || getEnvVariable('CLERK_AFTER_SIGN_IN_URL'),
- afterSignUpUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_UP_URL') || getEnvVariable('CLERK_AFTER_SIGN_UP_URL'),
+export const getPublicEnvVariables = (event?: HTTPEvent) => {
+ const getValue = (name: string): string => {
+ return getEnvVariable(`VITE_${name}`, '', event) || getEnvVariable(name, '', event);
  };
+
+ return {
+ publishableKey: getValue('CLERK_PUBLISHABLE_KEY'),
+ domain: getValue('CLERK_DOMAIN'),
+ isSatellite: isTruthy(getValue('CLERK_IS_SATELLITE')),
+ proxyUrl: getValue('CLERK_PROXY_URL'),
+ signInUrl: getValue('CLERK_SIGN_IN_URL'),
+ signUpUrl: getValue('CLERK_SIGN_UP_URL'),
+ clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
+ clerkJsVariant: getValue('CLERK_JS_VARIANT') as '' | 'headless' | undefined,
+ clerkJsVersion: getValue('CLERK_JS_VERSION'),
+ telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
+ telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),
+ afterSignInUrl: getValue('CLERK_AFTER_SIGN_IN_URL'),
+ afterSignUpUrl: getValue('CLERK_AFTER_SIGN_UP_URL'),
+ } as const;
 };

packages/tanstack-start/tsconfig.json

@@ -25,5 +25,5 @@
  "skipLibCheck": true,
  "strict": true
  },
- "include": ["src"]
+ "include": ["src", "vite-env.d.ts"]
 }

packages/tanstack-start/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(overrideOptions => {
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${!isProd}`,
  },
+ external: ['vinxi/http'],
  };
 
  return runAfterLast([

packages/tanstack-start/vite-env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+ [key: string]: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}

.changeset/loud-melons-hope.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix environment variable loading in runtime contexts

packages/tanstack-start/src/server/clerkClient.ts

@@ -1,34 +1,25 @@
 import { createClerkClient } from '@clerk/backend';
 
-import {
- API_URL,
- API_VERSION,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SDK_METADATA,
- SECRET_KEY,
- TELEMETRY_DEBUG,
- TELEMETRY_DISABLED,
-} from './constants';
+import { commonEnvs } from './constants';
 
-const clerkClient: typeof createClerkClient = options =>
- createClerkClient({
- secretKey: SECRET_KEY,
- publishableKey: PUBLISHABLE_KEY,
- apiUrl: API_URL,
- apiVersion: API_VERSION,
+const clerkClient: typeof createClerkClient = options => {
+ const commonEnv = commonEnvs();
+ return createClerkClient({
+ secretKey: commonEnv.SECRET_KEY,
+ publishableKey: commonEnv.PUBLISHABLE_KEY,
+ apiUrl: commonEnv.API_URL,
+ apiVersion: commonEnv.API_VERSION,
  userAgent: `${PACKAGE_NAME}@${PACKAGE_VERSION}`,
- proxyUrl: PROXY_URL,
- domain: DOMAIN,
- isSatellite: IS_SATELLITE,
- sdkMetadata: SDK_METADATA,
+ proxyUrl: commonEnv.PROXY_URL,
+ domain: commonEnv.DOMAIN,
+ isSatellite: commonEnv.IS_SATELLITE,
+ sdkMetadata: commonEnv.SDK_METADATA,
  telemetry: {
- disabled: TELEMETRY_DISABLED,
- debug: TELEMETRY_DEBUG,
+ disabled: commonEnv.TELEMETRY_DISABLED,
+ debug: commonEnv.TELEMETRY_DEBUG,
  },
  ...options,
  });
+};
 
 export { clerkClient };

packages/tanstack-start/src/server/constants.ts

@@ -1,25 +1,36 @@
 import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey';
+import { getEvent } from 'vinxi/http';
 
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
 
-export const CLERK_JS_VERSION = getPublicEnvVariables().clerkJsVersion || '';
-export const CLERK_JS_URL = getPublicEnvVariables().clerkJsUrl || '';
-export const API_VERSION = getEnvVariable('CLERK_API_VERSION') || 'v1';
-export const SECRET_KEY = getEnvVariable('CLERK_SECRET_KEY') || '';
-export const PUBLISHABLE_KEY = getPublicEnvVariables().publishableKey || '';
-export const ENCRYPTION_KEY = getEnvVariable('CLERK_ENCRYPTION_KEY') || '';
-export const API_URL = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(PUBLISHABLE_KEY);
-export const DOMAIN = getPublicEnvVariables().domain || '';
-export const PROXY_URL = getPublicEnvVariables().proxyUrl || '';
-export const CLERK_JWT_KEY = getEnvVariable('CLERK_JWT_KEY') || '';
-export const IS_SATELLITE = getPublicEnvVariables().isSatellite || false;
-export const SIGN_IN_URL = getPublicEnvVariables().signInUrl || '';
-export const SIGN_UP_URL = getPublicEnvVariables().signUpUrl || '';
-export const SDK_METADATA = {
- name: PACKAGE_NAME,
- version: PACKAGE_VERSION,
- environment: getEnvVariable('NODE_ENV'),
-};
+export const commonEnvs = () => {
+ const event = getEvent();
+ const publicEnvs = getPublicEnvVariables(event);
+
+ return {
+ // Public environment variables
+ CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
+ CLERK_JS_URL: publicEnvs.clerkJsUrl,
+ PUBLISHABLE_KEY: publicEnvs.publishableKey,
+ DOMAIN: publicEnvs.domain,
+ PROXY_URL: publicEnvs.proxyUrl,
+ IS_SATELLITE: publicEnvs.isSatellite,
+ SIGN_IN_URL: publicEnvs.signInUrl,
+ SIGN_UP_URL: publicEnvs.signUpUrl,
+ TELEMETRY_DISABLED: publicEnvs.telemetryDisabled,
+ TELEMETRY_DEBUG: publicEnvs.telemetryDebug,
 
-export const TELEMETRY_DISABLED = getPublicEnvVariables().telemetryDisabled;
-export const TELEMETRY_DEBUG = getPublicEnvVariables().telemetryDebug;
+ // Server-only environment variables
+ API_VERSION: getEnvVariable('CLERK_API_VERSION', 'v1', event),
+ SECRET_KEY: getEnvVariable('CLERK_SECRET_KEY', '', event),
+ ENCRYPTION_KEY: getEnvVariable('CLERK_ENCRYPTION_KEY', '', event),
+ CLERK_JWT_KEY: getEnvVariable('CLERK_JWT_KEY', '', event),
+ API_URL: getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publicEnvs.publishableKey),
+
+ SDK_METADATA: {
+ name: PACKAGE_NAME,
+ version: PACKAGE_VERSION,
+ environment: getEnvVariable('NODE_ENV', '', event),
+ },
+ } as const;
+};

packages/tanstack-start/src/server/loadOptions.ts

@@ -3,36 +3,29 @@ import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import { getEvent } from 'vinxi/http';
 
 import { errorThrower } from '../utils';
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
-import {
- CLERK_JWT_KEY,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SECRET_KEY,
- SIGN_IN_URL,
- SIGN_UP_URL,
-} from './constants';
+import { commonEnvs } from './constants';
 import type { LoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (request: Request, overrides: LoaderOptions = {}) => {
  const clerkRequest = createClerkRequest(patchRequest(request));
-
- const secretKey = overrides.secretKey || SECRET_KEY;
- const publishableKey = overrides.publishableKey || PUBLISHABLE_KEY;
- const jwtKey = overrides.jwtKey || CLERK_JWT_KEY;
- const apiUrl = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(publishableKey);
- const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || DOMAIN;
- const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || IS_SATELLITE;
- const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, PROXY_URL);
- const signInUrl = overrides.signInUrl || SIGN_IN_URL;
- const signUpUrl = overrides.signUpUrl || SIGN_UP_URL;
- const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables().afterSignInUrl;
- const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables().afterSignUpUrl;
+ const commonEnv = commonEnvs();
+ const event = getEvent();
+ const secretKey = overrides.secretKey || commonEnv.SECRET_KEY;
+ const publishableKey = overrides.publishableKey || commonEnv.PUBLISHABLE_KEY;
+ const jwtKey = overrides.jwtKey || commonEnv.CLERK_JWT_KEY;
+ const apiUrl = getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publishableKey);
+ const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || commonEnv.DOMAIN;
+ const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || commonEnv.IS_SATELLITE;
+ const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, commonEnv.PROXY_URL);
+ const signInUrl = overrides.signInUrl || commonEnv.SIGN_IN_URL;
+ const signUpUrl = overrides.signUpUrl || commonEnv.SIGN_UP_URL;
+ const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(event).afterSignInUrl;
+ const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(event).afterSignUpUrl;
 
  let proxyUrl;
  if (!!relativeOrAbsoluteProxyUrl && isProxyUrlRelative(relativeOrAbsoluteProxyUrl)) {

packages/tanstack-start/src/utils/env.ts

@@ -1,50 +1,55 @@
 import { isTruthy } from '@clerk/shared/underscore';
+import type { HTTPEvent } from 'vinxi/http';
 
 /**
  *
  * Utility function to get env variables.
  *
  * @param name env variable name
  * @param defaultVaue default value to return if the env variable is not set
+ * @param event - H3Event object for accessing runtime environment variables
  * @returns string
  *
  * @internal
  */
-export const getEnvVariable = (name: string, defaultVaue: string = ''): string => {
+export const getEnvVariable = (name: string, defaultValue: string = '', event?: HTTPEvent) => {
+ // Cloudflare context check
+ const cfValue = event?.context?.cloudflare?.env[name];
+ if (cfValue) {
+ return cfValue;
+ }
+
  // Node envs
  if (typeof process !== 'undefined' && process.env && typeof process.env[name] === 'string') {
- return process.env[name] || defaultVaue;
+ return process.env[name];
  }
 
- // @ts-expect-error - Vite specific
+ // Vite specific envs
  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[name] === 'string') {
- // @ts-expect-error - Vite specific
  return import.meta.env[name];
  }
 
- return defaultVaue;
+ return defaultValue;
 };
 
-export const getPublicEnvVariables = () => {
- return {
- publishableKey: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- domain: getEnvVariable('VITE_CLERK_DOMAIN') || getEnvVariable('CLERK_DOMAIN'),
- isSatellite: isTruthy(getEnvVariable('VITE_CLERK_IS_SATELLITE')) || isTruthy(getEnvVariable('CLERK_IS_SATELLITE')),
- proxyUrl: getEnvVariable('VITE_CLERK_PROXY_URL') || getEnvVariable('CLERK_PROXY_URL'),
- pk: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- signInUrl: getEnvVariable('VITE_CLERK_SIGN_IN_URL') || getEnvVariable('CLERK_SIGN_IN_URL'),
- signUpUrl: getEnvVariable('VITE_CLERK_SIGN_UP_URL') || getEnvVariable('CLERK_SIGN_UP_URL'),
- clerkJsUrl: getEnvVariable('VITE_CLERK_JS_URL') || getEnvVariable('CLERK_JS'),
- clerkJsVariant: (getEnvVariable('VITE_CLERK_JS_VARIANT') || getEnvVariable('CLERK_JS_VARIANT')) as
- | ''
- | 'headless'
- | undefined,
- clerkJsVersion: getEnvVariable('VITE_CLERK_JS_VERSION') || getEnvVariable('CLERK_JS_VERSION'),
- telemetryDisabled:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DISABLED')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
- telemetryDebug:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),
- afterSignInUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL') || getEnvVariable('CLERK_AFTER_SIGN_IN_URL'),
- afterSignUpUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_UP_URL') || getEnvVariable('CLERK_AFTER_SIGN_UP_URL'),
+export const getPublicEnvVariables = (event?: HTTPEvent) => {
+ const getValue = (name: string): string => {
+ return getEnvVariable(`VITE_${name}`, '', event) || getEnvVariable(name, '', event);
  };
+
+ return {
+ publishableKey: getValue('CLERK_PUBLISHABLE_KEY'),
+ domain: getValue('CLERK_DOMAIN'),
+ isSatellite: isTruthy(getValue('CLERK_IS_SATELLITE')),
+ proxyUrl: getValue('CLERK_PROXY_URL'),
+ signInUrl: getValue('CLERK_SIGN_IN_URL'),
+ signUpUrl: getValue('CLERK_SIGN_UP_URL'),
+ clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
+ clerkJsVariant: getValue('CLERK_JS_VARIANT') as '' | 'headless' | undefined,
+ clerkJsVersion: getValue('CLERK_JS_VERSION'),
+ telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
+ telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),
+ afterSignInUrl: getValue('CLERK_AFTER_SIGN_IN_URL'),
+ afterSignUpUrl: getValue('CLERK_AFTER_SIGN_UP_URL'),
+ } as const;
 };

packages/tanstack-start/tsconfig.json

@@ -25,5 +25,5 @@
  "skipLibCheck": true,
  "strict": true
  },
- "include": ["src"]
+ "include": ["src", "vite-env.d.ts"]
 }

packages/tanstack-start/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(overrideOptions => {
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${!isProd}`,
  },
+ external: ['vinxi/http'],
  };
 
  return runAfterLast([

packages/tanstack-start/vite-env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+ [key: string]: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}

.changeset/loud-melons-hope.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix environment variable loading in runtime contexts

packages/tanstack-start/src/server/clerkClient.ts

@@ -1,34 +1,25 @@
 import { createClerkClient } from '@clerk/backend';
 
-import {
- API_URL,
- API_VERSION,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SDK_METADATA,
- SECRET_KEY,
- TELEMETRY_DEBUG,
- TELEMETRY_DISABLED,
-} from './constants';
+import { commonEnvs } from './constants';
 
-const clerkClient: typeof createClerkClient = options =>
- createClerkClient({
- secretKey: SECRET_KEY,
- publishableKey: PUBLISHABLE_KEY,
- apiUrl: API_URL,
- apiVersion: API_VERSION,
+const clerkClient: typeof createClerkClient = options => {
+ const commonEnv = commonEnvs();
+ return createClerkClient({
+ secretKey: commonEnv.SECRET_KEY,
+ publishableKey: commonEnv.PUBLISHABLE_KEY,
+ apiUrl: commonEnv.API_URL,
+ apiVersion: commonEnv.API_VERSION,
  userAgent: `${PACKAGE_NAME}@${PACKAGE_VERSION}`,
- proxyUrl: PROXY_URL,
- domain: DOMAIN,
- isSatellite: IS_SATELLITE,
- sdkMetadata: SDK_METADATA,
+ proxyUrl: commonEnv.PROXY_URL,
+ domain: commonEnv.DOMAIN,
+ isSatellite: commonEnv.IS_SATELLITE,
+ sdkMetadata: commonEnv.SDK_METADATA,
  telemetry: {
- disabled: TELEMETRY_DISABLED,
- debug: TELEMETRY_DEBUG,
+ disabled: commonEnv.TELEMETRY_DISABLED,
+ debug: commonEnv.TELEMETRY_DEBUG,
  },
  ...options,
  });
+};
 
 export { clerkClient };

packages/tanstack-start/src/server/constants.ts

@@ -1,25 +1,36 @@
 import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey';
+import { getEvent } from 'vinxi/http';
 
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
 
-export const CLERK_JS_VERSION = getPublicEnvVariables().clerkJsVersion || '';
-export const CLERK_JS_URL = getPublicEnvVariables().clerkJsUrl || '';
-export const API_VERSION = getEnvVariable('CLERK_API_VERSION') || 'v1';
-export const SECRET_KEY = getEnvVariable('CLERK_SECRET_KEY') || '';
-export const PUBLISHABLE_KEY = getPublicEnvVariables().publishableKey || '';
-export const ENCRYPTION_KEY = getEnvVariable('CLERK_ENCRYPTION_KEY') || '';
-export const API_URL = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(PUBLISHABLE_KEY);
-export const DOMAIN = getPublicEnvVariables().domain || '';
-export const PROXY_URL = getPublicEnvVariables().proxyUrl || '';
-export const CLERK_JWT_KEY = getEnvVariable('CLERK_JWT_KEY') || '';
-export const IS_SATELLITE = getPublicEnvVariables().isSatellite || false;
-export const SIGN_IN_URL = getPublicEnvVariables().signInUrl || '';
-export const SIGN_UP_URL = getPublicEnvVariables().signUpUrl || '';
-export const SDK_METADATA = {
- name: PACKAGE_NAME,
- version: PACKAGE_VERSION,
- environment: getEnvVariable('NODE_ENV'),
-};
+export const commonEnvs = () => {
+ const event = getEvent();
+ const publicEnvs = getPublicEnvVariables(event);
+
+ return {
+ // Public environment variables
+ CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
+ CLERK_JS_URL: publicEnvs.clerkJsUrl,
+ PUBLISHABLE_KEY: publicEnvs.publishableKey,
+ DOMAIN: publicEnvs.domain,
+ PROXY_URL: publicEnvs.proxyUrl,
+ IS_SATELLITE: publicEnvs.isSatellite,
+ SIGN_IN_URL: publicEnvs.signInUrl,
+ SIGN_UP_URL: publicEnvs.signUpUrl,
+ TELEMETRY_DISABLED: publicEnvs.telemetryDisabled,
+ TELEMETRY_DEBUG: publicEnvs.telemetryDebug,
 
-export const TELEMETRY_DISABLED = getPublicEnvVariables().telemetryDisabled;
-export const TELEMETRY_DEBUG = getPublicEnvVariables().telemetryDebug;
+ // Server-only environment variables
+ API_VERSION: getEnvVariable('CLERK_API_VERSION', 'v1', event),
+ SECRET_KEY: getEnvVariable('CLERK_SECRET_KEY', '', event),
+ ENCRYPTION_KEY: getEnvVariable('CLERK_ENCRYPTION_KEY', '', event),
+ CLERK_JWT_KEY: getEnvVariable('CLERK_JWT_KEY', '', event),
+ API_URL: getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publicEnvs.publishableKey),
+
+ SDK_METADATA: {
+ name: PACKAGE_NAME,
+ version: PACKAGE_VERSION,
+ environment: getEnvVariable('NODE_ENV', '', event),
+ },
+ } as const;
+};

packages/tanstack-start/src/server/loadOptions.ts

@@ -3,36 +3,29 @@ import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import { getEvent } from 'vinxi/http';
 
 import { errorThrower } from '../utils';
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
-import {
- CLERK_JWT_KEY,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SECRET_KEY,
- SIGN_IN_URL,
- SIGN_UP_URL,
-} from './constants';
+import { commonEnvs } from './constants';
 import type { LoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (request: Request, overrides: LoaderOptions = {}) => {
  const clerkRequest = createClerkRequest(patchRequest(request));
-
- const secretKey = overrides.secretKey || SECRET_KEY;
- const publishableKey = overrides.publishableKey || PUBLISHABLE_KEY;
- const jwtKey = overrides.jwtKey || CLERK_JWT_KEY;
- const apiUrl = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(publishableKey);
- const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || DOMAIN;
- const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || IS_SATELLITE;
- const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, PROXY_URL);
- const signInUrl = overrides.signInUrl || SIGN_IN_URL;
- const signUpUrl = overrides.signUpUrl || SIGN_UP_URL;
- const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables().afterSignInUrl;
- const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables().afterSignUpUrl;
+ const commonEnv = commonEnvs();
+ const event = getEvent();
+ const secretKey = overrides.secretKey || commonEnv.SECRET_KEY;
+ const publishableKey = overrides.publishableKey || commonEnv.PUBLISHABLE_KEY;
+ const jwtKey = overrides.jwtKey || commonEnv.CLERK_JWT_KEY;
+ const apiUrl = getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publishableKey);
+ const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || commonEnv.DOMAIN;
+ const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || commonEnv.IS_SATELLITE;
+ const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, commonEnv.PROXY_URL);
+ const signInUrl = overrides.signInUrl || commonEnv.SIGN_IN_URL;
+ const signUpUrl = overrides.signUpUrl || commonEnv.SIGN_UP_URL;
+ const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(event).afterSignInUrl;
+ const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(event).afterSignUpUrl;
 
  let proxyUrl;
  if (!!relativeOrAbsoluteProxyUrl && isProxyUrlRelative(relativeOrAbsoluteProxyUrl)) {

packages/tanstack-start/src/utils/env.ts

@@ -1,50 +1,55 @@
 import { isTruthy } from '@clerk/shared/underscore';
+import type { HTTPEvent } from 'vinxi/http';
 
 /**
  *
  * Utility function to get env variables.
  *
  * @param name env variable name
  * @param defaultVaue default value to return if the env variable is not set
+ * @param event - H3Event object for accessing runtime environment variables
  * @returns string
  *
  * @internal
  */
-export const getEnvVariable = (name: string, defaultVaue: string = ''): string => {
+export const getEnvVariable = (name: string, defaultValue: string = '', event?: HTTPEvent) => {
+ // Cloudflare context check
+ const cfValue = event?.context?.cloudflare?.env[name];
+ if (cfValue) {
+ return cfValue;
+ }
+
  // Node envs
  if (typeof process !== 'undefined' && process.env && typeof process.env[name] === 'string') {
- return process.env[name] || defaultVaue;
+ return process.env[name];
  }
 
- // @ts-expect-error - Vite specific
+ // Vite specific envs
  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[name] === 'string') {
- // @ts-expect-error - Vite specific
  return import.meta.env[name];
  }
 
- return defaultVaue;
+ return defaultValue;
 };
 
-export const getPublicEnvVariables = () => {
- return {
- publishableKey: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- domain: getEnvVariable('VITE_CLERK_DOMAIN') || getEnvVariable('CLERK_DOMAIN'),
- isSatellite: isTruthy(getEnvVariable('VITE_CLERK_IS_SATELLITE')) || isTruthy(getEnvVariable('CLERK_IS_SATELLITE')),
- proxyUrl: getEnvVariable('VITE_CLERK_PROXY_URL') || getEnvVariable('CLERK_PROXY_URL'),
- pk: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- signInUrl: getEnvVariable('VITE_CLERK_SIGN_IN_URL') || getEnvVariable('CLERK_SIGN_IN_URL'),
- signUpUrl: getEnvVariable('VITE_CLERK_SIGN_UP_URL') || getEnvVariable('CLERK_SIGN_UP_URL'),
- clerkJsUrl: getEnvVariable('VITE_CLERK_JS_URL') || getEnvVariable('CLERK_JS'),
- clerkJsVariant: (getEnvVariable('VITE_CLERK_JS_VARIANT') || getEnvVariable('CLERK_JS_VARIANT')) as
- | ''
- | 'headless'
- | undefined,
- clerkJsVersion: getEnvVariable('VITE_CLERK_JS_VERSION') || getEnvVariable('CLERK_JS_VERSION'),
- telemetryDisabled:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DISABLED')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
- telemetryDebug:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),
- afterSignInUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL') || getEnvVariable('CLERK_AFTER_SIGN_IN_URL'),
- afterSignUpUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_UP_URL') || getEnvVariable('CLERK_AFTER_SIGN_UP_URL'),
+export const getPublicEnvVariables = (event?: HTTPEvent) => {
+ const getValue = (name: string): string => {
+ return getEnvVariable(`VITE_${name}`, '', event) || getEnvVariable(name, '', event);
  };
+
+ return {
+ publishableKey: getValue('CLERK_PUBLISHABLE_KEY'),
+ domain: getValue('CLERK_DOMAIN'),
+ isSatellite: isTruthy(getValue('CLERK_IS_SATELLITE')),
+ proxyUrl: getValue('CLERK_PROXY_URL'),
+ signInUrl: getValue('CLERK_SIGN_IN_URL'),
+ signUpUrl: getValue('CLERK_SIGN_UP_URL'),
+ clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
+ clerkJsVariant: getValue('CLERK_JS_VARIANT') as '' | 'headless' | undefined,
+ clerkJsVersion: getValue('CLERK_JS_VERSION'),
+ telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
+ telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),
+ afterSignInUrl: getValue('CLERK_AFTER_SIGN_IN_URL'),
+ afterSignUpUrl: getValue('CLERK_AFTER_SIGN_UP_URL'),
+ } as const;
 };

packages/tanstack-start/tsconfig.json

@@ -25,5 +25,5 @@
  "skipLibCheck": true,
  "strict": true
  },
- "include": ["src"]
+ "include": ["src", "vite-env.d.ts"]
 }

packages/tanstack-start/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(overrideOptions => {
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${!isProd}`,
  },
+ external: ['vinxi/http'],
  };
 
  return runAfterLast([

packages/tanstack-start/vite-env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+ [key: string]: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}

.changeset/loud-melons-hope.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix environment variable loading in runtime contexts

packages/tanstack-start/src/server/clerkClient.ts

@@ -1,34 +1,25 @@
 import { createClerkClient } from '@clerk/backend';
 
-import {
- API_URL,
- API_VERSION,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SDK_METADATA,
- SECRET_KEY,
- TELEMETRY_DEBUG,
- TELEMETRY_DISABLED,
-} from './constants';
+import { commonEnvs } from './constants';
 
-const clerkClient: typeof createClerkClient = options =>
- createClerkClient({
- secretKey: SECRET_KEY,
- publishableKey: PUBLISHABLE_KEY,
- apiUrl: API_URL,
- apiVersion: API_VERSION,
+const clerkClient: typeof createClerkClient = options => {
+ const commonEnv = commonEnvs();
+ return createClerkClient({
+ secretKey: commonEnv.SECRET_KEY,
+ publishableKey: commonEnv.PUBLISHABLE_KEY,
+ apiUrl: commonEnv.API_URL,
+ apiVersion: commonEnv.API_VERSION,
  userAgent: `${PACKAGE_NAME}@${PACKAGE_VERSION}`,
- proxyUrl: PROXY_URL,
- domain: DOMAIN,
- isSatellite: IS_SATELLITE,
- sdkMetadata: SDK_METADATA,
+ proxyUrl: commonEnv.PROXY_URL,
+ domain: commonEnv.DOMAIN,
+ isSatellite: commonEnv.IS_SATELLITE,
+ sdkMetadata: commonEnv.SDK_METADATA,
  telemetry: {
- disabled: TELEMETRY_DISABLED,
- debug: TELEMETRY_DEBUG,
+ disabled: commonEnv.TELEMETRY_DISABLED,
+ debug: commonEnv.TELEMETRY_DEBUG,
  },
  ...options,
  });
+};
 
 export { clerkClient };

packages/tanstack-start/src/server/constants.ts

@@ -1,25 +1,36 @@
 import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey';
+import { getEvent } from 'vinxi/http';
 
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
 
-export const CLERK_JS_VERSION = getPublicEnvVariables().clerkJsVersion || '';
-export const CLERK_JS_URL = getPublicEnvVariables().clerkJsUrl || '';
-export const API_VERSION = getEnvVariable('CLERK_API_VERSION') || 'v1';
-export const SECRET_KEY = getEnvVariable('CLERK_SECRET_KEY') || '';
-export const PUBLISHABLE_KEY = getPublicEnvVariables().publishableKey || '';
-export const ENCRYPTION_KEY = getEnvVariable('CLERK_ENCRYPTION_KEY') || '';
-export const API_URL = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(PUBLISHABLE_KEY);
-export const DOMAIN = getPublicEnvVariables().domain || '';
-export const PROXY_URL = getPublicEnvVariables().proxyUrl || '';
-export const CLERK_JWT_KEY = getEnvVariable('CLERK_JWT_KEY') || '';
-export const IS_SATELLITE = getPublicEnvVariables().isSatellite || false;
-export const SIGN_IN_URL = getPublicEnvVariables().signInUrl || '';
-export const SIGN_UP_URL = getPublicEnvVariables().signUpUrl || '';
-export const SDK_METADATA = {
- name: PACKAGE_NAME,
- version: PACKAGE_VERSION,
- environment: getEnvVariable('NODE_ENV'),
-};
+export const commonEnvs = () => {
+ const event = getEvent();
+ const publicEnvs = getPublicEnvVariables(event);
+
+ return {
+ // Public environment variables
+ CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
+ CLERK_JS_URL: publicEnvs.clerkJsUrl,
+ PUBLISHABLE_KEY: publicEnvs.publishableKey,
+ DOMAIN: publicEnvs.domain,
+ PROXY_URL: publicEnvs.proxyUrl,
+ IS_SATELLITE: publicEnvs.isSatellite,
+ SIGN_IN_URL: publicEnvs.signInUrl,
+ SIGN_UP_URL: publicEnvs.signUpUrl,
+ TELEMETRY_DISABLED: publicEnvs.telemetryDisabled,
+ TELEMETRY_DEBUG: publicEnvs.telemetryDebug,
 
-export const TELEMETRY_DISABLED = getPublicEnvVariables().telemetryDisabled;
-export const TELEMETRY_DEBUG = getPublicEnvVariables().telemetryDebug;
+ // Server-only environment variables
+ API_VERSION: getEnvVariable('CLERK_API_VERSION', 'v1', event),
+ SECRET_KEY: getEnvVariable('CLERK_SECRET_KEY', '', event),
+ ENCRYPTION_KEY: getEnvVariable('CLERK_ENCRYPTION_KEY', '', event),
+ CLERK_JWT_KEY: getEnvVariable('CLERK_JWT_KEY', '', event),
+ API_URL: getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publicEnvs.publishableKey),
+
+ SDK_METADATA: {
+ name: PACKAGE_NAME,
+ version: PACKAGE_VERSION,
+ environment: getEnvVariable('NODE_ENV', '', event),
+ },
+ } as const;
+};

packages/tanstack-start/src/server/loadOptions.ts

@@ -3,36 +3,29 @@ import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import { getEvent } from 'vinxi/http';
 
 import { errorThrower } from '../utils';
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
-import {
- CLERK_JWT_KEY,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SECRET_KEY,
- SIGN_IN_URL,
- SIGN_UP_URL,
-} from './constants';
+import { commonEnvs } from './constants';
 import type { LoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (request: Request, overrides: LoaderOptions = {}) => {
  const clerkRequest = createClerkRequest(patchRequest(request));
-
- const secretKey = overrides.secretKey || SECRET_KEY;
- const publishableKey = overrides.publishableKey || PUBLISHABLE_KEY;
- const jwtKey = overrides.jwtKey || CLERK_JWT_KEY;
- const apiUrl = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(publishableKey);
- const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || DOMAIN;
- const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || IS_SATELLITE;
- const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, PROXY_URL);
- const signInUrl = overrides.signInUrl || SIGN_IN_URL;
- const signUpUrl = overrides.signUpUrl || SIGN_UP_URL;
- const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables().afterSignInUrl;
- const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables().afterSignUpUrl;
+ const commonEnv = commonEnvs();
+ const event = getEvent();
+ const secretKey = overrides.secretKey || commonEnv.SECRET_KEY;
+ const publishableKey = overrides.publishableKey || commonEnv.PUBLISHABLE_KEY;
+ const jwtKey = overrides.jwtKey || commonEnv.CLERK_JWT_KEY;
+ const apiUrl = getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publishableKey);
+ const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || commonEnv.DOMAIN;
+ const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || commonEnv.IS_SATELLITE;
+ const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, commonEnv.PROXY_URL);
+ const signInUrl = overrides.signInUrl || commonEnv.SIGN_IN_URL;
+ const signUpUrl = overrides.signUpUrl || commonEnv.SIGN_UP_URL;
+ const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(event).afterSignInUrl;
+ const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(event).afterSignUpUrl;
 
  let proxyUrl;
  if (!!relativeOrAbsoluteProxyUrl && isProxyUrlRelative(relativeOrAbsoluteProxyUrl)) {

packages/tanstack-start/src/utils/env.ts

@@ -1,50 +1,55 @@
 import { isTruthy } from '@clerk/shared/underscore';
+import type { HTTPEvent } from 'vinxi/http';
 
 /**
  *
  * Utility function to get env variables.
  *
  * @param name env variable name
  * @param defaultVaue default value to return if the env variable is not set
+ * @param event - H3Event object for accessing runtime environment variables
  * @returns string
  *
  * @internal
  */
-export const getEnvVariable = (name: string, defaultVaue: string = ''): string => {
+export const getEnvVariable = (name: string, defaultValue: string = '', event?: HTTPEvent) => {
+ // Cloudflare context check
+ const cfValue = event?.context?.cloudflare?.env[name];
+ if (cfValue) {
+ return cfValue;
+ }
+
  // Node envs
  if (typeof process !== 'undefined' && process.env && typeof process.env[name] === 'string') {
- return process.env[name] || defaultVaue;
+ return process.env[name];
  }
 
- // @ts-expect-error - Vite specific
+ // Vite specific envs
  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[name] === 'string') {
- // @ts-expect-error - Vite specific
  return import.meta.env[name];
  }
 
- return defaultVaue;
+ return defaultValue;
 };
 
-export const getPublicEnvVariables = () => {
- return {
- publishableKey: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- domain: getEnvVariable('VITE_CLERK_DOMAIN') || getEnvVariable('CLERK_DOMAIN'),
- isSatellite: isTruthy(getEnvVariable('VITE_CLERK_IS_SATELLITE')) || isTruthy(getEnvVariable('CLERK_IS_SATELLITE')),
- proxyUrl: getEnvVariable('VITE_CLERK_PROXY_URL') || getEnvVariable('CLERK_PROXY_URL'),
- pk: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- signInUrl: getEnvVariable('VITE_CLERK_SIGN_IN_URL') || getEnvVariable('CLERK_SIGN_IN_URL'),
- signUpUrl: getEnvVariable('VITE_CLERK_SIGN_UP_URL') || getEnvVariable('CLERK_SIGN_UP_URL'),
- clerkJsUrl: getEnvVariable('VITE_CLERK_JS_URL') || getEnvVariable('CLERK_JS'),
- clerkJsVariant: (getEnvVariable('VITE_CLERK_JS_VARIANT') || getEnvVariable('CLERK_JS_VARIANT')) as
- | ''
- | 'headless'
- | undefined,
- clerkJsVersion: getEnvVariable('VITE_CLERK_JS_VERSION') || getEnvVariable('CLERK_JS_VERSION'),
- telemetryDisabled:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DISABLED')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
- telemetryDebug:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),
- afterSignInUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL') || getEnvVariable('CLERK_AFTER_SIGN_IN_URL'),
- afterSignUpUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_UP_URL') || getEnvVariable('CLERK_AFTER_SIGN_UP_URL'),
+export const getPublicEnvVariables = (event?: HTTPEvent) => {
+ const getValue = (name: string): string => {
+ return getEnvVariable(`VITE_${name}`, '', event) || getEnvVariable(name, '', event);
  };
+
+ return {
+ publishableKey: getValue('CLERK_PUBLISHABLE_KEY'),
+ domain: getValue('CLERK_DOMAIN'),
+ isSatellite: isTruthy(getValue('CLERK_IS_SATELLITE')),
+ proxyUrl: getValue('CLERK_PROXY_URL'),
+ signInUrl: getValue('CLERK_SIGN_IN_URL'),
+ signUpUrl: getValue('CLERK_SIGN_UP_URL'),
+ clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
+ clerkJsVariant: getValue('CLERK_JS_VARIANT') as '' | 'headless' | undefined,
+ clerkJsVersion: getValue('CLERK_JS_VERSION'),
+ telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
+ telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),
+ afterSignInUrl: getValue('CLERK_AFTER_SIGN_IN_URL'),
+ afterSignUpUrl: getValue('CLERK_AFTER_SIGN_UP_URL'),
+ } as const;
 };

packages/tanstack-start/tsconfig.json

@@ -25,5 +25,5 @@
  "skipLibCheck": true,
  "strict": true
  },
- "include": ["src"]
+ "include": ["src", "vite-env.d.ts"]
 }

packages/tanstack-start/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(overrideOptions => {
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${!isProd}`,
  },
+ external: ['vinxi/http'],
  };
 
  return runAfterLast([

packages/tanstack-start/vite-env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+ [key: string]: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}

.changeset/loud-melons-hope.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix environment variable loading in runtime contexts

packages/tanstack-start/src/server/clerkClient.ts

@@ -1,34 +1,25 @@
 import { createClerkClient } from '@clerk/backend';
 
-import {
- API_URL,
- API_VERSION,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SDK_METADATA,
- SECRET_KEY,
- TELEMETRY_DEBUG,
- TELEMETRY_DISABLED,
-} from './constants';
+import { commonEnvs } from './constants';
 
-const clerkClient: typeof createClerkClient = options =>
- createClerkClient({
- secretKey: SECRET_KEY,
- publishableKey: PUBLISHABLE_KEY,
- apiUrl: API_URL,
- apiVersion: API_VERSION,
+const clerkClient: typeof createClerkClient = options => {
+ const commonEnv = commonEnvs();
+ return createClerkClient({
+ secretKey: commonEnv.SECRET_KEY,
+ publishableKey: commonEnv.PUBLISHABLE_KEY,
+ apiUrl: commonEnv.API_URL,
+ apiVersion: commonEnv.API_VERSION,
  userAgent: `${PACKAGE_NAME}@${PACKAGE_VERSION}`,
- proxyUrl: PROXY_URL,
- domain: DOMAIN,
- isSatellite: IS_SATELLITE,
- sdkMetadata: SDK_METADATA,
+ proxyUrl: commonEnv.PROXY_URL,
+ domain: commonEnv.DOMAIN,
+ isSatellite: commonEnv.IS_SATELLITE,
+ sdkMetadata: commonEnv.SDK_METADATA,
  telemetry: {
- disabled: TELEMETRY_DISABLED,
- debug: TELEMETRY_DEBUG,
+ disabled: commonEnv.TELEMETRY_DISABLED,
+ debug: commonEnv.TELEMETRY_DEBUG,
  },
  ...options,
  });
+};
 
 export { clerkClient };

packages/tanstack-start/src/server/constants.ts

@@ -1,25 +1,36 @@
 import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey';
+import { getEvent } from 'vinxi/http';
 
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
 
-export const CLERK_JS_VERSION = getPublicEnvVariables().clerkJsVersion || '';
-export const CLERK_JS_URL = getPublicEnvVariables().clerkJsUrl || '';
-export const API_VERSION = getEnvVariable('CLERK_API_VERSION') || 'v1';
-export const SECRET_KEY = getEnvVariable('CLERK_SECRET_KEY') || '';
-export const PUBLISHABLE_KEY = getPublicEnvVariables().publishableKey || '';
-export const ENCRYPTION_KEY = getEnvVariable('CLERK_ENCRYPTION_KEY') || '';
-export const API_URL = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(PUBLISHABLE_KEY);
-export const DOMAIN = getPublicEnvVariables().domain || '';
-export const PROXY_URL = getPublicEnvVariables().proxyUrl || '';
-export const CLERK_JWT_KEY = getEnvVariable('CLERK_JWT_KEY') || '';
-export const IS_SATELLITE = getPublicEnvVariables().isSatellite || false;
-export const SIGN_IN_URL = getPublicEnvVariables().signInUrl || '';
-export const SIGN_UP_URL = getPublicEnvVariables().signUpUrl || '';
-export const SDK_METADATA = {
- name: PACKAGE_NAME,
- version: PACKAGE_VERSION,
- environment: getEnvVariable('NODE_ENV'),
-};
+export const commonEnvs = () => {
+ const event = getEvent();
+ const publicEnvs = getPublicEnvVariables(event);
+
+ return {
+ // Public environment variables
+ CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
+ CLERK_JS_URL: publicEnvs.clerkJsUrl,
+ PUBLISHABLE_KEY: publicEnvs.publishableKey,
+ DOMAIN: publicEnvs.domain,
+ PROXY_URL: publicEnvs.proxyUrl,
+ IS_SATELLITE: publicEnvs.isSatellite,
+ SIGN_IN_URL: publicEnvs.signInUrl,
+ SIGN_UP_URL: publicEnvs.signUpUrl,
+ TELEMETRY_DISABLED: publicEnvs.telemetryDisabled,
+ TELEMETRY_DEBUG: publicEnvs.telemetryDebug,
 
-export const TELEMETRY_DISABLED = getPublicEnvVariables().telemetryDisabled;
-export const TELEMETRY_DEBUG = getPublicEnvVariables().telemetryDebug;
+ // Server-only environment variables
+ API_VERSION: getEnvVariable('CLERK_API_VERSION', 'v1', event),
+ SECRET_KEY: getEnvVariable('CLERK_SECRET_KEY', '', event),
+ ENCRYPTION_KEY: getEnvVariable('CLERK_ENCRYPTION_KEY', '', event),
+ CLERK_JWT_KEY: getEnvVariable('CLERK_JWT_KEY', '', event),
+ API_URL: getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publicEnvs.publishableKey),
+
+ SDK_METADATA: {
+ name: PACKAGE_NAME,
+ version: PACKAGE_VERSION,
+ environment: getEnvVariable('NODE_ENV', '', event),
+ },
+ } as const;
+};

packages/tanstack-start/src/server/loadOptions.ts

@@ -3,36 +3,29 @@ import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import { getEvent } from 'vinxi/http';
 
 import { errorThrower } from '../utils';
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
-import {
- CLERK_JWT_KEY,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SECRET_KEY,
- SIGN_IN_URL,
- SIGN_UP_URL,
-} from './constants';
+import { commonEnvs } from './constants';
 import type { LoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (request: Request, overrides: LoaderOptions = {}) => {
  const clerkRequest = createClerkRequest(patchRequest(request));
-
- const secretKey = overrides.secretKey || SECRET_KEY;
- const publishableKey = overrides.publishableKey || PUBLISHABLE_KEY;
- const jwtKey = overrides.jwtKey || CLERK_JWT_KEY;
- const apiUrl = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(publishableKey);
- const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || DOMAIN;
- const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || IS_SATELLITE;
- const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, PROXY_URL);
- const signInUrl = overrides.signInUrl || SIGN_IN_URL;
- const signUpUrl = overrides.signUpUrl || SIGN_UP_URL;
- const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables().afterSignInUrl;
- const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables().afterSignUpUrl;
+ const commonEnv = commonEnvs();
+ const event = getEvent();
+ const secretKey = overrides.secretKey || commonEnv.SECRET_KEY;
+ const publishableKey = overrides.publishableKey || commonEnv.PUBLISHABLE_KEY;
+ const jwtKey = overrides.jwtKey || commonEnv.CLERK_JWT_KEY;
+ const apiUrl = getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publishableKey);
+ const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || commonEnv.DOMAIN;
+ const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || commonEnv.IS_SATELLITE;
+ const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, commonEnv.PROXY_URL);
+ const signInUrl = overrides.signInUrl || commonEnv.SIGN_IN_URL;
+ const signUpUrl = overrides.signUpUrl || commonEnv.SIGN_UP_URL;
+ const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(event).afterSignInUrl;
+ const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(event).afterSignUpUrl;
 
  let proxyUrl;
  if (!!relativeOrAbsoluteProxyUrl && isProxyUrlRelative(relativeOrAbsoluteProxyUrl)) {

packages/tanstack-start/src/utils/env.ts

@@ -1,50 +1,55 @@
 import { isTruthy } from '@clerk/shared/underscore';
+import type { HTTPEvent } from 'vinxi/http';
 
 /**
  *
  * Utility function to get env variables.
  *
  * @param name env variable name
  * @param defaultVaue default value to return if the env variable is not set
+ * @param event - H3Event object for accessing runtime environment variables
  * @returns string
  *
  * @internal
  */
-export const getEnvVariable = (name: string, defaultVaue: string = ''): string => {
+export const getEnvVariable = (name: string, defaultValue: string = '', event?: HTTPEvent) => {
+ // Cloudflare context check
+ const cfValue = event?.context?.cloudflare?.env[name];
+ if (cfValue) {
+ return cfValue;
+ }
+
  // Node envs
  if (typeof process !== 'undefined' && process.env && typeof process.env[name] === 'string') {
- return process.env[name] || defaultVaue;
+ return process.env[name];
  }
 
- // @ts-expect-error - Vite specific
+ // Vite specific envs
  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[name] === 'string') {
- // @ts-expect-error - Vite specific
  return import.meta.env[name];
  }
 
- return defaultVaue;
+ return defaultValue;
 };
 
-export const getPublicEnvVariables = () => {
- return {
- publishableKey: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- domain: getEnvVariable('VITE_CLERK_DOMAIN') || getEnvVariable('CLERK_DOMAIN'),
- isSatellite: isTruthy(getEnvVariable('VITE_CLERK_IS_SATELLITE')) || isTruthy(getEnvVariable('CLERK_IS_SATELLITE')),
- proxyUrl: getEnvVariable('VITE_CLERK_PROXY_URL') || getEnvVariable('CLERK_PROXY_URL'),
- pk: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- signInUrl: getEnvVariable('VITE_CLERK_SIGN_IN_URL') || getEnvVariable('CLERK_SIGN_IN_URL'),
- signUpUrl: getEnvVariable('VITE_CLERK_SIGN_UP_URL') || getEnvVariable('CLERK_SIGN_UP_URL'),
- clerkJsUrl: getEnvVariable('VITE_CLERK_JS_URL') || getEnvVariable('CLERK_JS'),
- clerkJsVariant: (getEnvVariable('VITE_CLERK_JS_VARIANT') || getEnvVariable('CLERK_JS_VARIANT')) as
- | ''
- | 'headless'
- | undefined,
- clerkJsVersion: getEnvVariable('VITE_CLERK_JS_VERSION') || getEnvVariable('CLERK_JS_VERSION'),
- telemetryDisabled:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DISABLED')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
- telemetryDebug:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),
- afterSignInUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL') || getEnvVariable('CLERK_AFTER_SIGN_IN_URL'),
- afterSignUpUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_UP_URL') || getEnvVariable('CLERK_AFTER_SIGN_UP_URL'),
+export const getPublicEnvVariables = (event?: HTTPEvent) => {
+ const getValue = (name: string): string => {
+ return getEnvVariable(`VITE_${name}`, '', event) || getEnvVariable(name, '', event);
  };
+
+ return {
+ publishableKey: getValue('CLERK_PUBLISHABLE_KEY'),
+ domain: getValue('CLERK_DOMAIN'),
+ isSatellite: isTruthy(getValue('CLERK_IS_SATELLITE')),
+ proxyUrl: getValue('CLERK_PROXY_URL'),
+ signInUrl: getValue('CLERK_SIGN_IN_URL'),
+ signUpUrl: getValue('CLERK_SIGN_UP_URL'),
+ clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
+ clerkJsVariant: getValue('CLERK_JS_VARIANT') as '' | 'headless' | undefined,
+ clerkJsVersion: getValue('CLERK_JS_VERSION'),
+ telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
+ telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),
+ afterSignInUrl: getValue('CLERK_AFTER_SIGN_IN_URL'),
+ afterSignUpUrl: getValue('CLERK_AFTER_SIGN_UP_URL'),
+ } as const;
 };

packages/tanstack-start/tsconfig.json

@@ -25,5 +25,5 @@
  "skipLibCheck": true,
  "strict": true
  },
- "include": ["src"]
+ "include": ["src", "vite-env.d.ts"]
 }

packages/tanstack-start/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(overrideOptions => {
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${!isProd}`,
  },
+ external: ['vinxi/http'],
  };
 
  return runAfterLast([

packages/tanstack-start/vite-env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+ [key: string]: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}

.changeset/loud-melons-hope.md

@@ -0,0 +1,5 @@
+---
+"@clerk/tanstack-start": patch
+---
+
+Fix environment variable loading in runtime contexts

packages/tanstack-start/src/server/clerkClient.ts

@@ -1,34 +1,25 @@
 import { createClerkClient } from '@clerk/backend';
 
-import {
- API_URL,
- API_VERSION,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SDK_METADATA,
- SECRET_KEY,
- TELEMETRY_DEBUG,
- TELEMETRY_DISABLED,
-} from './constants';
+import { commonEnvs } from './constants';
 
-const clerkClient: typeof createClerkClient = options =>
- createClerkClient({
- secretKey: SECRET_KEY,
- publishableKey: PUBLISHABLE_KEY,
- apiUrl: API_URL,
- apiVersion: API_VERSION,
+const clerkClient: typeof createClerkClient = options => {
+ const commonEnv = commonEnvs();
+ return createClerkClient({
+ secretKey: commonEnv.SECRET_KEY,
+ publishableKey: commonEnv.PUBLISHABLE_KEY,
+ apiUrl: commonEnv.API_URL,
+ apiVersion: commonEnv.API_VERSION,
  userAgent: `${PACKAGE_NAME}@${PACKAGE_VERSION}`,
- proxyUrl: PROXY_URL,
- domain: DOMAIN,
- isSatellite: IS_SATELLITE,
- sdkMetadata: SDK_METADATA,
+ proxyUrl: commonEnv.PROXY_URL,
+ domain: commonEnv.DOMAIN,
+ isSatellite: commonEnv.IS_SATELLITE,
+ sdkMetadata: commonEnv.SDK_METADATA,
  telemetry: {
- disabled: TELEMETRY_DISABLED,
- debug: TELEMETRY_DEBUG,
+ disabled: commonEnv.TELEMETRY_DISABLED,
+ debug: commonEnv.TELEMETRY_DEBUG,
  },
  ...options,
  });
+};
 
 export { clerkClient };

packages/tanstack-start/src/server/constants.ts

@@ -1,25 +1,36 @@
 import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey';
+import { getEvent } from 'vinxi/http';
 
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
 
-export const CLERK_JS_VERSION = getPublicEnvVariables().clerkJsVersion || '';
-export const CLERK_JS_URL = getPublicEnvVariables().clerkJsUrl || '';
-export const API_VERSION = getEnvVariable('CLERK_API_VERSION') || 'v1';
-export const SECRET_KEY = getEnvVariable('CLERK_SECRET_KEY') || '';
-export const PUBLISHABLE_KEY = getPublicEnvVariables().publishableKey || '';
-export const ENCRYPTION_KEY = getEnvVariable('CLERK_ENCRYPTION_KEY') || '';
-export const API_URL = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(PUBLISHABLE_KEY);
-export const DOMAIN = getPublicEnvVariables().domain || '';
-export const PROXY_URL = getPublicEnvVariables().proxyUrl || '';
-export const CLERK_JWT_KEY = getEnvVariable('CLERK_JWT_KEY') || '';
-export const IS_SATELLITE = getPublicEnvVariables().isSatellite || false;
-export const SIGN_IN_URL = getPublicEnvVariables().signInUrl || '';
-export const SIGN_UP_URL = getPublicEnvVariables().signUpUrl || '';
-export const SDK_METADATA = {
- name: PACKAGE_NAME,
- version: PACKAGE_VERSION,
- environment: getEnvVariable('NODE_ENV'),
-};
+export const commonEnvs = () => {
+ const event = getEvent();
+ const publicEnvs = getPublicEnvVariables(event);
+
+ return {
+ // Public environment variables
+ CLERK_JS_VERSION: publicEnvs.clerkJsVersion,
+ CLERK_JS_URL: publicEnvs.clerkJsUrl,
+ PUBLISHABLE_KEY: publicEnvs.publishableKey,
+ DOMAIN: publicEnvs.domain,
+ PROXY_URL: publicEnvs.proxyUrl,
+ IS_SATELLITE: publicEnvs.isSatellite,
+ SIGN_IN_URL: publicEnvs.signInUrl,
+ SIGN_UP_URL: publicEnvs.signUpUrl,
+ TELEMETRY_DISABLED: publicEnvs.telemetryDisabled,
+ TELEMETRY_DEBUG: publicEnvs.telemetryDebug,
 
-export const TELEMETRY_DISABLED = getPublicEnvVariables().telemetryDisabled;
-export const TELEMETRY_DEBUG = getPublicEnvVariables().telemetryDebug;
+ // Server-only environment variables
+ API_VERSION: getEnvVariable('CLERK_API_VERSION', 'v1', event),
+ SECRET_KEY: getEnvVariable('CLERK_SECRET_KEY', '', event),
+ ENCRYPTION_KEY: getEnvVariable('CLERK_ENCRYPTION_KEY', '', event),
+ CLERK_JWT_KEY: getEnvVariable('CLERK_JWT_KEY', '', event),
+ API_URL: getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publicEnvs.publishableKey),
+
+ SDK_METADATA: {
+ name: PACKAGE_NAME,
+ version: PACKAGE_VERSION,
+ environment: getEnvVariable('NODE_ENV', '', event),
+ },
+ } as const;
+};

packages/tanstack-start/src/server/loadOptions.ts

@@ -3,36 +3,29 @@ import { apiUrlFromPublishableKey } from '@clerk/shared/apiUrlFromPublishableKey
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import { getEvent } from 'vinxi/http';
 
 import { errorThrower } from '../utils';
 import { getEnvVariable, getPublicEnvVariables } from '../utils/env';
-import {
- CLERK_JWT_KEY,
- DOMAIN,
- IS_SATELLITE,
- PROXY_URL,
- PUBLISHABLE_KEY,
- SECRET_KEY,
- SIGN_IN_URL,
- SIGN_UP_URL,
-} from './constants';
+import { commonEnvs } from './constants';
 import type { LoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (request: Request, overrides: LoaderOptions = {}) => {
  const clerkRequest = createClerkRequest(patchRequest(request));
-
- const secretKey = overrides.secretKey || SECRET_KEY;
- const publishableKey = overrides.publishableKey || PUBLISHABLE_KEY;
- const jwtKey = overrides.jwtKey || CLERK_JWT_KEY;
- const apiUrl = getEnvVariable('CLERK_API_URL') || apiUrlFromPublishableKey(publishableKey);
- const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || DOMAIN;
- const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || IS_SATELLITE;
- const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, PROXY_URL);
- const signInUrl = overrides.signInUrl || SIGN_IN_URL;
- const signUpUrl = overrides.signUpUrl || SIGN_UP_URL;
- const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables().afterSignInUrl;
- const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables().afterSignUpUrl;
+ const commonEnv = commonEnvs();
+ const event = getEvent();
+ const secretKey = overrides.secretKey || commonEnv.SECRET_KEY;
+ const publishableKey = overrides.publishableKey || commonEnv.PUBLISHABLE_KEY;
+ const jwtKey = overrides.jwtKey || commonEnv.CLERK_JWT_KEY;
+ const apiUrl = getEnvVariable('CLERK_API_URL', '', event) || apiUrlFromPublishableKey(publishableKey);
+ const domain = handleValueOrFn(overrides.domain, new URL(request.url)) || commonEnv.DOMAIN;
+ const isSatellite = handleValueOrFn(overrides.isSatellite, new URL(request.url)) || commonEnv.IS_SATELLITE;
+ const relativeOrAbsoluteProxyUrl = handleValueOrFn(overrides?.proxyUrl, clerkRequest.clerkUrl, commonEnv.PROXY_URL);
+ const signInUrl = overrides.signInUrl || commonEnv.SIGN_IN_URL;
+ const signUpUrl = overrides.signUpUrl || commonEnv.SIGN_UP_URL;
+ const afterSignInUrl = overrides.afterSignInUrl || getPublicEnvVariables(event).afterSignInUrl;
+ const afterSignUpUrl = overrides.afterSignUpUrl || getPublicEnvVariables(event).afterSignUpUrl;
 
  let proxyUrl;
  if (!!relativeOrAbsoluteProxyUrl && isProxyUrlRelative(relativeOrAbsoluteProxyUrl)) {

packages/tanstack-start/src/utils/env.ts

@@ -1,50 +1,55 @@
 import { isTruthy } from '@clerk/shared/underscore';
+import type { HTTPEvent } from 'vinxi/http';
 
 /**
  *
  * Utility function to get env variables.
  *
  * @param name env variable name
  * @param defaultVaue default value to return if the env variable is not set
+ * @param event - H3Event object for accessing runtime environment variables
  * @returns string
  *
  * @internal
  */
-export const getEnvVariable = (name: string, defaultVaue: string = ''): string => {
+export const getEnvVariable = (name: string, defaultValue: string = '', event?: HTTPEvent) => {
+ // Cloudflare context check
+ const cfValue = event?.context?.cloudflare?.env[name];
+ if (cfValue) {
+ return cfValue;
+ }
+
  // Node envs
  if (typeof process !== 'undefined' && process.env && typeof process.env[name] === 'string') {
- return process.env[name] || defaultVaue;
+ return process.env[name];
  }
 
- // @ts-expect-error - Vite specific
+ // Vite specific envs
  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[name] === 'string') {
- // @ts-expect-error - Vite specific
  return import.meta.env[name];
  }
 
- return defaultVaue;
+ return defaultValue;
 };
 
-export const getPublicEnvVariables = () => {
- return {
- publishableKey: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- domain: getEnvVariable('VITE_CLERK_DOMAIN') || getEnvVariable('CLERK_DOMAIN'),
- isSatellite: isTruthy(getEnvVariable('VITE_CLERK_IS_SATELLITE')) || isTruthy(getEnvVariable('CLERK_IS_SATELLITE')),
- proxyUrl: getEnvVariable('VITE_CLERK_PROXY_URL') || getEnvVariable('CLERK_PROXY_URL'),
- pk: getEnvVariable('VITE_CLERK_PUBLISHABLE_KEY') || getEnvVariable('CLERK_PUBLISHABLE_KEY'),
- signInUrl: getEnvVariable('VITE_CLERK_SIGN_IN_URL') || getEnvVariable('CLERK_SIGN_IN_URL'),
- signUpUrl: getEnvVariable('VITE_CLERK_SIGN_UP_URL') || getEnvVariable('CLERK_SIGN_UP_URL'),
- clerkJsUrl: getEnvVariable('VITE_CLERK_JS_URL') || getEnvVariable('CLERK_JS'),
- clerkJsVariant: (getEnvVariable('VITE_CLERK_JS_VARIANT') || getEnvVariable('CLERK_JS_VARIANT')) as
- | ''
- | 'headless'
- | undefined,
- clerkJsVersion: getEnvVariable('VITE_CLERK_JS_VERSION') || getEnvVariable('CLERK_JS_VERSION'),
- telemetryDisabled:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DISABLED')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DISABLED')),
- telemetryDebug:
- isTruthy(getEnvVariable('VITE_CLERK_TELEMETRY_DEBUG')) || isTruthy(getEnvVariable('CLERK_TELEMETRY_DEBUG')),
- afterSignInUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_IN_URL') || getEnvVariable('CLERK_AFTER_SIGN_IN_URL'),
- afterSignUpUrl: getEnvVariable('VITE_CLERK_AFTER_SIGN_UP_URL') || getEnvVariable('CLERK_AFTER_SIGN_UP_URL'),
+export const getPublicEnvVariables = (event?: HTTPEvent) => {
+ const getValue = (name: string): string => {
+ return getEnvVariable(`VITE_${name}`, '', event) || getEnvVariable(name, '', event);
  };
+
+ return {
+ publishableKey: getValue('CLERK_PUBLISHABLE_KEY'),
+ domain: getValue('CLERK_DOMAIN'),
+ isSatellite: isTruthy(getValue('CLERK_IS_SATELLITE')),
+ proxyUrl: getValue('CLERK_PROXY_URL'),
+ signInUrl: getValue('CLERK_SIGN_IN_URL'),
+ signUpUrl: getValue('CLERK_SIGN_UP_URL'),
+ clerkJsUrl: getValue('CLERK_JS_URL') || getValue('CLERK_JS'),
+ clerkJsVariant: getValue('CLERK_JS_VARIANT') as '' | 'headless' | undefined,
+ clerkJsVersion: getValue('CLERK_JS_VERSION'),
+ telemetryDisabled: isTruthy(getValue('CLERK_TELEMETRY_DISABLED')),
+ telemetryDebug: isTruthy(getValue('CLERK_TELEMETRY_DEBUG')),
+ afterSignInUrl: getValue('CLERK_AFTER_SIGN_IN_URL'),
+ afterSignUpUrl: getValue('CLERK_AFTER_SIGN_UP_URL'),
+ } as const;
 };

packages/tanstack-start/tsconfig.json

@@ -25,5 +25,5 @@
  "skipLibCheck": true,
  "strict": true
  },
- "include": ["src"]
+ "include": ["src", "vite-env.d.ts"]
 }

packages/tanstack-start/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(overrideOptions => {
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${!isProd}`,
  },
+ external: ['vinxi/http'],
  };
 
  return runAfterLast([

packages/tanstack-start/vite-env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+ [key: string]: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}