如何判断用户认证方式？仅为Email and password登录用户启用Reset password按钮

核心逻辑是通过用户认证信息里的登录提供者（Provider）标识来判断用户的登录方式，进而控制按钮的显示/隐藏。以下是主流认证系统的具体实现方案：

Firebase Auth 实现示例 #

原生 JavaScript 场景 #

// 获取当前登录用户
const currentUser = firebase.auth().currentUser;

// 判断用户是否通过邮箱密码登录（支持用户关联多种登录方式的场景）
const isEmailPasswordAuth = currentUser?.providerData.some(provider => provider.providerId === 'password');

// 控制按钮显示
const resetBtn = document.getElementById('reset-password-btn');
if (isEmailPasswordAuth) {
  resetBtn.style.display = 'block';
} else {
  resetBtn.style.display = 'none';
}

React 组件场景 #

import { useAuthState } from 'react-firebase-hooks/auth';
import { auth } from '../path/to/firebase-config';

function SettingsPanel() {
  const [user] = useAuthState(auth);
  // 判断是否为邮箱密码登录用户
  const showResetBtn = user?.providerData.some(provider => provider.providerId === 'password');

  const handleResetPassword = () => {
    if (user?.email) {
      auth.sendPasswordResetEmail(user.email)
        .then(() => alert('重置邮件已发送'))
        .catch(err => console.error(err));
    }
  };

  return (
    <div className="settings">
      {/* 其他设置项 */}
      {showResetBtn && (
        <button onClick={handleResetPassword} className="btn">Reset password</button>
      )}
    </div>
  );
}

export default SettingsPanel;

其他认证系统的通用思路 #

不管使用 Auth0、Supabase 还是其他服务，用户对象中都会包含登录方式的标识：

• Auth0：查看 user.identities 数组，connection 属性为 Username-Password-Authentication 即为邮箱密码登录，google-oauth2 为谷歌登录
• Supabase：用户对象的 app_metadata.provider 字段会直接显示登录方式（如 email 或 google）

额外注意事项 #

• 若需严格限制仅纯邮箱密码登录用户（排除同时关联谷歌等其他方式的用户），可将 some 替换为 every：

  const isPureEmailPasswordAuth = currentUser?.providerData.every(provider => provider.providerId === 'password');
  

• 必须确保用户已登录后再执行判断，避免因 user 为 null 导致的报错

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