如何在客户端通过Auth.js显示自定义API错误信息？

1. 调整auth.ts中的authorize函数 #

不要直接抛出错误，而是返回包含错误信息的对象，避免NextAuth将错误包装为通用的AccessDenied：

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
        credentials: {
          email: {},
          password: {},
        },
        authorize: async (credentials) => {
          let data = {
            email: credentials.email as string,
            password: credentials.password as string,
          }
  
          try {
            const user = await AuthService.login(data);
            return user;
          } catch(error: any) {
            // 返回包含错误信息的对象，而非直接抛出
            return { error: error?.message || '登录失败' };
          }
        },
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user = token.user as any;
      return session;
    },
    async jwt({ token, user }) {
      if (user) {
        // 仅在无错误时存储用户信息
        if (!('error' in user)) {
          token.user = user;
        }
      }
      return token;
    },
    async signIn({ user }) {
      const userData = user as any;
      if (userData?.error) {
        // 抛出原始错误信息，供客户端捕获
        throw new Error(userData.error);
      }
      return true;
    },
  },
})

2. 修改客户端登录提交函数，捕获真实错误 #

signIn是异步函数，需用await配合try/catch捕获错误，从中提取真实消息：

const onSubmit = async (values: FormData) => {
    const data = {
        email: values.email,
        password: values.password,
        redirect: false
    }

    try {
        await signIn("credentials", data);
        // 登录成功后的逻辑（如页面跳转）
    } catch (error: any) {
        // 此处可获取API返回的真实错误信息，例如"Username/Password Incorrect"
        console.error('登录失败:', error.message);
        // 将error.message展示给用户即可
    }
};

原理说明 #

• authorize返回带error的对象后，signIn回调会检测到并抛出原始错误信息
• 客户端通过await signIn并捕获错误，就能拿到API返回的真实消息，而非NextAuth包装后的通用错误

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