在Next App Router中使用Next-Auth REST API获取登录链接问题

问题分析 #

调用/api/auth/signin/email接口后返回{ url: 'http://localhost:3000/api/auth/signin?csrf=true' }，说明请求的CSRF验证未通过，服务器要求重新校验CSRF，因此未触发邮件发送逻辑。

解决方案 #

1. 使用Next-Auth内置signIn方法（推荐） #

直接调用Next-Auth提供的signIn方法，无需手动处理CSRF和Cookie，代码更简洁可靠：

import { signIn } from "next-auth/react";

export async function POST(request: Request) {
  const { email } = await request.json();

  const result = await signIn("email", {
    email,
    callbackUrl: process.env.NEXTAUTH_URL || "http://localhost:3000",
    redirect: false, // 禁止自动跳转，返回JSON结果
  });

  if (result.error) {
    return new Response(JSON.stringify({ error: result.error }), { status: 400 });
  }

  return new Response(JSON.stringify({ success: true }), { status: 200 });
}

2. 修正手动Fetch的请求参数 #

若必须手动调用API，需确保传递请求Cookie（CSRF Token与会话Cookie绑定），并校验参数配置：

export async function POST(request: Request) {
  const { email } = await request.json();
  // 获取当前请求的Cookie，传递给CSRF和登录请求
  const cookie = request.headers.get("cookie");

  // 获取CSRF Token
  const csrfRes = await fetch(`${process.env.NEXTAUTH_URL}/api/auth/csrf`, {
    headers: { cookie: cookie || "" },
  });
  const { csrfToken } = await csrfRes.json();

  // 发送登录链接请求
  const signInRes = await fetch(
    `${process.env.NEXTAUTH_URL}/api/auth/signin/email`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        cookie: cookie || "",
      },
      body: new URLSearchParams({
        email,
        csrfToken,
        callbackUrl: process.env.NEXTAUTH_URL || "http://localhost:3000",
        json: "true",
      }),
    },
  );

  const data = await signInRes.json();
  return new Response(JSON.stringify(data), { status: signInRes.status });
}

3. 检查Next-Auth配置项 #

• 确认process.env.NEXTAUTH_URL配置正确：本地环境为http://localhost:3000，生产环境填写实际域名
• 校验邮箱提供者配置：确保NEXTAUTH_EMAIL_SERVER（SMTP配置）、NEXTAUTH_EMAIL_FROM已正确设置，且sendVerificationRequest未被错误覆盖
• 确认pages.signIn未被自定义为不符合要求的页面，导致跳转异常

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