vue-auth: code obtained in step 1 is not POSTed to API server in OAuth2 flow

Using vue 2.3.4, and axios 0.16

auth is configured as such:

// Vue Auth
Vue.use(require('@websanova/vue-auth'), {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  rolesVar: 'role',
  facebookData: {url: 'http://localhost:8274/api/v1/auth/facebook/', method: 'POST', redirect: '/'},
  facebookOauth2Data: {
    redirect: function () { return this.options.getUrl() + '/auth/login/callback/facebook' },
    clientId: 'CLIENT_ID',
    scope: 'public_profile,email,user_friends'
  }
})

After making a call to FB in step 1, I get a callback on /auth/login/callback/google on the client side with the query parameter code set to whatever FB decides to reply with.

Next, I check if code has been set and call the oauth2 convenience method again, with code param set to true:

    if (this.$route.query.code) {
      this.$auth.oauth2({
        code: true,
        provider: this.$route.params.type,
        params: {
          code: this.$route.query.code
        }
      })
    }

However, even though I had configured my facebookData parameter to use POST, the library calls the url set there with the query parameter code with an empty body, like this:

http://localhost:8274/api/v1/auth/google/?code=GOOGLE_CODE

Shouldn’t it call the URL with x-www-form-urlencoded headers, and:

{ "code" : CODE_HERE }

in the body?

I guess I could write my own convenience method (as a replacement for the oauth2 method), but is this intended behaviour? Without changing the source files of the package, is there a way to modify this?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (8 by maintainers)

Most upvoted comments

The headers are getting set now, so I’m closing the issue. This is how my auth driver looks now (vue:2.3.4, axios:0.16.2):

  auth: {
    request: function (req, token) {
      req.headers = {'Authorization': token}
    },
    response: function (res) {
      return (res.data || {}).token
    }
  },

chrzrdx on Jun 22, 2017

I apologise for reopening the issue. Wasn’t sure if I needed to make a new issue for this. Here’s where I’m stuck:

On making the oauth2 request, this is what the API server returns in the response:

{ token: TOKEN, user: USER_OBJECT }

So, I changed my auth driver options as shown in the docs to this:

  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  custom1Auth: {
    request: function (req, token) {
      req.headers.set('Authorization', token)
    },
    response: function (res) {
      return (res.data || {}).token
    }
  },

The first request made to my google oauth endpoint API returns fine with the object I mentioned above.

But in the immediate request made to auth/user/, the request headers are not set. Why would this be? How may I go about setting it?

Just to give you a context, this is the chain of requests:

from client (/login)

POST request with the oauth2 method, pass the oauth2 code in the data, request returns with a response containing token and user details object in the response data

GET request made to API_SERVER/auth/user/ returns with Authorization credentials missing, because header is not set.

chrzrdx on Jun 19, 2017