Firebaseui-web: Vue router problem: "An AuthUI instance already exists"

[mesqueeb]

I have a problem with Vue-router and the firebaseui-web.

The first time I open the login page it works. The second time I get the error:

[Vue warn]: Error in mounted hook: "Error: An AuthUI instance already exists for the key "[DEFAULT]""

Here's my Login page vue component:

let firebaseui = require('firebaseui')
export default {
  data () {
    return {}
  },
  mounted () {
    // FirebaseUI config.
    let uiConfig = {
      signInSuccessUrl: '#/admin',
      signInOptions: [
        // Leave the lines as is for the providers you want to offer your users.
        window.firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      ],
      // Terms of service url.
      tosUrl: ''
    }
    // Initialize the FirebaseUI Widget using Firebase.
    let ui = new firebaseui.auth.AuthUI(window.firebase.auth())
    // The start method will wait until the DOM is loaded.
    ui.start('#firebaseui-auth-container', uiConfig)
  },
}

[bojeil-google]

You can only have one FirebaseUI instance per key. You are initializing a new ui the second time.

[xaksis]

@mesqueeb just do:

    let ui = firebaseui.auth.AuthUI.getInstance();
    if (!ui) {
      ui = new firebaseui.auth.AuthUI(window.firebase.auth());
    }
    ui.start('#firebaseui-auth-container', uiConfig);

[mesqueeb]

Thanks @xaksis this fixed my problem with vue-router and firebaseui.

[pydanny]

This worked for me:

    let ui = firebaseui.auth.AuthUI.getInstance()
    if (!ui) {
      ui = new firebaseui.auth.AuthUI(firebase.auth())
    }
    ui.start('#firebaseui-auth-container', uiConfig)

Note that I'm not storing anything in window.

[tohagan]

Or ...

let ui = firebaseui.auth.AuthUI.getInstance()
  || new firebaseui.auth.AuthUI(firebase.auth());
ui.start("#firebaseui-auth-container", uiConfig);