Clerk fails to get the publishable key from the environment variables in Next.js 13

Question

I have a site I've built with Next 13 (experimental app directory) and have integrated authentication in my site with Clerk.

Everything works well on my local environment. When deployed to Netlify, it builds just fine, but if I try to visit the site it doesn't load, and in the console I see the following error:

@clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.
    at Object.throwMissingPublishableKeyError

I do have my publishable key in my environment variables in Netlify under NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY. I've also placed it under CLERK_PUBLISHABLE_KEY just in case.

Also, does it supposed to get scoped automatically by some clerk code? Because in my code I don't really use that variable anywhere and don't see the documentation telling me I need to.

score 2 · Answer 1 · answered Jun 15 '23 at 13:04

I had the same problem and to fix it i just went to the file with the declaration of ClerkProvider and added the publishable key.

function ContextProviders({ children, pageProps }) {
    return (
            <ClerkProvider {...pageProps} publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
              {children}
            </ClerkProvider>

    )
}

export default ContextProviders

score 0 · Answer 2 · answered Aug 15 '23 at 15:26

you should add clerk key and secret to your project secrets

https://github.com/{username}/{project}/settings/secrets/actions

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=********************
CLERK_SECRET_KEY=***************

in GitHub workflow you should load env vars required for the job

specifically when you do yarn run build add these variables with build step like this

      - run: yarn install && yarn run build
        env:
          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: "${{secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}}"
          CLERK_SECRET_KEY: "${{secrets.CLERK_SECRET_KEY}}"

Clerk fails to get the publishable key from the environment variables in Next.js 13

2 Answers2