Firebase Auth UI with Vuejs - firebase

Question

I've followed this tutorial to create a vue component for login users with firebase Auth UI. but I keep getting an error in console. I've used firebase pre-built UI using its cdn in non-vue project before and it worked. but I can't figure out the way of implementing it with vueJS. any help?
source code userLogin.vue component :
<template>
<div id="userLogin">
<h1 class="text-center">Login</h1>
<div id="firebaseui-auth-container" style="margin-top:200px;"></div>
</div>
</template>
<script>
import firebaseui from 'firebaseui';
import firebase from '../firebaseInit'
export default {
name: 'userLogin',
data() {
return {
}
},
mounted() {
var uiConfig = {
signInSuccessUrl: '/success',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
}
}
</script>
here is the error :
`[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'PROVIDER_ID' of undefined"
found in
---> <UserLogin> at src\components\userLogin.vue
<App> at src\App.vue
<Root>
warn # vue.esm.js?efeb:576
logError # vue.esm.js?efeb:1729
globalHandleError # vue.esm.js?efeb:1724
handleError # vue.esm.js?efeb:1713
callHook # vue.esm.js?efeb:2912
insert # vue.esm.js?efeb:4086
invokeInsertHook # vue.esm.js?efeb:5853
patch # vue.esm.js?efeb:6072
Vue._update # vue.esm.js?efeb:2652
updateComponent # vue.esm.js?efeb:2780
get # vue.esm.js?efeb:3130
Watcher # vue.esm.js?efeb:3119
mountComponent # vue.esm.js?efeb:2787
Vue$3.$mount # vue.esm.js?efeb:8407
Vue$3.$mount # vue.esm.js?efeb:10747
Vue._init # vue.esm.js?efeb:4559
Vue$3 # vue.esm.js?efeb:4648
(anonymous) # main.js?3479:17
./src/main.js # app.js:6169
__webpack_require__ # app.js:679
fn # app.js:89
0 # app.js:6194
__webpack_require__ # app.js:679
(anonymous) # app.js:725
(anonymous) # app.js:728
vue.esm.js?efeb:1733 TypeError: Cannot read property 'PROVIDER_ID' of undefined
at VueComponent.mounted (userLogin.vue?e569:23)
at callHook (vue.esm.js?efeb:2910)
at Object.insert (vue.esm.js?efeb:4086)
at invokeInsertHook (vue.esm.js?efeb:5853)
at Vue$3.patch [as __patch__] (vue.esm.js?efeb:6072)
at Vue$3.Vue._update (vue.esm.js?efeb:2652)
at Vue$3.updateComponent (vue.esm.js?efeb:2780)
at Watcher.get (vue.esm.js?efeb:3130)
at new Watcher (vue.esm.js?efeb:3119)
at mountComponent (vue.esm.js?efeb:2787)
node version : v8.9.4