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 :)

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)
    }
  }
}