How to use Axios interceptors with useSWR for the purpose of revalidating JWT tokens?

[chrber04]

I was thinking about switching to useSWR in my Nextjs project from just plain Axios, but I stumbled upon an issue with the authentication of my app. It uses JWT authentication where the refresh token is stored as a httpOnly cookie on the client, and the access token is stored in memory on the client.

Basically:

when a request to an endpoint which requires authentication returns a 403 status, a response interceptor that has been applied to the axios instance attempts to refresh the users tokens using the refresh token. It also applies a new header to the request to imply it has already been sent, as to prevent an infinite loop if the server again returns a 403 status. If the server returns with the new access token, then we append that to the Authorization header on the original request and retry it.

This is the hook I use for this logic:

import { useEffect } from "react";
import { AxiosRequestConfig, AxiosResponse } from "axios";
import { useRefreshToken } from "./useRefreshToken";
import { privateAxios, publicAxios } from "@/api/axios";
import { useAccessTokenState } from "@/store/memory";

export const usePrivateAxios = () => {
  const refresh = useRefreshToken();
  const accessToken = useAccessTokenState();

  useEffect(() => {
    // Append the access token to the request
    const requestInterceptor = privateAxios.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        config.headers = config.headers ?? {};
        if (!config.headers["Authorization"]) {
          config.headers["Authorization"] = `Bearer ${accessToken.value}`;
        }
        return config;
      },
      (error) => Promise.reject(error)
    );

    // Refresh the access token if it has expired, and retry the original request
    const responseInterceptor = privateAxios.interceptors.response.use(
      (response: AxiosResponse) => response,
      async (error) => {
        const prevRequest = error?.config;
        if (error?.response?.status === 403 && !prevRequest?.sent) {
          prevRequest.sent = true;
          const newAccessToken = await refresh();
          prevRequest.headers["Authorization"] = `Bearer ${newAccessToken}`;
          return privateAxios(prevRequest);
        }
        return Promise.reject(error);
      }
    );

    return () => {
      privateAxios.interceptors.request.eject(requestInterceptor);
      privateAxios.interceptors.response.eject(responseInterceptor);
    };
  }, [accessToken, refresh]);

  return privateAxios;
};

Now my question is how would you go about implementing this using SWR? Would it be valid to just do like this?

const { data, error, isLoading } = useSWR("/api/users", usePrivateAxios());

It doesn't seem to complain or anything, but is it weird to be passing in the custom hook like this? And how will useSWR behave if the refresh fails? Anything else I didn't think about?

[yamanidev]

have you found an answer to this? @chrber04

also how do you handle the case of the refresh token expiring?