如何解决生产中下一个身份验证的 api/auth/error 问题？

Question

我已经在 Vercel 中设置了环境变量：

NEXTAUTH_URL=https://example.vercel.app (production) 
NEXTAUTH_URL=http://localhost:3000 (development)

Google 提供商 GCP 控制台中的授权重定向 URL (https://console.cloud.google.com)：

https://example.vercel.app/api/auth/callback/google
http://localhost:3000/api/auth/callback/google

当我单击我的登录按钮时，它会重定向到此网址：https://example.vercel.app/api/auth/error 并显示“找不到此页面”。我还尝试为环境变量设置这些值：

NEXTAUTH_URL=https://example.vercel.app/api/auth 
NEXTAUTH_URL=https://example.vercel.app/api/auth/signin

但错误仍然存​​在。在开发中 (https://localhost:3000) 我能够成功登录，当我点击我的登录按钮时，它会将我重定向到这个 URL：

http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F

并显示：

我的身份验证 API (pages/api/auth/[...nextauth].js)：

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  session: {
    jwt: {
      signingKey: {
        kty: 'oct',
        kid: `${process.env.kid}`,
        alg: 'HS512',
        k: `${process.env.k}`,
      },
      secret: `${process.env.SECRET}`,
    },
  },
  debug: true,
  theme: 'dark',
})

如何解决这个问题？我错过了什么吗？

Answer 1

当库的文档使用 https://example.com 之类的东西而没有指出它实际上是一个示例时，我总是发现有些误导。幸运的是，这很容易解决！

1。 NEXTAUTH_URL 上的正确域

由于https://example.vercel.app 只是一个示例，因此您应该将其设置为您自己的应用程序域，而不是设置NEXTAUTH_URL。您可以从 Vercel 的 Overview 页面的 Domains 下获取您的应用程序域。在以下示例中，应用域将是 https://my-simple-app.vercel.app：

NEXTAUTH_URL=https://my-simple-app.vercel.app (production) 

2。在 GCP 控制台上正确域

应该在 GCP 控制台中执行相同的操作，而不是放置 https://example.vercel.app/api/auth/callback/google，而应该放置 您自己的应用程序域，在上面的示例中，应该是 https://my-simple-app.vercel.app/api/auth/callback/google：

应该这样做！

额外资源

如果您想了解更多信息，我可以推荐this article。它从头开始，它帮助我澄清了我需要什么才能使我的身份验证与 Vercel 部署一起工作。