Error in the Github build check related to publishableKey and prerendering pages

[busta-design]

Describe the bug
I had an error in the Build, lint and type-check process. It says: @acme/nextjs:build: Error: @clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys. and @acme/nextjs:build: Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error (this error is for all the pages).

I already have a publishableKey and it is being used as a ClerkProvider prop, so I don't understand the issue.

To Reproduce
Steps to reproduce the behavior:

1. Create a PR
2. Look at the Build, lint and type-check process error.

Logs

Additional context
I tried to print the publishableKey in the console.log, and it was correctly printed.

[busta-design]

[jakewies]

I see this happening as well in my PR's CI. I'm trying to determine if this issue is resulting in failed Vercel builds (where the build just hangs).

[gtgaitoKu]

I am also having this issue, wondering if anyone has found any new information?

[Telos8840]

I came across this thread while troubleshooting the same issue. I'm not using this repo template, but I am running a similar CI/CD pipeline. What I did to fix this was the following:

Passed the publishableKey to the ClerkProvider

<ClerkProvider
  {...pageProps}
  publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
>

I moved the GitHub env vars into the build step instead. Based on the ci.yml in this repo, that would look like this:

- name: Build, lint and type-check
  run: pnpm turbo build lint type-check
  env:
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
    CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}

Lastly, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY need to be set as secrets inside your repository settings.

Hope this helps!

[humancodex]

I want to address some serious issues we are encountering in the production deployment of our solution based on Next.js, version "13.1.6". When attempting to access the page "/Admin", we encounter the following error:

Error occurred prerendering page "/Admin". Read more: https://nextjs.org/docs/messages/prerender-error
Error: @clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.

Error occurred prerendering page "/marketplace". Read more: https://nextjs.org/docs/messages/prerender-error
Error: @clerk/nextjs: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.

_app.js
<ClerkProvider {...pageProps} publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}> <Component {...pageProps} />
It's important to note that the Clerk publishable key is fetched from the environment variables. Specifically, it should be available as NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY.

The project structure :

We are deploying on vercel

Upon further analysis, we have identified that the error lies in the absence of a publishableKey required by Clerk for the proper functioning of our application. This key is essential for authenticating and authorizing requests with Clerk.

[mackzheng]

i use "@clerk/nextjs": "^5.1.4" and https://vercel.com/

step1：
if your project contain src/app your need put middleware.ts in /src/

step2：
.env.local you need config
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= your_PUBLISHABLE_KEY
CLERK_SECRET_KEY=your_SECRET_KEY
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

step3：
middleware.ts is like this:

import { clerkMiddleware,createRouteMatcher } from "@clerk/nextjs/server";
//const isDashboardRoute = createRouteMatcher(['/dashboard(.)']);
//const isAdminRoute = createRouteMatcher(['/admin(.)']);
const isPublicRoute = createRouteMatcher(['/','/sign-in(.)', '/sign-up(.)']);
//you need achieve clerkMiddleware interface in the middleware.d.ts file
/**

• Middleware for Next.js that handles authentication and authorization with Clerk.
• For more details, please refer to the docs: https://clerk.com/docs/references/nextjs/clerk-middleware
  interface ClerkMiddleware {
  /**
  • @example
  • export default clerkMiddleware((auth, request, event) => { ... }, options);
    /
    (handler: ClerkMiddlewareHandler, options?: ClerkMiddlewareOptions): NextMiddleware;
    /*
  • @example
  • export default clerkMiddleware(options);
    /
    (options?: ClerkMiddlewareOptions): NextMiddleware;
    /*
  • @example
  • export default clerkMiddleware;
    */
    (request: NextMiddlewareRequestParam, event: NextMiddlewareEvtParam): NextMiddlewareReturn;
    }
    */

export default clerkMiddleware((auth, request, event) => {
if(!isPublicRoute(request)){
auth().protect();
}
}, {
publishableKey : your_publishableKey
secretKey: your_secretKey
domain:"your_domain",
signInUrl:"https://your_domain/sign-in",
signUpUrl:"https://your_domain/sign-up",
afterSignInUrl:"https://your_domain/dashboard",
afterSignUpUrl:"https://your_domain/dashboard",
isSatellite: false,
});

export const config = {
matcher: ['/((?!.+\.[\w]+$|_next).)', '/', '/(api|trpc)(.)'],
};

[elias1991xNataly]

Hi, i had the same problem because I was doing it in next's and vercel and I tried with the publishable key inside the clerk provider and didn't work. But as soon as I put the environment variables inside the deployment section of Vercel deployment everything was solved. Maybe it was a rookie mistake of not knowing that. Hope It helps.

[nekonee]

Hi @elias1991xNataly can you tell me how did you reach those settings? I'm having some issue finding this particular page based just on your screenshot. Any help would be appreciated!

[haydenbleasel]

Hi folks, if you're trying to use a mock key as part of a build script (not prod), this is due to the key validation logic in Clerk, specifically isPublishableKey.

You can bypass this by following their requirements:

• hasValidPrefix - starts with pk_live_ or pk_test_
• hasValidFrontendApiPostfix - ends in a Base64 encoded ASCII string equivalent to $

So, just use the following publishable key: pk_test_JA==