Access Token in Persistent Storage is removed on hard refresh. #45
Description
A primer: I am able to intercept Axios requests and responses to make sure access-tokens and and any other header request keys I need replaced in storage and global config.headers - are swapped out on each request. One issue we were facing was to make sure that the headers were not being replaced when they came back empty from devise_token_auth, since at times they will be empty if the token has not yet expired (i.e. after first use). Resolved that through a custom axios interceptor. Navigating through the app and calling authenticated endpoints come back 200 with the correct response, was not happening out of the box for me - solved it in a similar way as below noted.
Feew...Getting tokens from device_token_auth, etc... That is all gravy. The main meat of the issue is how the verifyCredentials function is being called. When doing a hard refresh verifyCredentials gets called which in turn dispatches the verifyToken action. verifyToken doesn't seem to be aware of the empty headers and that it shouldn't call persistAuthHeadersInDeviceStorage(Storage, response.headers) if the headers are not present, which when it does - it completely squashes the persistent storage keys that will later be used by the next request.
Ive verified that setAuthHeaders and peristAuthHeadersInDeviceStorage need some sprucing up -- and keep in mind this is just an example (not familiar with TS as much as es6) where we could check if
the header[key] is there - const value = headers[key] || fromStorage; before setting it - where fromStorage is the value returned by storage.getItem(key) like below.
export const setAuthHeaders = (Storage: DeviceStorage, headers: AuthHeaders): void => {
authHeaderKeys.forEach((key: string) => {
Storage.getItem(key).then((fromStorage: string) => {
const value = headers[key] || fromStorage;
axios.defaults.headers.common[key] = value;
});
});
};
export const persistAuthHeadersInDeviceStorage = (Storage: DeviceStorage, headers: AuthHeaders): void => {
authHeaderKeys.forEach((key: string) => {
Storage.getItem(key).then((fromStorage: string) => {
const value = headers[key] || fromStorage;
Storage.setItem(key, value); // <--- Not really needed
});
});
};
Another option would be to simply not call persistAuthHeadersInDeviceStorage unless the access-token header is actually there. If not it will be replaced with undefined.
The verify token action
redux-token-auth/src/actions.ts
Line 169 in 8c5a8fe