firebaseui-web (auth/account-exists-with-different-credential) is not handled properly.

trafficstars

[REQUIRED] Describe your environment

Operating System version: Windows 11 22H2 (Build 22621.160)
Browser version: Microsoft Edge Version 101.0.1210.53 (Official build) (64-bit)
Firebase UI version: 6.0.1
Firebase SDK version: 9.8.3

[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

Jun 14 '22 15:06 Jerit3787

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.

Jun 14 '22 15:06 Jerit3787

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

Aug 02 '22 08:08 nathdolan

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

Aug 10 '22 11:08 matthewhampton

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.

Aug 12 '22 20:08 lunarraid

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

Aug 16 '22 14:08 cgil

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.

Aug 17 '22 16:08 Jerit3787

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

<div id="linkMicrosoft" class="firebaseui-container" style="display: none;"> <h3 style="color: #585555; text-align: center; font-weight: normal;">To finish linking your Microsoft account, please enter your existing password</h3> <input id="passwordLinking" type="password" class="mdl-textfield__input firebaseui-input" placeholder="de.iterate password"></input> <br> <button id="linkBtn" style="float: right;" class="firebaseui-button mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Link Account</button> <p id="linkErrorLbl" style="display: none; color: red; margin-top: 20px;">An error has occurred linking your account. Double check your password and try again.</p> </div>

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

Oct 04 '22 04:10 riley-webb

Up

Nov 23 '22 16:11 selemessaied

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.

Dec 29 '22 03:12 KnowYourLines

Coming across this now, any other suitable workarounds?

Feb 07 '23 16:02 dcoleyoung

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>