Clerk无法从Next.js 13中的环境变量获取可发布的密钥。

huangapple go评论57阅读模式
英文:

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

问题

我已经使用Next 13(实验性应用程序目录)构建了一个网站,并在我的网站中集成了Clerk的身份验证。在我的本地环境中,一切运行正常。但是当部署到Netlify时,虽然构建没有问题,但如果我尝试访问网站,它就无法加载,并且在控制台中我看到以下错误:

@clerk/nextjs:缺少publishableKey。您可以在https://dashboard.clerk.com/last-active?path=api-keys获取您的密钥。
在Netlify的环境变量中,我确实有我的publishable密钥,位于NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY下。我还将它放在CLERK_PUBLISHABLE_KEY下,以防万一。

此外,它是否应该自动由某些clerk代码自动限定范围?因为在我的代码中,我实际上没有在任何地方使用该变量,也没有看到文档告诉我需要使用它。

英文:

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.

答案1

得分: 2

我有同样的问题,为了解决它,我只需进入包含ClerkProvider声明的文件,然后添加可发布的密钥。

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

export default ContextProviders
英文:

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function ContextProviders({ children, pageProps }) {
	return (
			&lt;ClerkProvider {...pageProps} publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}&gt;
			  {children}
			&lt;/ClerkProvider&gt;

	)
}

export default ContextProviders

<!-- end snippet -->

答案2

得分: 0

  1. 你应该将 clerk 的密钥和秘钥添加到你的项目机密中。

  2. 在 GitHub 工作流中,你应该加载作业所需的环境变量,特别是当你执行 yarn run build 时,像这样在构建步骤中添加这些变量:

      - 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}}"
英文:
  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 &amp;&amp; yarn run build
        env:
          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: &quot;${{secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}}&quot;
          CLERK_SECRET_KEY: &quot;${{secrets.CLERK_SECRET_KEY}}&quot;

huangapple
  • 本文由 发表于 2023年5月14日 23:53:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76248386.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定