How To UPDATE from a SELECT in SQL Server?

Failed to handle 'auth/account-exists-with-different-credential' error

Nielsen

I have already enabled "one account per email address from different providers" in Firebase console.

However, when I signed in to an account that has been created using password + email, in Google Authentication, 'auth/account-exists-with-different-credential' error didn't get caught. Is there anything I missed?

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);