Next-Auth 自定义登录表单点击登录后未跳转verifyRequest页面问题

问题根因 #

你的代码同时触发了两套登录逻辑：原生表单的POST提交动作、NextAuth客户端signIn方法调用，两者的跳转逻辑冲突导致verifyRequest页面跳转被打断，邮件能正常发送是因为登录请求确实成功发出了，只有跳转逻辑被覆盖失效。

修复方案（二选一即可） #

方案1：使用客户端signIn逻辑（推荐，可自定义交互） #

移除表单原生提交属性，把登录逻辑绑定到表单提交事件，避免冲突：

// 删掉form上的method、action属性，添加onSubmit阻止默认提交
<form onSubmit={(e) => {
  e.preventDefault()
  signIn("email", { email, callbackUrl, redirect: true })
}}>
  <input type="hidden" name="remember" defaultValue="true" />
  <div className="rounded-md shadow-sm -space-y-px">
    <div>
      <label htmlFor="email" className="sr-only">
        Email
      </label>
      <input
        id="email"
        onChange={(e)=>{setEmail(e.target.value)}}
        name="email"
        type="email"
        autoComplete="email"
        required
        placeholder="Email"
      />
    </div>
  </div>

  <div>
    {/* 删掉button上的onClick事件，保留type="submit"即可 */}
    <button type="submit">
      <span>
        <HiLockClosed />
      </span>
      Login
    </button>
  </div>
</form>

显式传入redirect: true参数可确保跳转逻辑正常触发。

方案2：使用原生表单提交逻辑 #

完全移除客户端signIn调用，依赖NextAuth服务端逻辑自动处理跳转：

<form method="POST" action="/api/auth/signin/email">
  <input type="hidden" name="remember" defaultValue="true" />
  {/* 新增callbackUrl隐藏字段，服务端提交需要传这个参数 */}
  <input type="hidden" name="callbackUrl" value={callbackUrl} />
  <div className="rounded-md shadow-sm -space-y-px">
    <div>
      <label htmlFor="email" className="sr-only">
        Email
      </label>
      <input
        id="email"
        name="email"
        type="email"
        autoComplete="email"
        required
        placeholder="Email"
      />
    </div>
  </div>

  <div>
    {/* 删掉button上的onClick事件 */}
    <button type="submit">
      <span>
        <HiLockClosed />
      </span>
      Login
    </button>
  </div>
</form>

这种方式不需要维护本地email状态，表单会自动把参数提交给NextAuth接口，跳转逻辑由NextAuth默认处理。

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