React+Firebase登录报错：Cannot read properties of undefined (reading 'getProvider')

1. 解决TypeError: Cannot read properties of undefined (reading 'getProvider')错误 #

核心错误是错误地将Auth实例传给了getAuth函数：
你已经从../auth/base导入了初始化好的auth实例（这是getAuth(app)的返回值），但又调用了getAuth(auth)——而getAuth的参数应该是Firebase App实例，不是Auth实例。

修复方法：直接使用导入的auth，无需再次调用getAuth：

function toggleSignIn(e) {
  e.preventDefault();
  // 直接用导入的auth实例，不要重复调用getAuth
  signInWithEmailAndPassword(auth, email, password)
    .then((response) => {
      console.log(response);
      // 登录成功后的逻辑
    })
    .catch(function(error) {
      // 错误处理逻辑
    });
}

2. 修复组件内的其他问题 #

• 重复的password状态：你同时声明了独立的password状态和values里的password，导致状态管理混乱，统一保留一个即可：

const [email, setEmail] = useState("");
const [values, setValues] = useState({
  password: "",
  showPassword: false,
});
// 使用时调用values.password

• Input组件语法错误：<InputonChange=缺少空格，应改为<Input onChange=：

<Input 
  onChange={(e) => {
    setValues({...values, password: e.target.value})
  }}
/>

3. 实现未注册用户登录提示 #

Firebase在用户未注册时会抛出auth/user-not-found错误码，在catch分支中新增判断即可：

.catch(function(error) {
  var errorCode = error.code;
  if (errorCode === "auth/wrong-password") {
    alert("密码错误。");
  } else if (errorCode === "auth/user-not-found") {
    alert("该用户未注册，请先注册。");
  } else {
    alert(error.message);
  }
  console.log(error);
});

完整修复后的Login组件代码 #

import { useState } from "react";
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../auth/base";
    
const Login = () => {
  const [checked, setChecked] = useState(true);
  const [email, setEmail] = useState("");
  const [values, setValues] = useState({
    password: "",
    showPassword: false,
  });

  function toggleSignIn(e) {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, values.password)
      .then((response) => {
        console.log(response);
        // 登录成功后的逻辑，比如跳转首页
      })
      .catch(function(error) {
        var errorCode = error.code;
        if (errorCode === "auth/wrong-password") {
          alert("密码错误。");
        } else if (errorCode === "auth/user-not-found") {
          alert("该用户未注册，请先注册。");
        } else {
          alert(error.message);
        }
        console.log(error);
      });
  }

  return (
    <div>
      <label>E-MAIL</label>
      <input
        onChange={(e) => setEmail(e.target.value)}
        value={email}
      />

      <label
        htmlFor="password"
        className="font-manrope float-left block text-sm text-gray-700"
      >
        Password
      </label>
      <Input 
        onChange={(e) => {
          setValues({...values, password: e.target.value})
        }}
        value={values.password}
      />
      {/* 添加登录按钮并绑定事件 */}
      <button onClick={toggleSignIn}>登录</button>
    </div>
  );
};

export default Login;

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