Next.js App Router中NextAuth凭证认证执行失败排查

AI 小北

2026-7-17

解决NextAuth自定义登录页面authorize函数不执行的问题

核心排查点1：日志输出位置错误

authorize函数运行在服务器端，里面的console.log会输出到终端的服务器日志中，而非浏览器开发者工具的前端控制台。你之前看不到日志，大概率是查看了错误的控制台位置，去启动项目的终端里找服务器输出即可。

核心问题：CSRF令牌未传递

NextAuth默认启用CSRF保护，自定义登录页面提交credentials请求时必须携带CSRF令牌，否则请求会被拦截，根本无法进入authorize函数。

修复步骤

在登录页面组件中获取CSRF令牌，并在signIn调用中传入：

// 在/app/login组件中
import { signIn, getCsrfToken } from "next-auth/react"
import { useRouter } from "next/navigation"

// ... 其他代码
const router = useRouter()

const submitData: SubmitHandler<FormSchema> = async (data: FormSchema) => {
  console.log("Input data:", data)
  // 获取CSRF令牌
  const csrfToken = await getCsrfToken()
  
  const res = await signIn("credentials", {
    redirect: false,
    callbackUrl: "/",
    csrfToken, // 必须添加该参数
    ...data,
  })
  
  console.log("response: ", res)
  if (!res?.error) {
    router.push("/")
  } else {
    console.log("Errors: ", res.error)
  }
};

其他可能的排查方向

表单字段名匹配：确保前端提交的data字段名和CredentialsProvider中定义的credentials完全一致（比如你定义的是username和password，前端表单的name属性也要对应）。
NextAuth路由配置：确认/app/api/auth/[...nextauth]/route.ts的写法符合App Router要求，且依赖的next-auth版本为v4及以上。
错误处理验证：解决CSRF问题后，如果authorize函数返回null或抛出错误，NextAuth会将对应error字段返回给前端，此时你能在前端控制台看到错误信息。