如何将 Next-Auth 用于带有 axios 请求的登录表单而不是默认表单提交

Question

在我的用户登录案例中，我使用的是 Next-Auth，但是在我配置为自定义页面登录并通过方法 POST 提交表单登录请求并重新加载后提交时的页面。但我不想重新加载页面，我想在登录时使用 axios 请求将数据提交给 API 服务器。我该如何实施这种情况？

Answer 1

您可以放弃整个 form 部分并使用 NextAuth 的 signIn() 功能，而不是通过 <button type="submit"> 提交表单。

像这样：

import { getProviders, signIn } from "next-auth/react"

export default function SignIn({ providers }) {
  return (
    <>
      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button onClick={() => signIn(provider.id)}>
            Sign in with {provider.name}
          </button>
        </div>
      ))}
    </>
  )
}

参见：https://next-auth.js.org/configuration/pages#oauth-sign-in

如何将 Next-Auth 用于带有 axios 请求的登录表单而不是默认表单提交

How to use Next-Auth for login form with axios request instead of default Form submit

next.js

next-auth