The clerk encountered difficulty retrieving the publishable key from the environment variables within Next.js version 13

Question

The clerk encountered difficulty retrieving the publishable key from the environment variables within Next.js version 13

I recently developed a website using Next 13 (an experimental app directory) and integrated authentication with Clerk.

While everything runs smoothly on my local environment, once deployed to Netlify, the site fails to load. Upon checking the console, I encountered the following error:

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

The publishable key is already added to my environment variables in Netlify under

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

. Just to be safe, I also included it under CLERK_PUBLISHABLE_KEY.

Moreover, should the key be automatically received by some clerk code? Because I haven't utilized that variable in my code and the documentation doesn't mention its necessity.

next.js environment-variables netlify clerk

Answer 1

Answer №1

Facing a similar issue, I found the solution by simply updating the ClerkProvider declaration file with the necessary publishable key.

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

    )
}

export default UpdateProviders

Answer 2

Facing a similar issue, I found the solution by simply updating the ClerkProvider declaration file with the necessary publishable key.

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

    )
}

export default UpdateProviders

Answer 3

Answer №2

It is important to include the clerk key and secret in your project secrets for security purposes

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

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

When setting up GitHub workflow, make sure to load the environment variables required for the job

Especially when running yarn run build, ensure that you add these variables to the 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}}"

Answer 4

It is important to include the clerk key and secret in your project secrets for security purposes

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

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

When setting up GitHub workflow, make sure to load the environment variables required for the job

Especially when running yarn run build, ensure that you add these variables to the 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}}"

Answer 5

Answer №3

Visit the page where the ClerkProvider is declared and insert the publishable key within the appropriate tag

To modify the RootLayout function with your publishable key, follow this code snippet:

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

Answer 6

Visit the page where the ClerkProvider is declared and insert the publishable key within the appropriate tag

To modify the RootLayout function with your publishable key, follow this code snippet:

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

Answer 7

Answer №4

Resolved the issue by relocating .env.local to the main folder of the project.

Answer 8

Resolved the issue by relocating .env.local to the main folder of the project.

The clerk encountered difficulty retrieving the publishable key from the environment variables within Next.js version 13

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide on Implementing Link href in Next.js v12

Is it necessary for me to utilize Parallel Routes in Nextjs 13?

tips for accessing the useState value once it has been initialized

What is the best way to retrieve data in my client component without risking exposing my API key to unauthorized users?

FixedSizeGrid does not activate the loadMoreItems function within the InfiniteLoader component in react-window

What is causing the ESLint error when trying to use an async function that returns a Promise?

What are some ways to leverage props in React to avoid unnecessary duplication?

"Encountered an error of 'Authentication failed' while trying to access a blob using the SAS

React and Next.js issues with "Window is not defined" errors

Utilizing URL-based conditions in Reactjs

What is the process for obtaining a client-side cookie using next.js?

What steps should I take to ensure my API secret remains secure during my next.js deployment?

Develop an integration of NextJS with .Net Core framework

The true nature of Next.js Server action is revealed - it actually returns a promise instead

Troubleshooting: Next.js 13 custom 404 page not functioning as expected

Is there a way to end my session in nextAuth on NextJS 14?

Develop a higher-order authentication component for securing routes in Next.js

Unable to authenticate the initial certificate with Node

Tips for avoid having the router.asPath useEffect triggered twice on initial load in a NextJs application when using getServerSideProps

What happens if ChainId is not defined in the OpenSea 2.0 clone created with Next.js, Replit, thirdweb, and tailwind CSS?