I'm currently prototyping a VueJS based login flow using Firebase Auth and the web widget library firebaseui-web.
After successful authentication (password
or google
provider), the widget loading bar repeats infinitely and firebaseui-web does not trigger its signInSuccessWithAuthResult
callback . But the network call to identitytoolkit.googleapis.com
definitely seems to identify and authenticate my user (see screenshot)
The configuration object is as follows:
const uiConfig = { signInSuccessUrl: "#/loggedin", signInOptions: [ EmailAuthProvider.PROVIDER_ID, GoogleAuthProvider.PROVIDER_ID, ], tosUrl: "http://example.com", privacyPolicyUrl: "http://example.com", signInFlow: "redirect", callbacks: { signInSuccessWithAuthResult: function (authResult, redirectUrl) { console.log("signInSuccessWithAuthResult:", authResult, redirectUrl); return true; }, uiShown: function () { console.log("uiShown"); }, }, };
VUeJS code:
export default { name: "Home", data: function () { return { fbUI: {}, }; }, methods: { initFBUI: function () { const uiReference = firebaseui.auth.AuthUI.getInstance("demoUI"); console.log("uiReference ", uiReference); this.fbUI = uiReference !== null ? uiReference : new firebaseui.auth.AuthUI(this.$fbAuth, "demoUI"); console.log("this.fbUI", this.fbUI); }, startAuthUI: function () { console.log("ui.isPendingRedirect()", this.fbUI.isPendingRedirect()); this.fbUI.start("#firebaseui-auth-container", uiConfig); console.log("this.fbUI started"); }, }, mounted() { this.initFBUI(); this.startAuthUI(); }, };
Reproducible demo and full code at https://github.com/perelin/firebase-auth-providerdata-test.
Here is the CodeSandbox that represents: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test (sometimes it throws Unexpected token '{'
error. Then just reload/rebuild the page.
If I know what to try next, I'd be grateful!
So, I found this problem. It seems that the firebaseui instance returned by
firebaseui.auth.AuthUI doesn't like to be a Vue data property [1]
I really want to know why, but looking for bugs consumes me enough energy. I finished:)
Here is my fixhttps://github.com/perelin/firebase-auth-providerdata-test/commit/e8c31aecb4d3bc8bcd93928c55c439201a965c65
[1] https://v3.vuejs.org/guide/data-method.html