Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Davor Grubelić
    that should do it
    this is all you need to do for github (except setup provider config): https://github.com/dgrubelic/vue-authenticate/blob/master/example/server.js#L88
    Martin Hansen
    think I understand, need to change my server setup then
    what I have done is have my return url directly to the server, and not to the vue app
    Martin Hansen
    but window don't close or request made to my server for access token
    Martin Hansen
    was missing the redirectUri
    Martin Hansen
    got it working now with a local server. Still struggle to get it to work with AWS lambda, only get code expired.. hmm
    Martin Hansen
    phew got it working :)
    thanks alot
    paul van bladel
    Hi Davor, thanks a lot for trying to help me with interceptor problem.
    Davor Grubelić
    Hey Paul, no problem...
    so, auth token is stored in storage but isn't sent to server?
    if token is stored in storage after auth process, that means that interceptors are working ok
    you can optionally bind exactly the same interceptors and see what the problem is when you try to send a request
    that can be done be overriding these two props in vue authenticate config:
    bindRequestInterceptor: null,
    bindResponseInterceptor: null,
    paul van bladel
    this is how I configure vue-authenticate

    // === 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