feat(remix): Refactor getEnvVariable

.changeset/thin-geese-peel.md

@@ -0,0 +1,5 @@
+---
+'@clerk/remix': patch
+---
+
+Internal improvements for retrieving environment variables.

packages/remix/src/ssr/authenticateRequest.ts

@@ -27,10 +27,10 @@ export function authenticateRequest(args: LoaderFunctionArgs, opts: RootAuthLoad
   // 2. Then try from process.env if exists (Node).
   // 3. Then try from globalThis (Cloudflare Workers).
   // 4. Then from loader context (Cloudflare Pages).
-  const secretKey = opts.secretKey || getEnvVariable('CLERK_SECRET_KEY') || (context?.CLERK_SECRET_KEY as string) || '';
-  const apiKey = opts.apiKey || getEnvVariable('CLERK_API_KEY') || (context?.CLERK_API_KEY as string) || '';
+  const secretKey = opts.secretKey || getEnvVariable('CLERK_SECRET_KEY', context) || '';
+  const apiKey = opts.apiKey || getEnvVariable('CLERK_API_KEY', context) || '';
   if (apiKey) {
-    if (getEnvVariable('CLERK_API_KEY')) {
+    if (getEnvVariable('CLERK_API_KEY', context)) {
       deprecated('CLERK_API_KEY', 'Use `CLERK_SECRET_KEY` instead.');
     } else {
       deprecated('apiKey', 'Use `secretKey` instead.');
@@ -41,41 +41,34 @@ export function authenticateRequest(args: LoaderFunctionArgs, opts: RootAuthLoad
     throw new Error(noSecretKeyOrApiKeyError);
   }
 
-  const frontendApi =
-    opts.frontendApi || getEnvVariable('CLERK_FRONTEND_API') || (context?.CLERK_FRONTEND_API as string) || '';
+  const frontendApi = opts.frontendApi || getEnvVariable('CLERK_FRONTEND_API', context) || '';
   if (frontendApi) {
-    if (getEnvVariable('CLERK_FRONTEND_API')) {
+    if (getEnvVariable('CLERK_FRONTEND_API', context)) {
       deprecated('CLERK_FRONTEND_API', 'Use `CLERK_PUBLISHABLE_KEY` instead.');
     } else {
       deprecated('frontendApi', 'Use `publishableKey` instead.');
     }
   }
 
-  const publishableKey =
-    opts.publishableKey || getEnvVariable('CLERK_PUBLISHABLE_KEY') || (context?.CLERK_PUBLISHABLE_KEY as string) || '';
+  const publishableKey = opts.publishableKey || getEnvVariable('CLERK_PUBLISHABLE_KEY', context) || '';
 
-  const jwtKey = opts.jwtKey || getEnvVariable('CLERK_JWT_KEY') || (context?.CLERK_JWT_KEY as string);
+  const jwtKey = opts.jwtKey || getEnvVariable('CLERK_JWT_KEY', context);
 
-  const apiUrl = getEnvVariable('CLERK_API_URL') || (context?.CLERK_API_URL as string);
+  const apiUrl = getEnvVariable('CLERK_API_URL', context);
 
-  const domain =
-    handleValueOrFn(opts.domain, new URL(request.url)) ||
-    getEnvVariable('CLERK_DOMAIN') ||
-    (context?.CLERK_DOMAIN as string) ||
-    '';
+  const domain = handleValueOrFn(opts.domain, new URL(request.url)) || getEnvVariable('CLERK_DOMAIN', context) || '';
 
   const isSatellite =
     handleValueOrFn(opts.isSatellite, new URL(request.url)) ||
-    getEnvVariable('CLERK_IS_SATELLITE') === 'true' ||
-    (context?.CLERK_IS_SATELLITE as string) === 'true' ||
+    getEnvVariable('CLERK_IS_SATELLITE', context) === 'true' ||
     false;
 
   const requestURL = buildRequestUrl(request);
 
   const relativeOrAbsoluteProxyUrl = handleValueOrFn(
     opts?.proxyUrl,
     requestURL,
-    getEnvVariable('CLERK_PROXY_URL') || (context?.CLERK_PROXY_URL as string),
+    getEnvVariable('CLERK_PROXY_URL', context),
   );
 
   let proxyUrl;
@@ -85,23 +78,13 @@ export function authenticateRequest(args: LoaderFunctionArgs, opts: RootAuthLoad
     proxyUrl = relativeOrAbsoluteProxyUrl;
   }
 
-  const signInUrl =
-    opts.signInUrl || getEnvVariable('CLERK_SIGN_IN_URL') || (context?.CLERK_SIGN_IN_URL as string) || '';
+  const signInUrl = opts.signInUrl || getEnvVariable('CLERK_SIGN_IN_URL', context) || '';
 
-  const signUpUrl =
-    opts.signUpUrl || getEnvVariable('CLERK_SIGN_UP_URL') || (context?.CLERK_SIGN_UP_URL as string) || '';
+  const signUpUrl = opts.signUpUrl || getEnvVariable('CLERK_SIGN_UP_URL', context) || '';
 
-  const afterSignInUrl =
-    opts.afterSignInUrl ||
-    getEnvVariable('CLERK_AFTER_SIGN_IN_URL') ||
-    (context?.CLERK_AFTER_SIGN_IN_URL as string) ||
-    '';
+  const afterSignInUrl = opts.afterSignInUrl || getEnvVariable('CLERK_AFTER_SIGN_IN_URL', context) || '';
 
-  const afterSignUpUrl =
-    opts.afterSignUpUrl ||
-    getEnvVariable('CLERK_AFTER_SIGN_UP_URL') ||
-    (context?.CLERK_AFTER_SIGN_UP_URL as string) ||
-    '';
+  const afterSignUpUrl = opts.afterSignUpUrl || getEnvVariable('CLERK_AFTER_SIGN_UP_URL', context) || '';
 
   if (isSatellite && !proxyUrl && !domain) {
     throw new Error(satelliteAndMissingProxyUrlAndDomain);

packages/remix/src/ssr/getAuth.ts

@@ -18,7 +18,7 @@ export async function getAuth(args: LoaderFunctionArgs, opts?: GetAuthOptions):
   }
 
   if (requestState.isInterstitial) {
-    throw interstitialJsonResponse(requestState, { loader: 'nested' });
+    throw interstitialJsonResponse(requestState, { loader: 'nested' }, args.context);
   }
 
   return sanitizeAuthObject(requestState.toAuth());

packages/remix/src/ssr/rootAuthLoader.ts

@@ -53,12 +53,12 @@ export const rootAuthLoader: RootAuthLoader = async (
   }
 
   if (requestState.isInterstitial) {
-    throw interstitialJsonResponse(requestState, { loader: 'root' });
+    throw interstitialJsonResponse(requestState, { loader: 'root' }, args.context);
   }
 
   if (!handler) {
     // if the user did not provide a handler, simply inject requestState into an empty response
-    return injectRequestStateIntoResponse(new Response(JSON.stringify({})), requestState);
+    return injectRequestStateIntoResponse(new Response(JSON.stringify({})), requestState, args.context);
   }
 
   const handlerResult = await handler(injectAuthIntoRequest(args, sanitizeAuthObject(requestState.toAuth())));
@@ -72,7 +72,7 @@ export const rootAuthLoader: RootAuthLoader = async (
       }
       // clone and try to inject requestState into all json-like responses
       // if this fails, the user probably didn't return a json object or a valid json string
-      return injectRequestStateIntoResponse(handlerResult, requestState);
+      return injectRequestStateIntoResponse(handlerResult, requestState, args.context);
     } catch (e) {
       throw new Error(invalidRootLoaderCallbackReturn);
     }
@@ -81,5 +81,5 @@ export const rootAuthLoader: RootAuthLoader = async (
   // if the return value of the user's handler is null or a plain object, create an empty response to inject Clerk's state into
   const responseBody = JSON.stringify(handlerResult ?? {});
 
-  return injectRequestStateIntoResponse(new Response(responseBody), requestState);
+  return injectRequestStateIntoResponse(new Response(responseBody), requestState, args.context);
 };

packages/remix/src/ssr/utils.ts

@@ -1,5 +1,6 @@
 import type { AuthObject, RequestState } from '@clerk/backend';
 import { constants, debugRequestState, loadInterstitialFromLocal } from '@clerk/backend';
+import type { AppLoadContext } from '@remix-run/server-runtime';
 import { json } from '@remix-run/server-runtime';
 import cookie from 'cookie';
 
@@ -75,7 +76,11 @@ export const unknownResponse = (requestState: RequestState) => {
   return json(null, { status: 401, headers: observabilityHeadersFromRequestState(requestState) });
 };
 
-export const interstitialJsonResponse = (requestState: RequestState, opts: { loader: 'root' | 'nested' }) => {
+export const interstitialJsonResponse = (
+  requestState: RequestState,
+  opts: { loader: 'root' | 'nested' },
+  context: AppLoadContext,
+) => {
   return json(
     wrapWithClerkState({
       __loader: opts.loader,
@@ -85,8 +90,8 @@ export const interstitialJsonResponse = (requestState: RequestState, opts: { loa
         publishableKey: requestState.publishableKey,
         // TODO: This needs to be the version of clerk/remix not clerk/react
         // pkgVersion: LIB_VERSION,
-        clerkJSUrl: getEnvVariable('CLERK_JS'),
-        clerkJSVersion: getEnvVariable('CLERK_JS_VERSION'),
+        clerkJSUrl: getEnvVariable('CLERK_JS', context),
+        clerkJSVersion: getEnvVariable('CLERK_JS_VERSION', context),
         proxyUrl: requestState.proxyUrl,
         isSatellite: requestState.isSatellite,
         domain: requestState.domain,
@@ -97,7 +102,11 @@ export const interstitialJsonResponse = (requestState: RequestState, opts: { loa
   );
 };
 
-export const injectRequestStateIntoResponse = async (response: Response, requestState: RequestState) => {
+export const injectRequestStateIntoResponse = async (
+  response: Response,
+  requestState: RequestState,
+  context: AppLoadContext,
+) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { reason, message, isSignedIn, isInterstitial, ...rest } = requestState;
   const clone = response.clone();
@@ -114,8 +123,8 @@ export const injectRequestStateIntoResponse = async (response: Response, request
     __afterSignInUrl: requestState.afterSignInUrl,
     __afterSignUpUrl: requestState.afterSignUpUrl,
     __clerk_debug: debugRequestState(requestState),
-    __clerkJSUrl: getEnvVariable('CLERK_JS'),
-    __clerkJSVersion: getEnvVariable('CLERK_JS_VERSION'),
+    __clerkJSUrl: getEnvVariable('CLERK_JS', context),
+    __clerkJSVersion: getEnvVariable('CLERK_JS_VERSION', context),
   });
   // set the correct content-type header in case the user returned a `Response` directly
   // without setting the header, instead of using the `json()` helper

packages/remix/src/utils.ts

@@ -1,3 +1,5 @@
+import type { AppLoadContext } from '@remix-run/server-runtime';
+
 import type { ClerkState } from './client/types';
 import { invalidClerkStatePropError, noClerkStateError } from './errors';
 
@@ -29,16 +31,22 @@ export function assertValidClerkState(val: any): asserts val is ClerkState | und
  * @param name
  * @returns
  */
-export const getEnvVariable = (name: string): string => {
+export const getEnvVariable = (name: string, context: AppLoadContext | undefined): string => {
   // Node envs
   if (typeof process !== 'undefined') {
     return (process.env && process.env[name]) || '';
   }
 
+  // Cloudflare pages
+  if (typeof context !== 'undefined') {
+    const contextEnv = context?.env as Record<string, string>;
+
+    return contextEnv[name] || (context[name] as string) || '';
+  }
+
   // Cloudflare workers
   try {
-    // @ts-expect-error
-    return globalThis[name];
+    return globalThis[name as keyof typeof globalThis];
   } catch (_) {
     // This will raise an error in Cloudflare Pages
   }