I wanted absolutly implement vue-authenticate on my vue app client-side, i very newbie on this library and i follow step by step the documentation but when i try to run app, i got a blank page with this error :
componenent.vue
<template>
<div class="modal-overlay">
<div class="modal__dialog">
<div class="login-box">
<h2>Login</h2>
<a href="" @click="authenticate('google')" class="social-button" id="google-connect"> <span>Connect with Google</span></a>
<a href="#" class="social-button" id="twitter-connect"> <span>Connect with Twitter</span></a>
<a href="#" @click="authenticate('linkedin')" class="social-button" id="linkedin-connect"> <span>Connect with LinkedIn</span></a>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import store from 'store.js'
new Vue({
store,
computed: {
isAuthenticated: function () {
return this.$store.getters.isAuthenticated()
}
},
methods: {
authenticate: function (provider) {
this.$auth.authenticate(provider).then(function () {
alert('ok')
}).catch(() => {
alert('error')
})
}
}
})
</script>
main.js
Vue.config.productionTip = false;
Vue.prototype.$eventHub = new Vue();
const vueAuth = new VueAuthenticate(Vue.prototype.$http, {
baseUrl: 'http://localhost:5000'
})
Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(VueAuthenticate, {
baseUrl: 'http://localhost:5000',
providers: {
google: {
name: 'google',
url: '/auth/google',
authorizationEndpoint: 'https://accounts.google.com/o/oauth2/auth',
redirectUri: 'http://localhost:8080/dashboard',
requiredUrlParams: ['scope'],
optionalUrlParams: ['display'],
scope: ['profile', 'email'],
scopePrefix: 'openid',
display: 'popup',
oauthType: '2.0',
},
linkedin: {
name: 'linkedin',
url: '/auth/linkedin',
authorizationEndpoint: 'https://www.linkedin.com/oauth/v2/authorization',
redirectUri: 'http://localhost:8080/dashboard',
requiredUrlParams: ['state'],
scope: ['r_emailaddress'],
state: 'STATE',
oauthType: '2.0',
},
}
})
new Vue({ router, store, render: h => h(App), }).$mount('#app');
store.js
import Vuex from 'vuex';
import vueAuth from 'main.js'
export default new Vuex.Store({
// You can use it as a state getter function (probably the best solution)
getters: {
isAuthenticated () {
return vueAuth.isAuthenticated()
}
},
// Mutation for when you use it as state property
mutations: {
isAuthenticated (state, payload) {
state.isAuthenticated = payload.isAuthenticated
}
},
actions: {
// Perform VueAuthenticate login using Vuex actions
login (context, payload) {
vueAuth.login(payload.user, payload.requestOptions).then((response) => {
context.commit('isAuthenticated', {
isAuthenticated: vueAuth.isAuthenticated()
})
})
}
}
})