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

问题描述

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

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

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

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',
})

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

标签： next.jsnext-auth

解决方案

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

1.正确的域名`NEXTAUTH_URL`

因为https://example.vercel.app实际上是一个例子，而不是设置NEXTAUTH_URL它，你应该将它设置为你自己的应用程序域。您可以从Vercel的概述页面中的Domains下获取您的应用程序域。在以下示例中，应用程序域将是https://my-simple-app.vercel.app：

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

2. 在 GCP 控制台上正确的域

在 GCP 控制台中也应该这样做，而不是 put https://example.vercel.app/api/auth/callback/google，您应该放置自己的应用程序域，在上面的示例中，应该是https://my-simple-app.vercel.app/api/auth/callback/google：

应该这样做！

额外资源

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