Use Basic Authentication Header

[janein]

Hi, I need to send a header Authentication: Basic <username:password> along my request. This should work in Satellizer as the docs excplitly give an example: https://github.com/sahat/satellizer#question-how-can-i-send-a-token-in-a-format-other-than-authorization-bearer-token

Should this work in this plugin too?

Here is my code:

Vue.use(VueAuthenticate, {
  baseUrl: API_URL,
  loginUrl: '/oauth/token',
  tokenHeader: 'Authorization',
  tokenType: 'Basic',
  //...
});

[janein]

Did some debugging and as far as I can see the correct request params never get passed to the http-request. So my solution was to set the headers manually when I try to login like so:

app.$auth.login({email, password}, {
   headers: { Authoriization: 'Base MY_KEY' } 
}).then(() => { /* ... */ });

Pretty ugly solution. Is there a chance you can get this working? I found some pieces of code in the source which look like they should handle exactly this issue. But it seems they never get executed.

Cheers, janein

[dgrubelic]

Hi @janein,

although this library wasn't planned in a way to support Basic authentication, I'll see what I can do to implement it if it's not too much work.

You can probably use bindRequestInterceptor (https://github.com/dgrubelic/vue-authenticate/blob/master/src/options.js#L17) property in global configuration object to set that header (just like it is done here: https://github.com/dgrubelic/vue-authenticate#custom-request-and-response-interceptors). Basically, this will append Authorization header on every request sent from your app.

[janein]

@dgrubelic thanks for your effort!

I had a little misunderstanding with our backend-guys. Seems like they need the basic-header just for the login itself and the bearer-header for every other request afterwards. So I got it working with setting the headers on the login-request.

My code for the login looks like this (if anyone is interested ;) )

return app.$auth.login(urlParams, {
  headers: {
    // basic server authentication
    'Authorization': `Basic ${BASIC_HASH}`,
    // send as form data
    'Content-Type': 'application/x-www-form-urlencoded',
  },
}).then((response) => {
  // save refresh token to local storage
  LocalForage.setItem(REFRESH_TOKEN_KEY, response.body.refresh_token);
}).catch((err) => {
  return new ApiError(err, 'login failed');
});

Thanks for your work on this plugin! :)

[dgrubelic]

No problem, I'm glad you got that working for you. Closing issue...