React + Firebase Authentication Error Handling (Handling account-exists-with-different-credential Errors)

Question

As per https://firebase.google.com/docs/auth/web/google-signin#expandable-1 documentation, the signInWithPopUp() will return an error.email when error.code === 'auth/account-exists-with-different-credential'. However in my case, for some reason, I do not. I get the following error:

FirebaseError: Firebase: Error (auth/account-exists-with-different-credential).
    at createErrorInternal (assert.ts:122:1)
    at _createError (assert.ts:83:1)
    at _makeTaggedError (index.ts:258:1)
    at _performFetchWithErrorHandling (index.ts:145:1)
    at async _performSignInRequest (index.ts:188:1)
    at async _signInWithCredential (credential.ts:37:1)
    at async PopupOperation.onAuthEvent (abstract_popup_redirect_operation.ts:102:1)

error.email comes up as undefined in my case.

Code:

const handleSignIn = (provider: AuthProvider) =>{
signInWithPopup(auth, provider).then((result) => {
  repeatAuth();
}).catch((error) => {
  console.log(error);
  if (error.code === 'auth/account-exists-with-different-credential') {
    let pendingCred = error.credential;
    let email = error.email;

    console.log(error.email); // undefined
    fetchSignInMethodsForEmail(auth, email).then( (methods) => {
      console.log(methods);
      if (methods[0] === 'password') {

        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.

        signInWithEmailAndPassword(auth, email, password!).then((result) => {
          return linkWithCredential(result.user, pendingCred);
        }).then(() => {
          repeatAuth();
        });
        return;
      }
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      signInWithPopup(auth, provider).then((result) => {
        repeatAuth();
      });
    }).catch((error) => {
      console.log(error);
    });
  }
});

}

Any help would be useful. Thanks

Answer 1

I also encountered a similar problem. You can access the email by using

error.customData.email

Answer 2

You may follow these steps:-

1. Go to console from your firebase

2. Select your project

3. Then go to the authentication option > sign-in method

4. In the advanced section you can see One account per email address

5. Then change it to Allow creation of multiple accounts with the same email address