Firebaseui-web: Once I log out and redirect the user to Auth page I get: app duplicate error.

[xerosanyam]

var ui = new firebaseui.auth.AuthUI(firebase.auth()); ui.start('#firebaseui-auth-container', uiConfig);

I think we need to make sure to not initalize firebase.auth() again if it has already been created. Any suggestion?

[bojeil-google]

I am not sure I understand. Are you initializing multiple instances of ui?
If it is a single page app, you don't need to initialize multiple new instances of ui for the same auth instance.
You can do something like this:

var ui;
if (ui) {
  ui.reset();
} else {
  ui = new firebaseui.auth.AuthUI(firebase.auth());
}
ui.start('#firebaseui-auth-container', uiConfig);

[xerosanyam]

what if I loose reference to ui ? should I store it in localstorage or something ?

[bojeil-google]

Ideally you would keep a reference to it. You can't store it in localStorage as you can't restore it back.
We could add a destroy method on AuthUI to clean up internal temporary objects or add a way to get that instance without keeping a reference to it.

[xerosanyam]

Thank you very much. I am able to solve this issue by keeping a reference to ui, which was obvious but I was not able to do it in vue. But I found a solution. Keeping code and other keywords for SEO

Error I was facing: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).

Technology stack: Vue + Firebase + FirebaseUI

Blog I followed to implement authentication in Vuejs: https://medium.com/dailyjs/authenticating-a-vue-js-application-with-firebase-ui-8870a3a5cff8

Solution:

1. Keep a data field ui in main.js
2. when instantiating ui, follow this

if(this.$root.ui!=''){
    this.$root.ui.reset()
}else{
    this.$root.ui = new firebaseui.auth.AuthUI(firebase.auth());
}
this.$root.ui.start('#firebaseui-auth-container', uiConfig);

[bojeil-google]

I am glad you were able to solve it, and thanks for sharing your solution!

[daveykane]

I've got the same issue and do think it would be very useful to add a destroy method on AuthUI or add a way to get that instance without keeping a reference to it.

I've implemented the above fix by keeping a reference in the main App Component in VueJS (this.$root) but really, once you've successfully logged in is there a need to keep the AuthUI app in memory? Would it not be better to destroy it to clean up internal temporary objects and then initialize a new instance again if you should ever have the need to?

[bojeil-google]

Sounds reasonable. I will look into it.

[bojeil-google]

We added a delete method on the AuthUI instance and a helper firebaseui.auth.AuthUI.getInstance(appId) so you don't have to save the AuthUI reference and pass it around.
This is available now in https://github.com/firebase/firebaseui-web/releases/tag/v2.3.0