does not find env vars when deployed to cloudflare using nextjs connector

[NickCrews]

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

zipped repo attached below

Publishable key

pk_test_Zm9uZC1tYW50aXMtNTIuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

I think this is basically a nextjs version of this issue fro the remix connector.

Steps to reproduce:

1. unzip this repo (which I scaffolded from npm create cloudflare@latest -- my-next-app --framework=next per cloudflare's guide, and then followed clerk's nextjs instructions)
2. add the needed secret key, which I obfuscated.
3. run npm run preview which builds the nextjs app and then does some cloudflare magic to make the middleware functions run on cloudflare workers [if I understand correctly...]
4. open the localhost link.

Expected behavior:

Clerk will find the env vars I set in .env, and the login widget etc will work.

Actual behavior:

I get a 500 error because the secret key is not found. Clerk only looks within process.env for the needed env vars. But I am deploying to cloudflare workers, in which process.env is empty. To get this to work correctly, I instead of putting the env vars in .env, I need to put them in .dev.vars, which is cloudflare's version of this.

I think the solution is the same as in the linked issue above, where clerk looks through context.cloudflare.env instead. To really make this robust, if possible, really I think this logic for fetching env vars should get hoisted to some common util package where all the different framework connectors can use it, and so it will be solved for all of them.

Environment

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 10.16 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.5.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 9.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 17.6

[jontybrook]

I am also experiencing this with the nuxt module running on cloudflare pages, in praticular since migrating form vue-clerk to the new official @clerk/nuxt module.

[scottrblock]

The same thing seems to be happening with @clerk/tanstack-start. You can see the Stackblitz example on React Example: Start Clerk Basic throws

503 Server Unavailable
Error: @clerk/tanstack-start: Clerk: no secret key provided

I'm having issues on this stack deploying to cf pages specifically.

[wobsoriano]

@scottrblock we fixed reading of CF env vars in @clerk/tanstack-start here. The example you mentioned is using an outdated version of @clerk/tanstack-start