Unable to use `@clerk/tanstack-start` w/ Cloudflare deployment or local development

[pdlug]

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

https://github.com/pdlug/tanstack-start-clerk

Publishable key

pk_test_bWFzc2l2ZS10ZXJtaXRlLTY1LmNsZXJrLmFjY291bnRzLmRldiQ

Description

I'm using Tanstack Start with the @clerk/tanstack-start package and trying to get it to work when deploying to Cloudflare. It works great running locally with the vinxi dev server but I cannot get it to pick up the publishable and secret keys when running locally with Cloudflare's wrangler CLI or in an actual deployment even though I have them set.

Steps to reproduce:

See this minimal repo that reproduces the issue: https://github.com/pdlug/tanstack-start-clerk

1. Created a new Tanstack Start project using the instructions
2. Added @clerk/tanstack-start with config updates specified in the docs
3. Run local development server, visit http://localhost:3000 and see that Clerk auth and components work as expected
4. Build and use wrangler pages dev to preview the app locally. Loading the app you'll get a 500 error with @clerk/tanstack-start: Clerk: no secret key provided in the console.

I've added the CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY to .dev.vars which is what wrangler uses to set environment variables running locally but that didn't work. I also set them as environment variables (secrets) in a Cloudflare deployment and deployed. I get the same error when running live in Cloudflare as I do locally.

It looks like I can pass the publishable and secret keys to createClerkHandler but I haven't figured out how to actually get those from the environment. Cloudflare exposes them on the context which is called when the handler runs so I'm thinking the issue may be that the code in @clerk/tanstack-start seems to rely on it being in import.meta.env at the time it's loaded.

Tanstack Start uses Vinxi with Nitro to abstract the webserver. My knowledge of both is rather limited.

Expected behavior:

Expected @clerk/tanstack-start to pick up the configured environment variables running in a Cloudflare deployment.

Actual behavior:

500 error with the console message:

✘ [ERROR] [nitro] [request error] [unhandled] @clerk/tanstack-start: Clerk: no secret key provided

Environment

System:
 OS: macOS 15.1
 CPU: (14) arm64 Apple M4 Pro
 Memory: 150.61 MB / 48.00 GB
 Shell: 5.9 - /bin/zsh
 Binaries:
 Node: 22.11.0 - ~/.asdf/installs/nodejs/22.11.0/bin/node
 npm: 10.9.0 - ~/.asdf/plugins/nodejs/shims/npm
 pnpm: 9.14.2 - ~/.asdf/installs/pnpm/9.14.2/bin/pnpm
 bun: 1.1.36 - ~/.bun/bin/bun
 Browsers:
 Chrome: 131.0.6778.86
 Safari: 18.1
 npmPackages:
 @clerk/tanstack-start: ^0.5.2 => 0.5.2
 @tanstack/react-router: ^1.82.2 => 1.82.2
 @tanstack/start: ^1.82.5 => 1.82.5
 @types/react: ^18.3.12 => 18.3.12
 @types/react-dom: ^18.3.1 => 18.3.1
 @vitejs/plugin-react: ^4.3.3 => 4.3.3
 prettier: ^3.3.3 => 3.3.3
 react: ^18.3.1 => 18.3.1
 react-dom: ^18.3.1 => 18.3.1
 typescript: ^5.6.3 => 5.6.3
 unenv: ^1.10.0 => 1.10.0
 vinxi: ^0.4.3 => 0.4.3
 wrangler: ^3.89.0 => 3.89.0

[wobsoriano]

I can confirm that the SDK is not able to read env vars in both CF deployment and local dev with wrangler. Thanks for reporting!

[labithiotis]

I'm also facing the same issue, I could make it work by hardcoding the clerk keys in ssr.tsx createClerkHandler options:

export default createClerkHandler(
 createStartHandler({
 createRouter,
 getRouterManifest,
 }),
 {
 secretKey: '__KEY__',
 publishableKey: '__KEY__,'
 },
)(defaultStreamHandler);

Currently there's no way to define these variables from request context though. Looking at source code, would a optimal solution be that if second param could accept a object or a function that returns LoaderOptions?
https://github.com/clerk/javascript/blob/main/packages/tanstack-start/src/server/middlewareHandler.ts#L23

If this an acceptable approach I could open a PR with something like:

function getOptions(clerkOptions: LoaderOptions | () => LoaderOptions) = {} ) {
 if(typeof clerkOptions === 'function' ) {
 return clerkOptions();
 } 
 
 return clerkOptions;
}

export function createClerkHandler<TRouter extends AnyRouter>(
 eventHandler: CustomizeStartHandler<TRouter>,
 clerkOptions: LoaderOptions | () => LoaderOptions = {},
) {
 return (cb: HandlerCallback<TRouter>): EventHandler => {
 return eventHandler(async ({ request, router, responseHeaders }) => {
 try {
 const loadedOptions = loadOptions(request, getOptions(clerkOptions));
 
 ...

Then we should be able to use getEvent in function to get env?

export default createClerkHandler(
 createStartHandler({
 createRouter,
 getRouterManifest,
 }),
 () => {
 const event = getEvent();
 
 return {
 secretKey: event.context.cloudflare.env.CLERK_SECRET_KEY,
 publishableKey: event.context.cloudflare.env.VITE_CLERK_PUBLISHABLE_KEY,
 };
 },
)(defaultStreamHandler);

[wobsoriano]

Hey folks - can anyone confirm if this PR fixes your issue? You can test it with this snapshot version:

npm i @clerk/tanstack-start@0.8.9-snapshot.v20250115000107 --save-exact

Turns out we have to manually get the Cloudflare env vars from the H3 Event context

[labithiotis]

@wobsoriano I can confirm it's working with that version, I no longer need to pass in keys for createClerkHandler and getAuth for dev and deployed apps.

Nice one 👍🏻

[wobsoriano]

@labithiotis awesome, thanks for testing!

The fix is now available in @clerk/tanstack-start@0.8.9 🫡

[github-actions]

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.