如何在redirect设为false时捕获Next-Auth Email Provider客户端登录错误

默认情况下Next-Auth为了安全，不会把后端的详细错误直接返回给客户端，但可以通过以下两种方式实现需求：

方法1：自定义API路由捕获并返回错误 #

重写pages/api/auth/[...nextauth].js（App Router对应app/api/auth/[...nextauth]/route.js），在路由层面捕获错误，返回包含详细信息的自定义响应：

import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";

export default async function auth(req, res) {
  try {
    return await NextAuth(req, res, {
      providers: [
        EmailProvider({
          name: "Email",
          server: {
            host: "smtp.gmail.com",
            port: "587",
            auth: {
              user: "myusername",
              pass: "mypassword",
            },
          },
          from: "My App",
        }),
      ],
    });
  } catch (error) {
    // 过滤敏感信息，返回用户友好的错误
    const userFriendlyMessage = error.message.includes("credentials") 
      ? "SMTP认证失败，请检查配置" 
      : `登录失败: ${error.message}`;
    
    res.status(400).json({
      error: userFriendlyMessage,
      status: 400,
      ok: false,
      url: null,
    });
  }
}

方法2：自定义EmailProvider的发送逻辑并抛出错误 #

通过重写sendVerificationRequest方法捕获邮件发送错误，抛出包含详细信息的错误，让客户端能获取到：

import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";
import nodemailer from "nodemailer";

export default NextAuth({
  providers: [
    EmailProvider({
      name: "Email",
      server: {
        host: "smtp.gmail.com",
        port: "587",
        auth: {
          user: "myusername",
          pass: "mypassword",
        },
      },
      from: "My App",
      // 自定义验证邮件发送逻辑
      async sendVerificationRequest({ identifier: email, url, provider }) {
        const transport = nodemailer.createTransport(provider.server);
        try {
          await transport.sendMail({
            to: email,
            from: provider.from,
            subject: "登录验证链接",
            text: `点击链接完成登录: ${url}`,
            html: `<p>点击<a href="${url}">这里</a>登录你的账号</p>`,
          });
        } catch (error) {
          // 抛出带详细信息的错误，会被NextAuth传递到客户端
          throw new Error(`发送验证邮件失败: ${error.message}`);
        }
      },
    }),
  ],
  // 可选：开启debug模式开发时排查问题（生产环境关闭）
  // debug: process.env.NODE_ENV === "development",
});

客户端处理错误 #

修改你的登录逻辑，直接读取返回的response.error即可拿到详细信息：

const handleSignInClick = async () => {
  const { email } = formData;
  const response = await signIn("email", {
    redirect: false,
    email,
  });

  if (!response.ok) {
    // 这里可以拿到详细错误信息
    alert(response.error);
    // 或者更新UI展示错误
    setError(response.error);
  }
};

注意事项 #

• 生产环境务必过滤敏感错误信息（比如SMTP密码错误、服务器地址等），避免泄露后端配置。
• 不要在客户端暴露任何敏感数据，只返回用户能理解的友好提示。

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