fix(remix): Updated all uses of getEnvVariable to use the Remix context

packages/remix/src/ssr/authenticateRequest.ts

@@ -30,7 +30,7 @@ export function authenticateRequest(args: LoaderFunctionArgs, opts: RootAuthLoad
   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.');
@@ -43,7 +43,7 @@ export function authenticateRequest(args: LoaderFunctionArgs, opts: RootAuthLoad
 
   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.');

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

@@ -31,14 +31,14 @@ export function assertValidClerkState(val: any): asserts val is ClerkState | und
  * @param name
  * @returns
  */
-export const getEnvVariable = (name: string, context?: AppLoadContext): 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 (context) {
+  if (typeof context !== 'undefined') {
     const contextEnv = context?.env as Record<string, string>;
 
     return contextEnv[name] || (context[name] as string) || '';