Firebaseui-web: Error: An AuthUI instance already exists for the key "[DEFAULT]"

[derwaldgeist]

• Operating System version: Cordova, Android, iOS
• Firebase SDK version: 4.4.0
• Firebase Product: phone number auth

I am trying to get Firebase PhoneNumber Auth work in Cordova app based on MeteorJS. Meteor is a single-page app framework that dynamically renders the DOM on the client.

I placed the Firebase UI widget on a bootstrap dialog which is created when the user wants to authenticate. This works for the first time. But if the user dismisses my dialog and opens it again, Firebase throws this exception:

Error: An AuthUI instance already exists for the key "[DEFAULT]"

It seems as if the UI framework doesn't expect that a widget will be mounted more than once over time. But in an SPA, this is quite normal. How can a workaround this limitation?

Is it possible to destruct the widget programmatically somehow?

[derwaldgeist]

It seems as if this is caused by this call:

const ui = new firebaseui.auth.AuthUI(firebase.auth()))

If I move it to global code instead, calling ui.start() repeatedly works.

Having this in global code is not really optimal, though.

[bojeil-google]

This is a duplicate of a previous issue that was solved. We added a global getter for a UI instance already and we added a delete option to allow you to delete an existing UI instance (ui.delete()) and initiate a new UI instance. It is documented in the README.

[derwaldgeist]

Ok, thanks for the info. I didn't see the section about ui.delete(). Closing this now.

[bvamos]

To avoid this error I do this in the constructor of my Login page component:
this.ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());

[wonderer007]

@bvamos Thank You

[iamorest]

or this one:

  ngOnDestroy() {
    this.ui.delete();
  }

[KarthikeyanM28]

Below working fine for me
useEffect(() => {
async function firebase_ () {
let ui = null
const firebaseui = await import('firebaseui')
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig)
ui = new firebaseui.auth.AuthUI(firebase.auth())
} else {
firebase.app() // if already initialized, use that one
ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
}
const uiConfig = {
signInFlow: 'popup',
signInSuccessUrl: 'http://localhost:3000/', // This URL is used to return to that page when we got success response for phone authentication.
signInOptions: [{ provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID, defaultCountry: 'IN' }],
tosUrl: 'http://localhost:3000/'
}
ui.start('#firebaseui-auth-container', uiConfig)
}
firebase_()
}, [])