Implement VueAuthenticate on Vue

Viewed 58

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 :

image here !

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

  }
}

})

0 Answers
Related