React+Firebase多登录切换：Github登录报auth/account-exists-with-different-credential错误

错误原因 #

出现这个错误是因为你尝试用Github登录的邮箱，已经通过Google账号在Firebase中注册过了。Firebase默认不允许同一邮箱对应多个独立的身份验证账号，必须先把两个提供商的凭证合并到同一个账号下。

修复步骤 #

修改你的Github登录函数，捕获该错误并处理账号合并逻辑：

const loginWithGithub = async () => {
  try {
    const {
      user: { refreshToken, providerData },
    } = await signInWithPopup(auth, githubProvider);
    dispatch({
      type: actionType.SET_USER,
      user: providerData[0],
    });
    localStorage.setItem("user", JSON.stringify(providerData[0]));
    setIsOpen(false);
  } catch (error) {
    if (error.code === "auth/account-exists-with-different-credential") {
      // 提取冲突的邮箱和待合并的Github凭证
      const email = error.customData.email;
      const pendingCred = error.customData.credential;

      // 提示用户需要先登录原关联账号
      alert(`邮箱${email}已绑定Google账号，请先通过Google登录完成账号合并`);

      // 自动触发Google登录，登录后合并凭证
      signInWithPopup(auth, googleProvider)
        .then((result) => {
          // 将Github凭证合并到当前登录的Google账号
          return result.user.linkWithCredential(pendingCred);
        })
        .then(() => {
          // 合并成功后更新用户状态
          const updatedUser = auth.currentUser.providerData[0];
          dispatch({
            type: actionType.SET_USER,
            user: updatedUser,
          });
          localStorage.setItem("user", JSON.stringify(updatedUser));
          setIsOpen(false);
          alert("账号合并成功，现在可以用Google或Github登录");
        })
        .catch((mergeError) => {
          console.error("账号合并失败:", mergeError);
        });
    } else {
      console.error("登录错误:", error);
    }
  }
};

核心逻辑说明 #

1. 捕获到指定错误时，从错误对象中拿到冲突邮箱和Github的登录凭证
2. 引导用户登录已关联的Google账号，登录成功后调用linkWithCredential方法合并两个账号的凭证
3. 合并完成后，用户就能通过Google或Github任意一种方式登录同一个Firebase账号

内容的提问来源于stack exchange，提问作者M7md-Dev