自定义登录页下Next-Auth Email Provider触发失败求助

• 检查CSRF Token字段是否正确渲染
  自定义登录表单必须包含隐藏的CSRF Token字段，确保你在客户端组件中通过getCsrfToken()获取值并填入：

  'use client'
  import { getCsrfToken } from 'next-auth/react'
  
  export default async function LoginPage() {
    const csrfToken = await getCsrfToken()
    return (
      <form action="/api/auth/signin/email" method="POST">
        <input type="hidden" name="csrfToken" value={csrfToken} />
        <input type="email" name="email" placeholder="邮箱" required />
        <input type="hidden" name="callbackUrl" value="/" />
        <button type="submit">发送验证邮件</button>
      </form>
    )
  }
  

  打开浏览器开发者工具查看页面源码，确认这个隐藏input的value不为空。如果为空，说明getCsrfToken()没有正确获取到值。

• 确认登录页组件为客户端组件
  getCsrfToken()只能在客户端组件中调用，必须在组件顶部添加'use client'指令。如果是服务器组件，无法获取CSRF Token，导致字段为空。

• 核对表单提交路径与参数
  表单的action必须指向/api/auth/signin/email（指定email provider），或者如果是通用登录页，确保表单中包含name="provider" value="email"的隐藏字段，让Next-Auth明确使用邮箱验证流程。同时确认method="POST"，不能用GET。

• 检查NEXTAUTH_URL配置
  .env.local中的NEXTAUTH_URL必须与当前运行环境的地址完全一致，比如开发环境为http://localhost:3000，生产环境为你的正式域名。该配置错误会导致CSRF Token生成时域名不匹配，无法写入Cookie或验证失败。

• 验证Next-Auth配置文件中的Email Provider
  确保[...nextauth].js/ts的providers数组中正确配置了EmailProvider，且SendGrid相关参数无误：

  import EmailProvider from 'next-auth/providers/email'
  
  export default NextAuth({
    providers: [
      EmailProvider({
        server: `smtp://apikey:${process.env.SENDGRID_API_KEY}@smtp.sendgrid.net:587`,
        from: process.env.EMAIL_FROM, // 格式如"Your App <no-reply@yourapp.com>"
      }),
      // Google Provider...
    ],
    // 其他配置...
  })
  

  注意server字段的格式是否符合要求，SendGrid的SMTP服务器地址和端口是否正确。

• 检查浏览器Cookie
  查看浏览器的Cookie列表，确认存在next-auth.csrf-token Cookie，其值应与表单中的csrfToken一致。如果该Cookie不存在，说明CSRF Token生成流程异常，优先排查NEXTAUTH_URL和组件类型问题。

• 手动测试API请求
  在浏览器控制台执行以下代码（替换实际的csrfToken和邮箱），直接调用登录接口，查看响应结果：

  fetch('/api/auth/signin/email', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      email: 'your-test-email@example.com',
      csrfToken: '从页面获取的csrfToken值',
      callbackUrl: '/'
    })
  }).then(res => res.text()).then(console.log)
  

  若返回错误信息，可根据提示进一步定位问题。

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