使用NextAuth Credentials Provider对接GraphQL登录功能求助

针对你在NextAuth Credentials Provider中调用GraphQL无法正常获取用户信息的问题，从代码里能看到几个关键问题，逐个解决：

1. 未处理HTTP请求错误与GraphQL查询错误 #

fetch API默认不会在非2xx状态码时抛出异常，哪怕你的GraphQL服务返回500错误，response.json()依然会执行，导致后续逻辑错误。同时还要检查GraphQL查询本身是否返回错误。

修改authorize函数：

async authorize(credentials: any) {
  const query = `query User($email: String!) { user(email: $email) { id, username, email, password }}`;
  const response = await fetch('http://localhost:4000/graphql', {
    method: "POST",
    headers: {"Content-Type": "application/json","Accept": "application/json"},
    body: JSON.stringify({query, variables: { email: credentials.email }})
  });

  // 先检查HTTP请求是否成功
  if (!response.ok) {
    throw new Error(`请求失败: ${response.statusText}`);
  }

  const { data, errors } = await response.json();

  // 检查GraphQL查询是否返回错误
  if (errors) {
    throw new Error(errors[0].message || '用户查询失败');
  }

  // ...后续逻辑
}

2. 未验证用户是否存在 #

当前代码只要data存在就返回用户信息，但如果邮箱不存在，data.user会是null，此时返回的_id会是undefined，导致后续JWT和Session逻辑异常。必须明确检查data.user是否存在：

if (data?.user) {
  return {
    _id: data.user.id,
    name: data.user.username,
    email: data.user.email,
  };
} 
throw new Error("Invalid email or password");

3. 缺失密码验证逻辑 #

你当前的代码完全没有验证用户输入的密码！只要邮箱存在就会登录成功，这是严重的安全问题。必须在拿到用户信息后对比密码（注意：生产环境绝对不能存储明文密码，要用bcrypt等哈希算法验证）：

明文密码验证（仅测试用，生产禁用） #

if (data?.user) {
  if (credentials.password !== data.user.password) {
    throw new Error("Invalid email or password");
  }
  return {
    _id: data.user.id,
    name: data.user.username,
    email: data.user.email,
  };
} 
throw new Error("Invalid email or password");

哈希密码验证（生产环境推荐） #

先安装bcryptjs：npm install bcryptjs，然后修改代码：

import bcrypt from 'bcryptjs';

// ...

if (data?.user) {
  const isPasswordValid = await bcrypt.compare(credentials.password, data.user.password);
  if (!isPasswordValid) {
    throw new Error("Invalid email or password");
  }
  return {
    _id: data.user.id,
    name: data.user.username,
    email: data.user.email,
  };
} 
throw new Error("Invalid email or password");

4. 时序问题的额外排查 #

如果以上修复后还是有问题，建议在authorize函数里加日志排查：

async authorize(credentials: any) {
  console.log('收到的credentials:', credentials);
  const query = `query User($email: String!) { user(email: $email) { id, username, email, password }}`;
  const response = await fetch('http://localhost:4000/graphql', {
    method: "POST",
    headers: {"Content-Type": "application/json","Accept": "application/json"},
    body: JSON.stringify({query, variables: { email: credentials.email }})
  });
  console.log('HTTP响应状态:', response.status);
  const result = await response.json();
  console.log('GraphQL返回结果:', result);
  
  // ...后续逻辑
}

查看终端里的日志，确认请求参数、响应状态和返回数据是否符合预期。

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