Error in mounted hook: "Error: An AuthUI instance already exists

Question

I building a single page app using Vuejs and using Firebase for authentication. So far I got sign in and sign up to work with no problems. The issue I am having now is with Social Authentication.

When I load the sign up page the social buttons render, but when I navigate away and come back to sign up I get the following error:

Error in mounted hook: "Error: An AuthUI instance already exists

and the social buttons don't render anymore.

Here is my code:

mounted () {
  SocialAuth () {
    const uiConfig = {
      signInSuccessUrl: '/',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID
      ]
    }

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

Any help and all help with be much appreciated :)

Unconstitutional

Answer 1

Did you try using firebaseui.auth.AuthUI.getInstance() like:

mounted () {
  SocialAuth () {
    const uiConfig = {
      signInSuccessUrl: '/',
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID
      ]
    }

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

Veracity

Aweseome! Thanks so much, that seems to have worked :) – Unconstitutional

Thanks this helped me get unblocked. The code can be simplified further into 2 lines. const ui = firebaseui.auth.AuthUI.getInstance() ?? new firebaseui.auth.AuthUI(firebase.auth()); ui.start('#firebaseui-auth-container', uiConfig); – Balcony