Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    paul van bladel

    // === DEFAULT / CUSTOM STYLE ===
    // WARNING! always comment out ONE of the two require() calls below.
    // 1. use next line to activate CUSTOM STYLE (./src/themes)
    // require(./themes/app.${__THEME}.styl)
    // 2. or, use next line to activate DEFAULT QUASAR STYLE
    // ==============================

    import Vue from 'vue'
    import Quasar from 'quasar'
    import router from './router'
    import vuelidate from 'vuelidate'
    import VueResource from 'vue-resource'
    import VueAuthenticate from 'vue-authenticate'
    Vue.use(Quasar) // Install Quasar Framework

    // TODO use axios instead of vueresource

    // TODO move to separate file
    Vue.use(VueAuthenticate, {
    baseUrl: 'http://localhost:8080',
    providers: {
    oauth2: {
    name: 'oauth2',
    url: 'Token/Exchange',

      authorizationEndpoint: 'http://localhost:5000/connect/authorize', // if this ends with slash --> game over
      redirectUri: window.location.origin || window.location.protocol + '//' + window.location.host,
      scope: ['profile', 'openid', 'PanelButlerApi'],
      responseParams: {
        code: 'code',
        clientId: 'clientId',
        redirectUri: 'redirectUri'
      responseType: 'code',
      // responseParams: {
      //   code: 'code',
      //   token: 'access_token',
      //   state: 'state',
      //   sessionState: 'session_state',
      //   clientId: 'clientId',
      //   redirectUri: 'redirectUri'
      // },
      scopePrefix: '',
      scopeDelimiter: ' ',
      // defaultUrlParams: ['client_id', 'scope', 'response_type', 'redirect_uri', 'state', 'nonce'],
      defaultUrlParams: ['response_type', 'client_id', 'redirect_uri'],
      requiredUrlParams: ['scope', 'nonce'],
      optionalUrlParams: ['display', 'state'],
      state: function () {
        var val = ((Date.now() + Math.random()) * Math.random()).toString().replace('.', '')
        return encodeURIComponent(val)
      display: 'popup',
      oauthType: '2.0',
      clientId: 'PanelButlerVueJs',
      nonce: function () {
        var val = ((Date.now() + Math.random()) * Math.random()).toString().replace('.', '')
        return encodeURIComponent(val)
      popupOptions: { width: 452, height: 633 }

    Quasar.start(() => {
    / eslint-disable no-new /
    new Vue({
    el: '#q-app',
    render: h => h(require('./App'))

    Davor Grubelić
    so, you are saying that authenticate is ok and you get token stored in local storage, right?
    paul van bladel

    yes indeed, and this is how I make call to api:

    <!-- root node required -->
    <!-- your content -->
    <div class="layout-padding">
    <pre>{{identityData }}</pre>

    export default {
    data () {
    return {
    identityData: {}
    created () {
    let url = '/api/Identity'

    // let token = this.$auth.getToken()
    // .get(url, {headers: {'Authorization': 'Bearer ' + token}})
    .then(response => { this.identityData = response.data })




    Davor Grubelić
    that means that response interceptor is working since this is the way library collects token during auth proces
    paul van bladel
    so when I comment out //let token = .. and add the header manually everything works perfect.
    yes but the request interceptor fails :)
    Davor Grubelić
    thanks for reporting this, i'll see to investigate this issue later today. Can't really make time right now...
    paul van bladel
    Sure, I'm already very thankful for what you did during this conversation. I'll jump also into your code . We'll speak later. Enjoy the weekend.
    Davor Grubelić
    thx, u 2 :)
    Hi guys, joining here on the interceptor subject. @dgrubelic thanks a lot for your library. This is exactly what we need for SSO with Vue. Awesome.
    I am wondering whether this is an issue that comes from vue-resource itself
    Davor Grubelić
    I'm thinking that this is the problem with interceptors being called on VueResource (this.$http) instance, rather than Vue.http object.
    for that reason, i plan to remove vue-resource as a default library and leave up to whoever wants to use it
    Davor Grubelić
    And that is very stupid issue. Imho, why wouldn't you be able to dynamically assign interceptors once in runtime.
    Hi, someone here?
    I have a problem with vue-auth
    Miljko Miljkovic
    Zdravo Davore,
    Jesi mozda jos aktivan ovdje? Trebala bih mi pomoc oko twitter login-a... Ako imas mozda neki primjer kako da to odradim bio bih ti jako zahvalan!
    Davor Grubelić
    Pozdrav Miljko, jesam, tu sam.. bio sam na GO zadnjih par tjedana...
    hey @Nati323 , sorry for delayed response.. i was on a vacation..
    @miljko1984 ako hoćeš, javi mi se na DM, ovdje ćemo pričati isključivo eng jezik :)
    Hey guys, can anyone paste the code for vue.app of facebook login using axios? The problem for me: as mentioned in documentation, I've overwritten bindRequestInterceptor and bindResponseInterceptor, and the request which goes to the baseUrl is a very long code and I have no idea what to do with it :/
    p.s. yes, I've read about facebook login flow in Facebook login documentation, but maybe there is an easier way?
    Hi guys, I'm wondering how authenticate to facebook account using vue-authenticate, it says you need app id ?
    Davor Grubelić
    Hey @mkdesign82
    Yes, you'll need to create facebook app in your FB developers dashboard
    Hi @MangirdasKazlauskas
    You can check out example app i built here: https://github.com/dgrubelic/vue-authenticate-site
    Oh, i just realized i haven't published API for that app..
    i can paste you code for FB auth
    This is how API code for FB auth looks like...
    var config = require('../../config.json');
    var Axios = require('axios')
    module.exports = function (req, res, next) {
      Axios.post('https://graph.facebook.com/v2.4/oauth/access_token', {
        client_id: config.auth.facebook.clientId,
        client_secret: config.auth.facebook.clientSecret,
        code: req.body.code,
        redirect_uri: req.body.redirectUri
      }, { 'Content-Type': 'application/json' }).then(function (response) {
        var responseJson = response.data
      }).catch(function (err) {
    hello @dgrubelic and others. I'm trying to implement linkedin auth. I managed to get the request interceptors working for axios, but I'm not sure what to do after that. I do get an object with clientId, code, redirectUri and state, but the auth fails for some reason (the promise ends up in the catch block).
    Davor Grubelić
    Hi @norotico , i just released new version of vue-authenticate, v1.3.0 which has axios as a default request library.. give it a try.
    Juan Marval
    Hey there guys, what happened with the vue-authenticate-site repository? i'm getting 404.
    Davor Grubelić
    I temporarily put it in private mode since there were a lot of requests for change and inquires for help with implementation. Currently i don't have time for maintaining two repos (due to active work on main library repo)
    Davor Grubelić
    Unfortunately, i had to do this since, but i plan to publish it live again as soon as i make some time to implement needed changes
    Juan Marval
    is understandable... thank you Davor.
    Алексей Данчин
    bindRequestInterceptor and bindResponseInterceptor really necessary?
    In server side I have koa with koa-passport, and succeed authentication return ctx.body = {success: true} to client. Needed more? Needed token?
    Алексей Данчин
    What do ctx.login(user)?
    Алексей Данчин
    All session data in cookies? 0_o
    Davor Grubelić
    binding request interceptors are introduced so you can use any library for handling requests like vue-resource or axios
    this is because they handle headers differently
    this library is made for JWT based authentication systems. This means that you need to return authentication token to the client app. That token will then be send to your application api in each request
    @Aleksey-Danchin what does this mean: > What do ctx.login(user) ?
    Same question is for All session data in cookies? 0_o - JWT is stored in either localStorage, sessionStorage or in app memory. Custom made cookieStorage is yet to be released in some future version.
    Following the guide on installation with Vuex, it states.... VueAuthenaticate.factory is not a function