Firebase Auth using firebaseui-web does not redirect after authentication

Question

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!

Answer 1

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