Next.js14.2.3中Next-Auth5.0.0 Beta无效凭证返回configuration错误问题

问题原因 #

NextAuth 5 Beta中，authorize函数抛出的自定义错误会被默认包装为configuration类型错误，同时服务器端的Missing credentials报错是因为未先校验credentials参数本身是否存在，导致错误传递逻辑异常。

修复步骤 #

1. 修正AuthOptions.ts中的参数校验与错误抛出逻辑 #

修改authorize函数，先校验credentials是否存在，再处理字段校验，确保自定义错误能正确传递到前端：

// src/util/AuthOptions.ts
async authorize(credentials: Credentials | undefined) {
    // 先校验credentials参数是否存在
    if (!credentials) {
        throw new Error("Missing credentials.");
    }

    const { username, password } = credentials;

    if (!validateEmail(username)) {
        throw new Error("Invalid email format.");
    }

    if (!username || !password) {
        throw new Error("Missing username or password.");
    }

    const user = new User();
    const foundUser = await user.getFirst({ username });

    if (foundUser && (await bcrypt.compare(password, foundUser.password))) {
        return { id: foundUser.id, username: foundUser.username };
    } else {
        throw new Error("Invalid credentials.");
    }
},

同时在NextAuth配置中添加trustHost: true，确保请求被正确信任：

const authOptions = {
    // ...其他已有配置
    trustHost: true,
    debug: process.env.NODE_ENV === "development",
    // ...其他已有配置
};

2. 修正前端LoginForm的错误处理与参数传递 #

恢复密码必填校验，移除手动处理的CSRF令牌（signIn函数会自动处理），简化错误逻辑：

// src/app/auth/login/LoginForm.tsx
"use client";
import { signIn } from "next-auth/react";
import { useState } from "react";

function LoginForm() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState(null); 

  const handleSubmit = async (e) => {
    e.preventDefault();

    setError(null);

    if (!username) {
      setError("Username is required");
      return;
    }

    // 恢复密码必填校验
    if (!password) {
      setError("Password is required");
      return;
    }

    const res = await signIn("credentials", {
      redirect: false,
      username,
      password,
    });

    if (res.error) {
      setError(res.error);
    }
  };

  return (
    <form onSubmit={handleSubmit} method="post">
      <div data-mdb-input-init className="form-outline mb-4">
        <input
          type="email"
          id="username"
          className="form-control"
          name="username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          aria-label="Username"
        />
        <label className="form-label" htmlFor="username">Email address</label>
      </div>

      <div data-mdb-input-init className="form-outline mb-4">
        <input
          type="password"
          id="password"
          className="form-control"
          name="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          aria-label="Password" 
        />
        <label className="form-label" htmlFor="password">Password</label>
      </div>

      {error && <p className="text-bg-danger">{error}</p>}
      <div className="form-check d-flex justify-content-center mb-4">
        <input
          className="form-check-input me-2"
          type="checkbox"
          id="keepLogin"
          name="keepLogin"
        />
        <label className="form-check-label" htmlFor="keepLogin">Remember me</label>
      </div>

      <button type="submit" className="btn btn-primary btn-block mb-4">Login</button>
    </form>
  );
}

export default LoginForm;

3. 验证效果 #

测试不同错误场景：

• 输入错误密码：前端显示Invalid credentials.
• 输入无效邮箱格式：显示Invalid email format.
• 空用户名/密码：显示对应必填提示

额外注意事项 #

确保.env文件中已正确配置NEXTAUTH_SECRET环境变量，避免因配置缺失导致的configuration类错误。

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