aswi2022code-of-duty-gitlab/frontend/src/api/api.ts @ 37f6ff02

import axios from 'axios'
import { Store } from 'redux'
import config from '../config/conf'
import { AppStore } from '../features/redux/store'

let store: AppStore // this will get injected later

export const injectStore = (_store: Store) => {
    store = _store
}

// Error
export interface ApiError {}

const createBaseInstance = () =>
    axios.create({
        baseURL: config.baseUrl,
    })

const axiosInstance = createBaseInstance()

axiosInstance.interceptors.request.use(
    (config) => {
        const accessToken = store.getState().user.accessToken // get the access token from the store
        if (accessToken) {
            // @ts-ignore
            // this will always be defined, axios developers are just lazy to provide better Typescript types
            config.headers['Authorization'] = accessToken as string
        }

        return config
    },
    (err) => {
        Promise.reject(err)
    }
)

axiosInstance.interceptors.response.use(
    (res) => res,
    async (err) => {

        const originalConfig = err.config

        // Original URL might be login in which case we don't want to refresh the access token
        // Since the user just failed to log in and no token expired
        if (originalConfig.url === '/login' || !err.response) {
            return Promise.reject(err)
        }

        // We need to set the refresh token in the auth header
        const oldRefreshToken = store.getState().user.refreshToken

        // If there is no refresh token we simply log the user out
        if (!oldRefreshToken) {
            store.dispatch({ type: 'user/logout' })
            return Promise.reject(err)
        }

        // Set this to retry the request that failed
        originalConfig.retry = true

        // Try refreshing the JWT
        try {
            const refreshConfig = createBaseInstance()
            // @ts-ignore
            refreshConfig.headers['Authorization'] = oldRefreshToken as string

            // Send the request
            const { data } = await axiosInstance.get('/refreshToken')

            const { accessToken, refreshToken } = data

            // Set the new tokens
            store.dispatch({
                type: 'user/refreshTokens',
                payload: { accessToken, refreshToken },
            })

            return axiosInstance(originalConfig)
        } catch (err: any) {
            // If the refresh token fails we log the user out
            store.dispatch({ type: 'user/logout' })
            return Promise.reject(err)
        }
    }
)

export default axiosInstance