A secretKey or apiKey must be provided error in Cloudflare Workers + Remix

[aerojeyenth]

• Review the documentation: https://clerk.com/docs
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• Provide the Frontend API key from your application dashboard.

Package + Version

• @clerk/remix version 2.9.0

Dependencies + versions

{  
  "dependencies": {
    "@clerk/remix": "^2.9.0",
    "@cloudflare/kv-asset-handler": "^0.1.3",
    "@remix-run/cloudflare": "^1.19.1",
    "@remix-run/css-bundle": "^1.19.1",
    "@remix-run/react": "^1.19.1",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^3.19.0",
    "@remix-run/dev": "^1.19.1",
    "@remix-run/eslint-config": "^1.19.1",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "eslint": "^8.38.0",
    "typescript": "^5.0.4",
    "wrangler": "^3.1.1"
  },
}

Browser/OS

If applicable e.g. Chrome latest, Node 18 LTS , Cloudflare worker wrangler 3.4.0

Description

I followed the official documentation and set up the project and ran it locally.

I set up the ENV values CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY in line with the Cloudflare Wrangler documentation in .dev.vars file in the root.

Wrangler successfully set up the ENV values as per the following message:

But I get the following error message from @clerk A secretKey or apiKey must be provided error

Please kindly help me if I am missing something.

Thank you.

[Ehesp]

In your root.tsx, you can do:

export const loader = async (args: LoaderArgs) => {
  return rootAuthLoader(args, () => {
    return {};
  }, {
    secretKey: args.context.CLERK_SECRET_KEY,
    publishableKey: args.context.CLERK_PUBLISHABLE_KEY,
  });
};

Although, I don't do this and it works fine for me.

[jescalan]

Thank you @Ehesp, @aerojeyenth - does this resolve your issue?

[aerojeyenth]

Thanks @Ehesp

It worked only after adding the following in the _index.tsx and to be passed to the getAuth() as second param

export const loader: LoaderFunction = async ({ request, context, params }) => {
  const { userId } = await getAuth(
    { request, context, params },
    {
      secretKey: context.env)["CLERK_SECRET_KEY"]
    }
  );
  if (!userId) {
    return redirect("/sign-in");
  }

  return { result };
};

[aerojeyenth]

@jescalan With both the fixes(#1540 (comment) and #1540 (comment)) it works !!!

[jescalan]

Amazing! So glad this was worked out. Will close out - please let us know if there's anything else we can do to make your Clerk experience better 💖

[Steravy]

I am facing the same problem while deploying my next app to a VPS and using git hub actions. And for some reason the secret key is not loaded and i have this error.
Tried to use those solutions but i cant find where to import some of the utils and types used in the code provided. A lit help please...

[jescalan]

@Steravy I'd recommend opening a new issue or reaching out to our support team with a minimal reproduction!