I am currently working on a single page application using Vuejs and leveraging Firebase for authentication. So far, I have successfully implemented sign in and sign up functionality with no issues. However, I have encountered a problem with Social Authentication.
Whenever I navigate to the sign-up page, the social buttons are displayed properly. But if I leave the page and return, I receive the following error:
Error in mounted hook: "Error: An AuthUI instance already exists
As a result, the social buttons fail to render.
Below is the snippet of code causing the issue:
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 assistance or guidance on resolving this matter would be greatly appreciated :)