firebaseui-web does not redirect after authentication

[REQUIRED] Describe your environment

• Operating System version: macOS 11.6
• Browser version: latest Safari
• Firebase UI version: 6.0.0
• Firebase SDK version: 9.4.1

[REQUIRED] Describe the problem

Im currently prototyping VueJS based a sign-in flow with Firebase Auth and the web widget library firebaseui-web.

After successful authentication (either password or google provider) the widget loading bar is endlessly repeating and firebaseui-web does not fire its signInSuccessWithAuthResult callback. But the network calls to identitytoolkit.googleapis.com clearly seem to have my user identified and authenticated (see screenshot)

Steps to reproduce:

Relevant Code:

The config object looks like this:

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();
  },
};

Reproduceable demo and full code is under https://github.com/perelin/firebase-auth-providerdata-test.

Here is the CodeSandbox for this rep: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test/tree/compat (sometimes it throws a Unexpected token '{' error. Then just reload / rebuild the page.

I would be thankful for any idea what to try next!

[perelin]

I refactored the demo to work with compat, still broken, have a look here: https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test/tree/compat

[xil222]

haven’t dived into this, but since you’re using FirebaseUI v6.0.0 which is dependent on Firebase JS SDK compat library, in line 4 and 5 of your main.js could you try import like import { initializeApp } from "firebase/compat/app"; import { getAuth, onAuthStateChanged } from "firebase/compat/auth";

you can find FirebaseUI recent release notes at