无法处理“auth/account-exists-with- different-credential”错误

Question

我已经在 Firebase 控制台中启用了“来自不同提供商的每个电子邮件地址一个帐户”。

但是，当我登录使用密码+电子邮件创建的帐户时，在 Google 身份验证中，'auth/account-exists-with-different-credential'没有捕获错误。有什么我错过的吗？

import React, { useCallback, useEffect } from "react";
import { Link } from "react-router-dom";
import './Auth/ProfileSelect.css';
import './Home.css';
import './Images/SignInIcon.png';
import { withRouter } from "react-router";
import firebaseApp from "./firebase";
import firebase from "firebase/app";
import "firebase/auth";
import {
  FirebaseAuthProvider,
  FirebaseAuthConsumer,
  IfFirebaseAuthed,
  IfFirebaseAuthedAnd
} from "@react-firebase/auth";

const SignUp = ({ history }) => {
  useEffect(() => {
    const disablePinchZoom = (e) => {
      if (e.touches.length > 1) {
        e.preventDefault()
      }
    }
    document.addEventListener("touchmove", disablePinchZoom, { passive: false })
    return () => {
      document.removeEventListener("touchmove", disablePinchZoom)
    }
  }, [])

    const handleSignUp = useCallback(async event => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await firebaseApp
          .auth()
          .createUserWithEmailAndPassword(email.value, password.value);
        history.push("/usersignupcred");
      } catch (error) {
        alert(error);
      }
    }, [history]);

  
  const signUpWithGoogle = useCallback(async event => {
    // event.preventDefault();
    const provider = new firebase.auth.GoogleAuthProvider();
    await firebaseApp
          .auth()
          .signInWithPopup(provider)
          .then(function(result) {
            
          })
          .catch(function(error) {
          if (error.code === 'auth/account-exists-with-different-credential') {
            alert("This account already exists!")
          }
        });
    history.push("/usersignupcred");
  }, [history])

    return (
        <div className="profileSelect">
          <FirebaseAuthProvider {...firebase.config} firebase={firebase}>
          <div className="sign-up-form">
                <img src='./Images/SignInIcon.png'></img>
                <div className="loginButtons">
                  <Link to="./home">
                      <button className="loginButton__notSelected">Login</button>
                  </Link>
                  <Link to="./signup">
                      <button className="loginButton__selected">Signup</button>
                  </Link>
                </div>
                <h1> Sign Up </h1>
                <form onSubmit={handleSignUp}>
                    <input className="input-box" name="email" type="email" placeholder="Email"></input>
                    <input className="input-box" name="password" type="password" placeholder="Password"></input>
                    <span>
                        <input type="checkbox"></input>
                        Agree with the terms and agreements
                    </span>
                    
                    <button type="submit" className="sign-btn">Sign Up</button>
                </form>
                <div className="OrBlock">
                  <span className="or-span"><p>or</p></span>
                </div>
                <button type="button" className="Google" onClick={signUpWithGoogle}>
                  <img src="https://www.iconfinder.com/data/icons/social-media-2210/24/Google-512.png" alt="" className="GoogleIcon"></img>
                    Sign up with Google
                </button>
                
            </div>
          </FirebaseAuthProvider>
        </div>
    )
}

export default withRouter(SignUp);

Answer 1

现在我们必须使用 JavaScript 将多个身份验证提供者链接到一个帐户

在我们执行以下步骤之前：-

1. 从 firebase 转到控制台https://console.firebase.google.com/u/0/

2. 选择您的项目

3. 然后进入身份验证选项 > 登录方法

4. 在高级部分，您可以看到每个电子邮件地址一个帐户

5. 然后将其更改为允许使用同一电子邮件地址创建多个帐户