nextjs - 将 MongoDBAdapter 添加到 next-auth 文件会导致 GoogleProvider 登录出错

Question

当我遇到此错误时，我正在关注有关使用 NextJS、next-auth 和 MongoDB 制作电子商务应用程序的 YouTube 教程。然后我在 Medium 上找到了一篇文章，讨论将 next-auth 和 MongoDB 添加到 NextJS 应用程序中，代码几乎是相同的。

我有一个非常基本的 NextJS 应用程序，安装了 next-auth、mongodb 和 @auth/mongodb-adapter。使用 Google 登录一直有效，直到我添加一行特定行来使用 MongoDBAdapter。然后我在终端中收到一堆错误，例如 MongoServerSelectionError、adapter_error_getuserbyaccount、oauth_callback_handler_error 等。另外，在用户界面上，一旦添加了这一行并且我尝试登录，用户界面就会显示来自 Google 的一个块，显示“尝试使用其他帐户登录”。

我已经验证了所有环境变量。这是代码：

pages/index.js

import { useSession, signIn, signOut } from "next-auth/react"

export default function Home() {
  const { data: session } = useSession()
  if (session) {
    return (
      <>
    
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>

      </>
    )
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn('google')}>Sign in</button>
    </>
  )
}

pages/_app.js

import "@/styles/globals.css";
import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

lib/mongodb.js

// This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb
import { MongoClient } from "mongodb";

if (!process.env.MONGODB_URI) {
  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"');
}

const uri = process.env.MONGODB_URI;
const options = {};

let client;
let clientPromise;

if (process.env.NODE_ENV === "development") {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options);
    global._mongoClientPromise = client.connect();
  }
  clientPromise = global._mongoClientPromise;
} else {
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options);
  clientPromise = client.connect();
}

// Export a module-scoped MongoClient promise. By doing this in a
// separate module, the client can be shared across functions.
export default clientPromise;

pages/api/auth/[...nextauth].js

import NextAuth from "next-auth";
import { MongoDBAdapter } from "@auth/mongodb-adapter";
import GoogleProvider from "next-auth/providers/google";
import clientPromise from '@/lib/mongodb';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  adapter: MongoDBAdapter(clientPromise),   ******THIS IS THE OFFENDING LINE******
});

如果没有违规行，即使导入了所有 MongoDB，登录也能正常进行。正是这一行添加将其搞砸了。教程和我的代码之间的不同之处在于导入：

import { MongoDBAdapter } from "@auth/mongodb-adapter";

教程里是这样的：

import { MongoDBAdapter } from "@next-auth/mongodb-adapter";

我尝试了各种方法在

@next-auth

而不是

@auth

导入适配器，但这些方法都引发了自己的错误。当然，next-auth 网站说要使用

@auth/mongodb-adapter

，所以这似乎是他们的改变。我不知道为什么这会导致错误，但谁知道呢。无论如何，我们将不胜感激。

Answer 1

import NextAuth from "next-auth";
import { MongoDBAdapter } from "@auth/mongodb-adapter";
import GoogleProvider from "next-auth/providers/google";
import clientPromise from '@/lib/mongodb';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  adapter: MongoDBAdapter(clientPromise),   ******THIS IS THE OFFENDING LINE******
  session: {
    strategy:"jwt",
  },
});

添加会话：{策略：“jwt”}似乎解决了我有关 MongoDBAdapter 的问题。