Login/Register
Clerk fails to get the publishable key from the environment variables in Next.js 13
Asked Answered
next.jsenvironment-variablesnetlifyclerk
F

6

10

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.

Fictitious answered 14/5, 2023 at 15:53 Comment(1)
Same Issue with me Is anybody know how to fixed this issue ? – Grit
C
4

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
Cordy answered 15/6, 2023 at 13:4 Comment(0)
M
1

Solved it by moving .env.local to the root directory of the project.

Margarettmargaretta answered 25/3, 2024 at 22:32 Comment(0)
C
0
  1. 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=***************
  1. 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}}"
Crean answered 15/8, 2023 at 15:26 Comment(0)
E
0

just go to the page where the ClerkProvider is declared and just add the publishable key in the tag

export default function RootLayout( { children }: { children : React.ReactNode}) { return ( <ClerkProvider publishableKey={'YOU PUBLISHABLE KEY'}> <body className={${inter.className} bg-dark-1}> {children} ) }

Ephah answered 4/1, 2024 at 6:37 Comment(0)
S
0

My issue got revolved when i moved the .env.local file and the middleware file to the top of the scope( root )

Remember to not include your file in App or src folder

Sovran answered 29/6, 2024 at 15:25 Comment(0)
M
0

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=Your_PUBLIC_CLERK_PUBLISHABLE_KEY,

CLERK_PUBLISHABLE_KEY=Your_PUBLIC_CLERK_PUBLISHABLE_KEY,

CLERK_SECRET_KEY=Your_CLERK_SECRET_KEY

Manado answered 4/8, 2024 at 14:3 Comment(2)
Is this meant to be an insightful answer according to How to Answer? I think it is iquite off that mark. – Encaenia
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Winker

© 2022 - 2025 — McMap. All rights reserved.