httponly cookie not available in subsequent xhr requests - xmlhttprequest

Question

Background
I have a restful backend, React + Redux frontend and I'm trying to protect against CSRF and XSS attacks.
The frontend requests a CSRF token from the API. The API response sets the CSRF token in a HttpOnly cookie and also in the response body. The redux reducer saves the token (from the response body) to the redux store.
If I request the token in the main container's componentDidMount(), everything works, but the concern is this is a one shot. Instead, as the requests to the API go through a custom middleware, I would prefer the middleware to request the CSRF token if it doesn't exist locally.
Issue
The flow is as follows (Tested on Chrome 50 and Firefox 47):
CSRF token requested. Token stored in HttpOnly cookie and redux store
Original API call requested with X-CSRF-Token header set. cookie not sent
Receive 403 from API due to missing cookie. API responds with new HttpOnly cookie. The Javascript can't see this cookie, so the redux store is not updated.
Additional API calls requested with X-CSRF-Token header from step 2. and cookie from step 3.
Receive 403 due to mismatched cookie vs X-CSRF-Token
If I add a delay before step 2 with window.setTimeout, the cookie is still not sent, so I don't think it's a race condition with the browser not having enough time to save the cookie?
Action Creator
const login = (credentials) => {
return {
type: AUTH_LOGIN,
payload: {
api: {
method: 'POST',
url: api.v1.auth.login,
data: credentials
}
}
};
};
Middleware
/**
* Ensure the crumb and JWT authentication token are wrapped in all requests to the API.
*/
export default (store) => (next) => (action) => {
if (action.payload && action.payload.api) {
store.dispatch({ type: `${action.type}_${PENDING}` });
return ensureCrumb(store)
.then((crumb) => {
const state = store.getState();
const requestConfig = {
...action.payload.api,
withCredentials: true,
xsrfCookieName: 'crumb',
xsrfHeaderName: 'X-CSRF-Token',
headers: {
'X-CSRF-Token': crumb
}
};
if (state.auth.token) {
requestConfig.headers = { ...requestConfig.headers, Authorization: `Bearer ${state.auth.token}` };
}
return axios(requestConfig);
})
.then((response) => store.dispatch({ type:`${action.type}_${SUCCESS}`, payload: response.data }))
.catch((response) => store.dispatch({ type: `${action.type}_${FAILURE}`, payload: response.data }));
}
return next(action);
};
/**
* Return the crumb if it exists, otherwise requests a crumb
* #param store - The current redux store
* #returns Promise - crumb token
*/
const ensureCrumb = (store) => {
const state = store.getState();
return new Promise((resolve, reject) => {
if (state.crumb.token) {
return resolve(state.crumb.token);
}
store.dispatch({ type: CRUMB_PENDING });
axios.get(api.v1.crumb)
.then((response) => {
store.dispatch({ type: CRUMB_SUCCESS, payload: { token: response.data.crumb } });
window.setTimeout(() => resolve(response.data.crumb), 10000);
// return resolve(response.data.crumb);
})
.catch((error) => {
store.dispatch({ type: CRUMB_FAILURE });
return reject(error);
});
});
};

Answer 1

This was caused because I was creating a new axios client on each request, if I reuse the same axios client for all API requests, the cookie is saved correctly and used in subsequent requests.