Home / Questions / 182977
Accepted
Fernando Azarías
Asked: 2020-07-22 05:00:20 +0800 CST 2020-07-22 05:00:20 +0800 CST

Handle error with existing firebase account

  • 772

I have a login where they start through facebook. I want to add the option to log in using Twitter. But for that I must also be able to handle errors with accounts that have the same email that have already been registered before. That is, if a user registers with facebook with the email [email protected] and then wants to enter with twitter with the email [email protected]. I must detect that and handle it. The documentation gives this code as an example:

// Step 1.
// User tries to sign in to Twitter.
auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Twitter credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get registered providers for this email.
    auth.fetchProvidersForEmail(email).then(function(providers) {
      // Step 3.
      // If the user has several providers,
      // the first provider in the list will be the "recommended" provider to use.
      if (providers[0] === 'password') {
        // Asks the user his password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(user) {
          // Step 4a.
          return user.link(pendingCred);
        }).then(function() {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(providers[0]);
      // At this point, you should let the user know that he already has an account
      // but with a different provider, and let him validate the fact he wants to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account he owns.
        // Step 4b.
        // Link to Twitter credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.link(pendingCred).then(function() {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

My problem is in this part:

var provider = getProviderForProviderId(providers[0]);
auth.signInWithPopup(provider).then(function(result) {

The browser tells me:

getProviderForProviderId" is not defined

I don't know what I should do with the previous 2 lines.

javascript

1 Answers

  1. Best Answer

    The English pseudocode is saying that you have to implement the function getProviderForProviderId. So you have to implement it. Look in the documentation, each provider has one PROVIDER_IDthat is the one you have to compare. Something like:

    function getProviderForId(id) {
  switch(id) {
    case firebase.auth.TwitterAuthProvider.PROVIDER_ID:
      return new firebase.auth.TwitterAuthProvider();
    case firebase.auth.FacebookAuthProvider.PROVIDER_ID:
      return new firebase.auth.FacebookAuthProvider();
  //case ... Todos los casos por cada Provider que uses en tu proyecto
  }
  
}

    However, if you read the documentation , you will realize that the method fetchProvidersForEmailis deprecated. Now you must use fetchSignInMethodsForEmail.

    If you change the code to use the new method then you will have to compare, not the PROVIDER_ID, but those ...SIGN_IN_METHODof each provider. In the case of email authentication, there are two methods .

    • 1