如何隐藏Next-Auth Credentials Provider的「使用凭据登录」选项

方案1：自定义登录页面（最可靠） #

Next-Auth默认登录页会列出所有配置的Provider，所以最稳妥的方式是自己编写登录页面，只展示需要的登录选项，完全不处理这个仅用于编程式更新会话的CredentialsProvider。

具体操作：

1. 在pages/api/auth/[...nextauth].js中配置自定义登录页路径：

export default NextAuth({
  // 其他配置项...
  pages: {
    signIn: '/custom-login' // 指定你的自定义登录页面路径
  }
})

2. 创建pages/custom-login.js，手动渲染需要的登录按钮：

import { signIn, useSession } from "next-auth/react";

export default function CustomLogin() {
  const { data: session } = useSession();

  if (session) {
    return <div>已登录，<a href="/api/auth/signout">退出登录</a></div>;
  }

  return (
    <div className="login-box">
      <h2>登录</h2>
      {/* 只渲染你想展示的登录方式 */}
      <button onClick={() => signIn("google")}>用Google登录</button>
      <button onClick={() => signIn("github")}>用GitHub登录</button>
      {/* 完全不添加次级CredentialsProvider的登录入口 */}
    </div>
  );
}

方案2：通过CSS隐藏（快速临时方案） #

如果不想编写自定义页面，可以给这个CredentialsProvider设置特殊标识，再用CSS隐藏对应的登录按钮。

操作步骤：

1. 配置Provider时指定独特的name和id：

CredentialsProvider({
  id: "hidden-cred-provider",
  name: "HiddenCredentials",
  // 你的验证逻辑、会话更新逻辑...
})

2. 在全局CSS文件（比如styles/globals.css）中添加隐藏样式：

/* 隐藏对应Provider的登录按钮 */
button[data-provider="HiddenCredentials"] {
  display: none !important;
}

⚠️ 注意：这个方法依赖默认登录页的DOM结构，若Next-Auth更新页面布局可能失效，稳定性不如自定义页面。

额外补充：会话更新的简便方式 #

你提到用这个Provider更新会话属性，其实Next-Auth自带update方法，无需通过CredentialsProvider即可直接更新会话：

import { update } from "next-auth/react";

// 示例：更新用户角色
await update({
  user: {
    ...session.user,
    role: "admin" // 替换为你需要更新的属性
  }
});

这个方法会同步更新客户端与服务器端的会话，比调用CredentialsProvider更直接高效。

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