After spending an hour exploring the Chrome console, I'm still unable to pinpoint the source of this bug.
I'm in the final stages of updating the OAuth implementation in my Vue app.
It all started when socialLink.js discovered the need to create a new user. The Vue component Vue-authentication relies on the presence of an access_token in the response, so I returned some placeholder text:
return api.sendResponse(res, { email, name, socialId, access_token: 'abcd' });
This generated value is stored in the localStorage:
https://i.stack.imgur.com/RKRaA.png
Upon redirection, the SignUp.vue component is displayed and I fill out the form. The first interaction with the server involves a Vuex call to create a new user:
response = await this.$store.dispatch('CREATE_USER_PROFILE', payload);
This call results in a JWT token being issued:
const token = auth.createToken(userId, nickname, new Date(), null, false, '1m');
return api.sendCreated(res, api.createResponse(token));
Which I then store on the Vue page:
const { data } = response;
const token = data.data;
if (token === undefined) {
this.error = this.$t('sign-up.something-went-wrong');
return false;
}
I verified that the token matches what was received from the server:
Request URL: https://beta.mezinamiridici.cz/api/v1/users
Request Method: POST
Status Code: 201 Created
{"success":true,"data":"eyJhbGciOiJIUzI1NiIs...Tl8JFw2HZ3VMXJk"}
Next, I invoke another Vuex method and provide the current JWT token as input:
await this.$store.dispatch('UPDATE_USER_PROFILE', {
Using Vuex devtools, I ensured that the correct JWT token was present. This token was then passed to api.js.
Within api.js, I established an Axios configuration containing an Authorization header:
function getAuthHeader(context, jwt = undefined, upload) {
const config = { headers: { } };
if (jwt || (context && context.rootState.users.userToken)) {
config.headers.Authorization = `bearer ${jwt || context.rootState.users.userToken}`;
}
Again, I cross-checked to ensure the proper JWT token was utilized there.
Finally, all the data was passed to Axios:
function patch(endpoint, url, body, context, jwt) {
const headers = getAuthHeader(context, jwt);
console.log(headers);
if (endpoint === 'BFF') {
return axios.patch(`${VUE_APP_BFF_ENDPOINT}${url}`, body, headers);
} else {
return axios.patch(`${VUE_APP_API_ENDPOINT}${url}`, body, headers);
}
}
I logged this information and confirmed the correct JWT token remained intact:
bearer eyJhbGciOiJIUzI1N....8JFw2HZ3VMXJk
There seems to be no reason for the header to suddenly switch back to abcd, yet, it's evident in the 'Network' tab:
https://i.stack.imgur.com/T0yOK.png
Consequently, the server encounters a parsing error.
Does anyone have insights into why Axios is using a different value for the Authorization header than the one provided?