如何在next-auth@beta最新版本中无刷新显示自定义错误消息

修改Credentials认证提供者配置 #

在NextAuth.js Beta（v5）版本中，直接抛出普通Error无法将自定义错误消息传递到客户端，需要使用框架内置的CredentialsSignin错误类来抛出验证失败信息：

首先导入该错误类：

import { CredentialsSignin } from "next-auth";

然后修改authorize函数逻辑：

Credentials({
  credentials: {
    email: {},
    password: {},
  },
  authorize: async (credentials) => {
    // 替换为你的实际验证逻辑
    if (someLogic) {
      // 抛出携带自定义消息的CredentialsSignin错误
      throw new CredentialsSignin("User not found.");
    }

    // 验证通过后返回用户对象
    return { id: "1", email: credentials.email };
  },
}),

客户端处理错误消息 #

调用signIn时保持redirect: false配置，此时返回的结果对象会包含error字段，直接读取该字段即可在当前页面展示自定义错误：

const res = await signIn("credentials", {
  email,
  password: pass,
  redirect: false,
});

if (res.error) {
  // 将错误消息赋值给状态变量，用于页面渲染展示
  setErrorMessage(res.error);
  // 也可直接打印或做其他处理
  console.error("登录失败:", res.error);
}

额外说明 #

• 若不使用内置错误类，仅在authorize中返回null，则无法传递自定义错误消息，因此推荐使用CredentialsSignin来携带具体提示内容。
• 必须确保redirect: false配置正确，否则页面会自动跳转，无法在当前页面处理并展示错误。

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