如何在Next.js+NextAuth+Prisma+MongoDB中处理OAuthAccountNotLinked错误？

首先纠正你代码里的核心问题：当调用signIn时设置redirect: false，它不会抛出错误，而是返回一个包含error字段的对象，所以你的.catch()块根本不会触发，这就是你看不到错误处理效果的原因。

接下来是具体的实现步骤：

1. 正确捕获错误状态 #

修改你的登录函数，直接判断返回结果中的error字段，而不是依赖catch：

import { signIn } from "next-auth/react";
import { useState } from "react";

// 用useState控制错误提示显示
const [loginError, setLoginError] = useState("");

const handleGithubLogin = async () => {
  setLoginError(""); // 清空之前的错误
  const res = await signIn("github", { redirect: false });
  
  if (res.error) {
    // 捕获到认证错误
    if (res.error === "OAuthAccountNotLinked") {
      setLoginError("该GitHub账号未关联现有邮箱账号，请先使用邮箱登录后，在账号设置中绑定GitHub账号。");
    } else {
      setLoginError(`登录失败：${res.error}`);
    }
  } else if (res.ok) {
    // 登录成功，跳转到首页或目标页面
    window.location.href = "/";
  }
};

2. 显示自定义提示 #

方式一：直接渲染文本提示 #

在组件中根据loginError状态渲染提示：

{loginError && (
  <div style={{ color: "red", marginTop: "10px", padding: "8px", border: "1px solid #ffcccc", borderRadius: "4px" }}>
    {loginError}
  </div>
)}

方式二：用Toast通知（推荐） #

如果想用更友好的Toast提示，可以用react-hot-toast这类库：

1. 先安装依赖：

npm install react-hot-toast

2. 在_app.js中配置Toast提供者：

import { Toaster } from "react-hot-toast";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Toaster position="top-right" duration={3000} />
    </>
  );
}

3. 修改登录函数使用Toast：

import toast from "react-hot-toast";

const handleGithubLogin = async () => {
  const res = await signIn("github", { redirect: false });
  
  if (res.error) {
    if (res.error === "OAuthAccountNotLinked") {
      toast.error("该GitHub账号未关联现有邮箱账号，请先使用邮箱登录后，在账号设置中绑定GitHub账号。");
    } else {
      toast.error(`登录失败：${res.error}`);
    }
  } else if (res.ok) {
    toast.success("登录成功！");
    setTimeout(() => window.location.href = "/", 1500);
  }
};

3. 补充：账号绑定逻辑 #

为了让用户能关联第三方账号，你需要在应用中添加"账号设置"页面，调用NextAuth的关联逻辑：

import { signIn } from "next-auth/react";

const handleLinkGithub = async () => {
  // 已登录状态下，调用signIn关联第三方账号
  await signIn("github", { 
    redirect: false,
    callbackUrl: "/account-settings"
  });
};

用户登录后点击绑定按钮，即可将GitHub账号与现有邮箱账号关联，之后就能用GitHub直接登录了。

内容的提问来源于stack exchange，提问作者blaize