如何通过REST/API实现Next.js应用登录？解决window未定义报错

问题背景 #

在基于Next.js的项目中需要实现纯API式登录，配置CredentialsProvider后，尝试在自定义API路由中调用NextAuth.js的signIn方法，持续触发ReferenceError: window is not defined报错，推测该方法依赖UI环境。

错误原因 #

signIn方法来自next-auth/react包，它是专门为客户端浏览器环境设计的，内部依赖浏览器的window对象处理跳转、会话存储等逻辑。而Next.js的API路由运行在服务端（Node.js环境），不存在window对象，直接调用必然报错。

解决方案 #

方法一：直接调用NextAuth内置回调端点 #

NextAuth为每个Provider预设了回调接口/api/auth/callback/[providerId]，可直接向该端点发起POST请求完成登录，无需自行封装API：

// 客户端或外部服务发起请求示例
async function loginViaAPI() {
  const response = await fetch('/api/auth/callback/jwt_auth', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: 'test@example.com',
      password: 'myPassWord'
    })
  });

  const data = await response.json();
  if (response.ok) {
    console.log('登录成功', data);
  } else {
    console.error('登录失败', data);
  }
}

该端点会在服务端自动处理会话创建与存储，完全兼容无UI的API调用场景。

方法二：自定义服务端认证逻辑 #

若需要更灵活的控制，可在自定义API路由中手动验证凭证，再调用NextAuth服务端工具创建会话：

import { NextApiRequest, NextApiResponse } from "next";
import { authOptions } from "../auth/[...nextauth]"; // 导入你的NextAuth配置
import { signJwt } from "next-auth/jwt";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { email, password } = req.body;

  // 1. 替换为你的实际用户凭证验证逻辑
  const isValidCredential = email === 'test@example.com' && password === 'myPassWord';
  if (!isValidCredential) {
    return res.status(401).json({ message: '凭证无效' });
  }

  // 2. 生成用户对象
  const user = { id: "usr123", username: "testUser" };

  // 3. 生成JWT令牌
  const token = await signJwt(
    { ...user },
    process.env.NEXTAUTH_SECRET!,
    { expiresIn: '1d' }
  );

  // 4. 设置会话Cookie（NextAuth默认自动处理，需手动控制时可使用）
  res.setHeader('Set-Cookie', `next-auth.session-token=${token}; Path=/; HttpOnly; Secure`);

  return res.status(200).json({ message: '登录成功', user });
}

疑问解答 #

• 不需要编写返回HTML的端点，纯API完全可以实现登录，核心是使用服务端兼容的认证方式，而非客户端的signIn方法。
• 优先使用NextAuth内置的回调端点，或在服务端直接操作JWT与会话Cookie完成认证流程即可。

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