Next.js 13.4中Next-Auth 4.2的signIn('credentials')功能异常

问题分析 #

使用Next-Auth的Credentials登录方式时，无论验证是否通过（即使authorize明确返回null），signIn都会返回{error: null, status: 200, ok: true, url: 'https://localhost:3000/api/auth/signin?csrf=true'}，并触发跳转到/admin页面。核心原因包括：

• authorize返回null时，Next-Auth未正确抛出验证失败的错误信号
• 错误判断逻辑仅检查error字段，忽略了url字段（验证失败时会返回登录页地址）
• PrismaAdapter与Credentials模式冲突（Credentials无需数据库适配器）

解决方案 #

1. 移除PrismaAdapter #

Credentials模式属于无数据库的自定义验证，不需要PrismaAdapter，保留会导致Next-Auth内部逻辑异常。修改app/lib/auth.ts：

import { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: NextAuthOptions = {
  session: {
    strategy: 'jwt'
  },
  pages: {
    signIn: '/sign-in'
  },

  providers: [
    CredentialsProvider({
      name: "credentials",
    
      credentials: {
        email: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        // 验证失败时抛出错误，替代返回null
        throw new Error("Invalid credentials");
        
        // 正常验证逻辑示例：
        // if (!credentials?.email || !credentials?.password) throw new Error("Missing fields");
        // const user = await db.user.findUnique({ where: { email: credentials.email } });
        // if (!user || !await compare(credentials.password, user.password)) throw new Error("Invalid credentials");
        // return { id: user.id.toString(), email: user.email };
      }
    })
  ]
}

2. 完善登录结果判断逻辑 #

验证失败时，signIn可能返回url字段（指向登录页）而非error，需要同时判断这两个字段。修改app/components/forms/SignInForm.tsx中的onSubmit：

const onSubmit = async (values: z.infer<typeof FormSchema>) => {
  try {
    const signInData = await signIn("credentials", {
      email: values.email,
      password: values.password,
      redirect: false,
    });

    // 同时检查error和url，任一存在则验证失败
    if (signInData?.error || signInData?.url) {
      console.log(signInData.error || "登录失败");
      // 可在此处添加前端错误提示，比如设置form的error状态
    } else {
      router.push("/admin");
    }
  } catch (error) {
    console.error("登录出错:", error);
  }
}

3. 确保Provider名称匹配 #

确认signIn调用的第一个参数（"credentials"）与authOptions中CredentialsProvider的name字段完全一致，避免因名称不匹配导致的逻辑异常。

4. 更新Next-Auth版本 #

如果使用的是较旧版本的Next-Auth，可能存在Credentials模式的bug，升级到最新稳定版可解决部分兼容性问题：

npm update next-auth

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