clerk/javascript

secretKey not being detected in Remix + Cloudflare Pages

arjunyel opened this issue · 6 comments

arjunyel commented

Preliminary Checks

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 commented

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);
  • 👍1
MrAlex94 commented

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 commented

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

MrAlex94 commented

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 commented

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

MrAlex94 commented

@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.

  • 👍1