Auth with axios and swr

[vavdav]

I have auth with axios and interceptors and I am having an issue with the user logout.

When an accessToken is invalidated I am executing the revalidation with a refreshToken. When the refreshToken is also invalid, I want to logout a user, but I am not sure how to stop/clear all the requests which are triggered in the app by useSWR with the axios fetcher.

What is the best practice to do this?

    const initAxios = onAuthFinish => {
      axios.interceptors.request.use(
        config => {
          const accessToken = Cookies.get(authKeys.accessToken)
          const tokenType = Cookies.get(authKeys.tokehType)
          if (accessToken) {
            config.headers.Authorization = `${tokenType} ${accessToken}`
          }
          return config
        }
      )

      let isRefreshing = false
      const refreshSubscribers = []

      const subscribeTokenRefresh = (resolve, reject) => {
        refreshSubscribers.push({resolve, reject})
      }

      const onRrefreshed = token => {
        while (refreshSubscribers.length > 0) {
          const {resolve} = refreshSubscribers.pop()
          resolve(token)
        }
      }

      const onExpired = () => {
        while (refreshSubscribers.length > 0) {
          const {reject} = refreshSubscribers.pop()
          reject()
        }
      }

      axios.interceptors.response.use(
        response => response,
        error => {
          const originalRequest = error.config

          if (error.response.status === 403) {
            // refresh token is invalid - WHAT TO DO HERE?
            removeAuthData()
            onAuthFinish()
            return Promise.reject(error)
          }

          if (error.response.status === 401) {
            if (!isRefreshing) {
              isRefreshing = true
              userApi.refreshLogin(Cookies.get(authKeys.refreshToken)).then(res => {
                isRefreshing = false
                if (res && res.data) {
                  setAuthData(res.data)
                  const newToken = `${Cookies.get(authKeys.tokehType)} ${Cookies.get(authKeys.accessToken)}`
                  axios.defaults.headers.common.Authorization = newToken
                  onRrefreshed(newToken)
                }
              }).catch(err => {
                isRefreshing = false
                onExpired()
                // this is caused by reject in 403 status if block - WHAT TO DO HERE?
              })
            }

            const retryOrigReq = new Promise((resolve, reject) => {
              subscribeTokenRefresh(token => {
                originalRequest.headers.Authorization = token
                resolve(axios(originalRequest))
              }, () => {
                originalRequest._retry = false
                reject(axios(originalRequest))
              })
            })
            return retryOrigReq
          }

          return Promise.reject(error)
        },
      )
    } 

Currently, I am calling reject on all triggered requests with onExpired - but this still caches all requests so after users re-login there are still previous data. If I do not reject that request it stuck in the loading.

I have also tried to call cache.clear() from import {cache} from 'swr'

[vavdav]

It seems that the best solution is just to clear cookies and call redirect:

        removeAuthData()
        window.location.href = '/login/'