401 race conditions with axios/laravel - CSRF/Unauthenticated

I have a SPA application that is powered via axios. Now, I originally noticed that the CRSF token was being dropped randomly which we identified as a race condition when two requests fired concurrently. I since changed the storage mechanism for sessions to the database and added atomic blocking to my routes and disabled the requirement for CSRF for routes that where not "action" routes.

Now, what is interesting, I get a 401 unauthenticated instead (randomly). I found a post online about reattempting to capture all the new session/token so I wrote the following:

let retries = [];

const sessionHandler = async error => {
    if (error.response && (error.response.status === 419 || error.response.status === 401)) {
        const uri = error.response.config.url;
        const data = error.response.config.data;
        const endpoint = '/session/user-config';

        // Push to retries
        retries.push({uri: uri, data: data});

        // After exhausting retries, force refresh
        if (retries.filter(attempt => attempt.uri === uri).length > 3 || retries.filter(attempt => attempt.uri === endpoint).length > 3) {
            window.location.reload();
        }

        // Attempt to obtain new token
        return await axios.get(endpoint).then(async () => {
            // Attempt to fulfill request
            return await axios.post(uri, data).then(response => response);
        });
    }

    return Promise.reject(error);
};

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

axios.interceptors.response.use(response => {
    // Remove any attempts after a successful request
    retries.filter(attempt => attempt.uri = response.config.url).forEach(attempt => {
        retries.slice(retries.indexOf(attempt), 1);
    });

    return response;
}, sessionHandler);

This successfully (70% of the time) grabs a new token should any 419 errors get thrown. Now, for the other 30%, it loops and eventually reloads the page. During this reload, after a 401 Unauthenticated 3 times, it redirects to login.

This can happen within the first 2 minutes of logging in sometimes. I have increased the session lifetime to 1 year to debug, I have tried everything locally to reproduce this, as well as on dev/test servers and yet it seems to be only effecting the production server.

I've tried to check all the configuration for differences but none can be found. I cannot find any known issues surrounding this and the 70% is not a solution but more a duck-tape fix. Does any one know if there is something additional I can do to laravel or axios to prevent this issue?

This happens randomly, I can click around really fast for ages and it won't happen, then randomly, it will happen.

source https://stackoverflow.com/questions/73378376/401-race-conditions-with-axios-laravel-csrf-unauthenticated