NextAuth 5.0.0-beta.18凭证登录出现MissingCSRF错误求助

问题场景 #

使用next-auth: ^5.0.0-beta.18搭建项目时：

• 首页调用signIn()会重定向到自定义登录页，但登录页提交表单触发signIn("credentials", formData)时抛出MissingCSRF: CSRF token was missing during an action signin错误
• 直接访问登录页时功能正常

核心原因 #

通过服务器action调用signIn()重定向到登录页时，请求上下文未正确携带NextAuth所需的CSRF会话关联信息，导致登录页表单提交时缺少有效的CSRF token；而直接访问登录页时，页面加载过程会自动生成并关联CSRF token到会话，因此提交正常。

解决方案 #

方案1：登录页表单添加CSRF隐藏字段 #

修改./app/login/page.tsx，通过auth()获取当前会话的CSRF token，并在表单中添加隐藏字段传递该token：

import { auth, signIn } from "@/auth";

export default async function LoginPage() {
  const authSession = await auth();
  const csrfToken = authSession?.csrfToken;

  return (
    <form
      action={async (formData) => {
        "use server";
        await signIn("credentials", formData);
      }}
    >
      {/* 注入CSRF token隐藏字段 */}
      <input type="hidden" name="csrfToken" value={csrfToken} />
      <label>
        Email
        <input name="email" type="email" />
      </label>
      <label>
        Password
        <input name="password" type="password" />
      </label>
      <button type="submit">Sign In</button>
    </form>
  );
}

方案2：首页改用客户端触发登录跳转 #

将首页的服务器action改为客户端组件调用signIn()，确保跳转时携带正确的会话上下文：

"use client";
import { signIn } from "@/auth";

export default function Home() {
  return (
    <button onClick={() => signIn()}>Sign in</button>
  );
}

验证说明 #

两种方案都能确保登录页提交表单时，CSRF token被正确传递给NextAuth的认证流程，解决MissingCSRF错误。优先推荐方案2，更符合NextAuth v5的客户端跳转设计逻辑。

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