如何修复生产中next-auth的API/auth/error问题?

rt4zxlrg  于 2023-02-12  发布在  其他
关注(0)|答案(5)|浏览(300)

我已经在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

当我单击“登录”按钮时,它将重定向到此URL: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',
})

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

xtupzzrd

xtupzzrd1#

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

1. NEXTAUTH_URL上的域正确

由于https://example.vercel.app仅为一个示例,因此您不应将NEXTAUTH_URL设置为该示例,而应将其设置为 * 您自己的应用程序域 *。您可以从Vercel中的概述页面的下获取应用程序域。在以下示例中,应用程序域为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,而应该输入 * your own app domain *,在上面的例子中,应该是https://my-simple-app.vercel.app/api/auth/callback/google

应该够了!

额外资源

如果您想要进一步的信息,我可以推荐this article。它从头开始,它帮助我很大程度上澄清了我需要什么才能让我的身份验证与Vercel部署一起工作。

carvr3hs

carvr3hs2#

import NextAuth from "next-auth"
import RedditProvider from "next-auth/providers/reddit"
import GoogleProvider from "next-auth/providers/google";
    
export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    RedditProvider({
      clientId: process.env.REDDIT_CLIENT_ID,
      clientSecret: process.env.REDDIT_CLIENT_SECRET
    }),
    // ...add more providers here
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    })
  ],
  secret: 'IamVeryHandsome' 
})

它对我起作用了,这是一个秘密:'anystring'**. thanks我用"下一个":"12.1.6"、"下一个授权":"^4.5.0",

    • 感谢**
hec6srdp

hec6srdp3#

添加一个名为NEXTAUTH_SECRET的环境变量,该变量带有一个随机值,例如:
下一个秘密= atr 5-gt 65 - 9喷气机
虽然Next Auth在本地主机上运行良好,但它需要该Secret才能在生产环境中运行。
[下一个秘密][1] [1]:https://i.stack.imgur.com/64eVM.png

hkmswyz6

hkmswyz64#

如果在环境变量中分配NEXTAUTH_URL后仍然出现此错误,请尝试将包含任何字符串值的密钥添加到[...nextauth].js文件中的providers array...

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  // ******** !!!! ADD BELOW LINE !!!! **********
  secret: "PLACE-HERE-ANY-STRING",
});
js4nwp54

js4nwp545#

像这样定义一个秘密:
1.将SECRET="MY_STRONG_SECRET"添加到.env文件中。
1.用https://generate-secret.vercel.app/32之类的工具生成的强密钥替换MY_STRONG_SECRET
1.添加密码:process.env.SECRET,与pages/api/auth/[...nextauth].js的提供程序数组处于同一级别。

相关问题