auto-login/refresh token with axios interceptors and queue pending requests

axios.ts

import axios, { AxiosError } from 'axios';
import { getLoginData, LoginFormInputs, openLoadingScreen } from 'my-gui-lib';

const STORAGE_NAME = 'auth';
const HEADER_NAME = 'Authorization';

let _refreshToken = '';
let _authorizing: Promise<void> | null = null;

{ // init
    const str = localStorage.getItem(STORAGE_NAME);
    if(str) {
        const { accessToken, refreshToken } = JSON.parse(str);
        axios.defaults.headers.common[HEADER_NAME] = accessToken;
        _refreshToken = refreshToken;
    }
}

const login = (accessToken: string, refreshToken: string) => {
    axios.defaults.headers.common[HEADER_NAME] = accessToken;
    _refreshToken = refreshToken;
    localStorage.setItem(STORAGE_NAME, JSON.stringify({ accessToken, refreshToken }));
};

const logout = () => {
    delete axios.defaults.headers.common[HEADER_NAME];
    _refreshToken = '';
    localStorage.removeItem(STORAGE_NAME);
};

const authorize = async () => {
    let loginData: LoginFormInputs | undefined, errorMessage;

    for (;;) {
        loginData = await getLoginData({ ...loginData, errorMessage });

        const closeLoadingScreen = openLoadingScreen();

        try {
            const response = await axios.post('/auth/signin', loginData);
            const { accessToken, refreshToken } = response.data;
            login(accessToken, refreshToken);
            break;
        }
        catch (e) {
            errorMessage = 'Invalid username or password! Please try again.';
        }
        finally {
            closeLoadingScreen();
        }
    }
};

const refresh = async () => {
    const closeLoadingScreen = openLoadingScreen();

    try {
        const response = await axios.post('/auth/refresh', { refreshToke: _refreshToken });
        const { accessToken, refreshToken } = response.data;
        login(accessToken, refreshToken);
    }
    catch (e) {
        logout();
    }

    closeLoadingScreen();
};

axios.interceptors.response.use(undefined, async (error: AxiosError) => {
    if(error.response?.status !== 401) {
        return Promise.reject(error);
    }

    // create pending authorization
    _authorizing ??= (_refreshToken ? refresh : authorize)()
        .finally(() => _authorizing = null)
        .catch(error => Promise.reject(error));

    const originalRequestConfig = error.config;
    delete originalRequestConfig.headers[HEADER_NAME]; // use from defaults

    // delay original requests until authorization has been completed
    return _authorizing.then(() => axios.request(originalRequestConfig));
});