如何处理 NextAuth.js 中的登录失败错误？

Question

我使用 NextAuth.js 进行 Next.js 身份验证。登录工作正常，但页面仍然以错误的凭据重新加载。它没有显示任何错误。我需要处理错误以显示某种 toast 消息。

signIn("credentials", {
      ...values,
      redirect: false,
    })
      .then(async () => {
        await router.push("/dashboard");
      })
      .catch((e) => {
        toast("Credentials do not match!", { type: "error" });
      });

Answer 1

当传递redirect: false给它的选项时，signIn将返回一个Promise仅在电子邮件和凭据提供程序类型中解析为具有以下格式的对象。

{
    error: string | undefined // Error code based on the type of error
    status: number // HTTP status code
    ok: boolean // `true` if the signin was successful
    url: string | null // `null` if there was an error, otherwise URL to redirected to
}

您必须处理then块内的任何错误，因为它不会引发错误。

signIn("credentials", { ...values, redirect: false })
    .then(({ ok, error }) => {
        if (ok) {
            router.push("/dashboard");
        } else {
            console.log(error)
            toast("Credentials do not match!", { type: "error" });
        }
    })