firebase / firebaseui-web

FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.
https://firebase.google.com/
Apache License 2.0
4.6k stars 1.06k forks source link

(auth/account-exists-with-different-credential) is not handled properly. #960

Open Jerit3787 opened 2 years ago

Jerit3787 commented 2 years ago

[REQUIRED] Describe your environment

[REQUIRED] Describe the problem

Steps to reproduce:

In my setup, I registered students using email in the backend. And firebase-ui only provides microsoft login for students to use. In v8, firebase-ui would handle the linking of email & microsoft properly. I haven't changed any major code, only making changes so that Firebase v9 Compat would work. As I tested the features, this error occurs (auth/account-exists-with-different-credential). I know that I've enabled the setting 'one account for one email'. But before this firebase-ui would handle the linking properly. I hope that's a bug if not I investigate on it more

EDIT : As I tested with the demo, not all provider are causing this. Logging with google and using email, firebase-ui handle the login properly. When I tested with microsoft and email, it showed blank seems like login was unsuccessful.

EDIT 2 : More suggestions shows that using Microsoft’s account as secondary login option does break this login. Tested using email & microsoft / google & microsoft

related to #954, #956

Jerit3787 commented 2 years ago

Before v9 (SDK : 8.9.1, firebase-ui : 4.8.1) before

After v9 (SDK : 9.8.3, firebase-ui : 6.0.1) after

note : no settings were changed between these two versions. only changes the library imported.

nathdolan commented 2 years ago

Same issue. Provider linking does not work for the Microsoft provider.

matthewhampton commented 2 years ago

I have the same issue - and if you use the popup mode it is even worse, cos it renders a blank screen, but doesn't call any of the callbacks

lunarraid commented 2 years ago

I'm dealing with the same issue roughly, except with phone auth. Gives the same error info bar (which is weird because it's a phone number, but says "the same e-mail address"), and never calls the error handler callback, which blocks me from doing anything about it.

cgil commented 2 years ago

Any suggestions, with the popup in just silently fails, unsure what to catch.

Jerit3787 commented 2 years ago

what i've done is just to allow user to login using the first auth provider and manage the linking manually in the back-end instead till this is fixed. For me, in my application I only need people to use email as default and link with their school microsoft account. So, I can just ask the person to login using email and manage the linking later once logged in.

riley-webb commented 2 years ago

Temporary fix until Firebase add support for this

I have found a way around this.

So I have created my own custom divs using HTML and CSS and custom functions to listen for the error code and instead of erroring out, it will prompt the user for exisiting account password and link the microsoft account to their existing account.

Included below is the altered P.Callback function where all Auth errors are handled, the function I am using to run this altered command and my custom linking divs.

If you have any questions on how to implement, let me know.

Firebase Altered P.Callback Function

P.callback = function(a, b, c) { var d = new Ii; d.render(b); X(a, d); c = c || a.getRedirectResult(); U(a, c.then(function(e) { gn(a, d, e) }, function(e) { if ((e = Jm(e)) && ("auth/email-already-in-use" == e.code) && e.email && e.credential) Pl(new kl(e.email, e.credential), W(a)), mn(a, d, e.email); else if ("auth/account-exists-with-different-credential" == e.code) { var pendingCred = e.credential; var email = e.email; a.u().fetchSignInMethodsForEmail(email).then(function(methods) { if (methods[0] === 'password') { return promptPasswordLink(email, pendingCred); } }); } else if (e && "auth/user-cancelled" == e.code) { var f = Nl(W(a)), g = T(e); f && f.Ca ? mn(a, d, f.getEmail(), g) : f ? Ym(a, d, f.getEmail(), g) : ln(a, d, e) } else e && "auth/credential-already-in-use" == e.code || (e && "auth/operation-not-supported-in-this-environment" == e.code && Vm(a) ? gn(a, d, { user: null, credential: null }) : e && "auth/admin-restricted-operation" == e.code && hm(V(a)) ? (d.l(), Ol(W(a)), R("handleUnauthorizedUser", a, b, null, null)) : ln(a, d, e)) })) };

Custom Divs

`

` ### Linking Function `async function promptPasswordLink(email, pendingCred) { var loginDisplay = document.getElementById("firebaseui-auth-container"); var linkDiv = document.getElementById("linkMicrosoft"); var linkBtn = document.getElementById("linkBtn"); var linkErrorLbl = document.getElementById("linkErrorLbl"); loginDisplay.style.display = "none"; linkDiv.style.display = "block"; linkBtn.addEventListener("click", function() { var password = document.getElementById("passwordLinking").value; firebase.auth().signInWithEmailAndPassword(email, password).then(function(result) { return result.user.linkWithCredential(pendingCred); }).then(function() { window.location.href = "index.html"; }).catch((error) => { linkErrorLbl.style.display = "block"; }) }); }`
selemessaied commented 1 year ago

Up

KnowYourLines commented 1 year ago

Reverting to:

Firebase UI version: 5.0.0
Firebase SDK version: 8.10.1

fixed this for me as I recalled this functionality working before upgrading. Probably the most pragmatic way to deal with this issue for now. The best version is the version that works.

dcoleyoung commented 1 year ago

Coming across this now, any other suitable workarounds?

squigglybob commented 1 year ago

Reverting to:

Firebase UI version: 5.0.0
Firebase SDK version: 8.10.1

fixed this for me as I recalled this functionality working before upgrading. Probably the most pragmatic way to deal with this issue for now. The best version is the version that works.

Downgrading did the trick for me. I now see the message to login with the existing provider, and it links correctly and consistently

I was using firebase-app-compat.js with firebase UI version 6, so also needed to remove the -compat from the app and auth SDKs too

    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
AntonioVentilii commented 1 year ago

up! same issue with GitHub provider

AntonioVentilii commented 1 year ago

this is not working even in the demo....

kdawgwilk commented 5 months ago

I am seeing this even for new users i have created on the backend which have no providers

image