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]

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.

We fixed reading of CF env vars in @clerk/tanstack-start #4743. The example you mentioned is using an outdated version of @clerk/tanstack-start. Can you try it again with the latest one? Thanks!

[wobsoriano]

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.

Hi, @jontybrook I believe it should work as Nuxt/Nitro has a way of handling runtime variables. I have a demo app deployed to CF pages via NuxtHub here that uses @clerk/nuxt and the env vars are working as expected. Do you have your NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY and NUXT_CLERK_SECRET_KEY set?

[wobsoriano]

Hi @NickCrews, thank you for reporting this! I unzipped your repo and can confirm that for local development with wrangler, you're on the right track using .dev.vars!

Upon investigation, I found that Cloudflare's next-on-pages tool doesn't currently inject environment variables into the runtime context like other frameworks' adapters do (such as Nuxt, Remix, React Router, or TanStack Start). In those frameworks, we're able to read from .env files because they provide access to the runtime context, but this isn't currently possible with the next-on-pages adapter. For now, the most reliable way to handle env variables in your local dev environment is to use .dev.vars.

Some examples on how other frameworks has access to context:

• Remix
• TanStack Start and Nuxt via Nitro

We understand this might not be the most convenient setup, and we'll monitor any improvements in the next-on-pages adapter.