secretKey not being detected in Remix + Cloudflare Pages

[arjunyel]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs
• I have searched for existing issues: https://github.com/clerk/javascript/issues
• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

https://github.com/arjunyel/clerk-remix-vite-issue

Publishable key

pk_test_c3BsZW5kaWQtcGVsaWNhbi05MS5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:

1. Create the file .dev.vars and add

   CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=

2. npm run dev and navigate to http://localhost:5173/

Expected behavior:

Loads page

Actual behavior:

Error: 🔒 Clerk: A secretKey or apiKey must be provided in order to use SSR and the exports from @clerk/remix/api.');
If your runtime supports environment variables, you can add a CLERK_SECRET_KEY or CLERK_API_KEY variable to your config.
Otherwise, you can pass a secretKey parameter to rootAuthLoader or getAuth.

Environment

System:
 OS: macOS 14.3.1
 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
 Memory: 1.67 GB / 32.00 GB
 Shell: 5.9 - /bin/zsh
 Binaries:
 Node: 20.11.0 - ~/Library/Caches/fnm_multishells/11357_1707512011668/bin/node
 Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/11357_1707512011668/bin/yarn
 npm: 10.2.4 - ~/Library/Caches/fnm_multishells/11357_1707512011668/bin/npm
 pnpm: 8.10.2 - ~/Library/Caches/fnm_multishells/11357_1707512011668/bin/pnpm
 bun: 1.0.18 - /usr/local/bin/bun
 Browsers:
 Safari: 17.3.1
 npmPackages:
 @clerk/remix: ^3.1.18 => 3.1.18 
 @cloudflare/workers-types: ^4.20240208.0 => 4.20240208.0 
 @remix-run/cloudflare: ^2.6.0 => 2.6.0 
 @remix-run/cloudflare-pages: ^2.6.0 => 2.6.0 
 @remix-run/dev: ^2.6.0 => 2.6.0 
 @remix-run/react: ^2.6.0 => 2.6.0 
 @types/react: ^18.2.55 => 18.2.55 
 @types/react-dom: ^18.2.19 => 18.2.19 
 @typescript-eslint/eslint-plugin: ^6.21.0 => 6.21.0 
 eslint: ^8.56.0 => 8.56.0 
 eslint-import-resolver-typescript: ^3.6.1 => 3.6.1 
 eslint-plugin-import: ^2.29.1 => 2.29.1 
 eslint-plugin-jsx-a11y: ^6.8.0 => 6.8.0 
 eslint-plugin-react: ^7.33.2 => 7.33.2 
 eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 
 isbot: ^4.4.0 => 4.4.0 
 miniflare: ^3.20240129.1 => 3.20240129.1 
 node-fetch: ^3.3.2 => 3.3.2 
 react: ^18.2.0 => 18.2.0 
 react-dom: ^18.2.0 => 18.2.0 
 typescript: ^5.3.3 => 5.3.3 
 vite: ^5.1.1 => 5.1.1 
 vite-tsconfig-paths: ^4.3.1 => 4.3.1 
 wrangler: ^3.28.1 => 3.28.1

[arjunyel]

As a work around I made a file env.server.tsx

export const clerkEnv = {
 publishableKey: "",
 secretKey: "",
};

And pass that in everywhere:

export const loader = (args: LoaderFunctionArgs) => {
 return rootAuthLoader(args, clerkEnv);
};

const { userId } = await getAuth(args, clerkEnv);

[MrAlex94]

I'm having this issue as well, and the fix above doesn't work for us. Anyone know of any potential alternatives? There's a dummy repo here: https://github.com/MrAlex94/remix-cf-debug

[arjunyel]

@MrAlex94 your code isn't working because you forgot to do the workaround for the root loader too

[MrAlex94]

Sorry, changes are live now. Still won't work unless a .env is defined (which works regardless of this workaround); which means when deploying end up with:

Error: 🔒 Clerk: A secretKey must be provided in order to use SSR and the exports from @clerk/remix/api.');
If your runtime supports environment variables, you can add a CLERK_SECRET_KEY variable to your config.
Otherwise, you can pass a secretKey parameter to rootAuthLoader or getAuth.

For more info, check out the docs: https://clerk.com/docs,
or come say hi in our discord server: https://clerk.com/discord


 at loadOptions (/Users/akontos/Workspace/remix-cf-debug/node_modules/@clerk/remix/dist/ssr/loadOptions.js:57:11)
 at Module.rootAuthLoader (/Users/akontos/Workspace/remix-cf-debug/node_modules/@clerk/remix/dist/ssr/rootAuthLoader.js:33:60)
 at loader (/Users/akontos/Workspace/remix-cf-debug/app/root.tsx:19:12)
 at Object.callRouteLoaderRR (/Users/akontos/Workspace/remix-cf-debug/node_modules/@remix-run/server-runtime/dist/data.js:52:22)
 at commonRoute.loader (/Users/akontos/Workspace/remix-cf-debug/node_modules/@remix-run/server-runtime/dist/routes.js:54:20)
 at runHandler (/Users/akontos/Workspace/remix-cf-debug/node_modules/@remix-run/router/dist/router.cjs.js:4082:26)
 at callLoaderOrAction (/Users/akontos/Workspace/remix-cf-debug/node_modules/@remix-run/router/dist/router.cjs.js:4138:22)
 at /Users/akontos/Workspace/remix-cf-debug/node_modules/@remix-run/router/dist/router.cjs.js:3610:68
 at Array.map (<anonymous>)
 at loadRouteData (/Users/akontos/Workspace/remix-cf-debug/node_modules/@remix-run/router/dist/router.cjs.js:3610:55)

[arjunyel]

@MrAlex94 just to confirm, you are filling out env.server.tsx with your variables right, not empty strings?

[MrAlex94]

@MrAlex94 just to confirm, you are filling out env.server.tsx with your variables right, not empty strings?

After deleting the build directory, yes it will start picking up the values.

Hardcoding values is rather uncomfortable though, so I made a change to env.server.tsx:

import { env } from 'node:process';

export const clerkEnv = {
 publishableKey: env.CLERK_PUBLISHABLE_KEY,
 secretKey: env.CLERK_SECRET_KEY,
};

And am using the nodejs_compat flag.

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.