I have Sign in With Facebook and Sign In with Google on my React Web App.
Now, if the user has signed in before using Facebook and then later on wants to sign in with Google with same email address as that of his Facebook account firebase sends back this error message:
An account already exists with the same email address from another provider
My question now is how do I get the email address from the error object so I can give my users a better error message?
Here is my code:
const handleFacebookSignIn = () => {
let provider = new firebase.auth.FacebookAuthProvider();
firebase
.auth()
.signInWithPopup(provider)
.then((result) => {
//Handle success
}).catch((error) => {
let errorMessage = error.message;
if (errorMessage.toLowerCase().includes("An account already exists with the same
email address".toLowerCase())) {
errorMessage = "Please sign in with your google account"; //How can I get the email address from the error object?
}
toast.error(errorMessage);
});
}
Thank you.
To find out which provider has (or providers have) an entry for a given email address, you can call firebase.auth().fetchSignInMethodsForEmail. This allows you to start the correct sign-in flow, once a user has entered their email address.
There is no way in the client-side SDKs to directly look up the UID based on an email address. If that is required for your use-case (which is oft-requested, but not very often really necessary once you know of fetchSignInMethodsForEmail) the functionality does exist in the Admin SDKs, so you can wrap that in a custom API endpoint on your server or i Cloud Functions - securing access to that as you see fit.