axios-jwt

axios-jwt

Store, transmit, refresh JWT authentication tokens for axios

What does it do?

Applies a request interceptor to your axios instance.

The interceptor automatically adds an access token header (default: Authorization) to all requests. It stores access_token and refresh_token in localStorage and reads them when needed.

It parses the expiration time of your access token and checks to see if it is expired before every request. If it is expired, a request to refresh and store a new access token is automatically performed before the request proceeds.

How do I use it?

• Define a token refresh function
• Configure the interceptor
• Store tokens on login with setAuthTokens()

Apply interceptor:

//
import {
  IAuthTokens,
  TokenRefreshRequest,
  useAuthTokenInterceptor
} from "axios-jwt";
import axios from "axios";
// your axios instance that you wish to apply the interceptor to
import apiClient from "../apiClient";

const BASE_URL = process.env.REACT_APP_BASE_URL;
if (!BASE_URL) throw new Error("BASE_URL is not defined");

// type of response from refresh token endpoint
export interface IAuthResponse {
  access_token: string;
  refresh_token: string;
}

// refresh token endpoint
const refreshEndpoint = `${BASE_URL}/auth/refresh_token`;

// transform response into IAuthTokens
// this assumes your auth/refresh endpoints return `{"access_token": ..., "refresh_token": ...}`
export const authResponseToAuthTokens = (res: IAuthResponse): IAuthTokens => ({
  accessToken: res.access_token,
  refreshToken: res.refresh_token
});

// define token refresh function
const requestRefresh: TokenRefreshRequest = async (
  refreshToken: string
): Promise<IAuthTokens> => {
  // perform refresh
  const res: IAuthResponse = (await axios.post(refreshEndpoint, {
    token: refreshToken
  })).data;
  return authResponseToAuthTokens(res);
};

// add interceptor to your axios instance
useAuthTokenInterceptor(apiClient, { requestRefresh });

Login/logout:

import { isLoggedIn, setAuthTokens, clearAuthTokens } from "axios-jwt";

// login
const login = async (params: ILoginRequest) => {
  const res: IAuthResponse = (await axios.post("/auth/login", params)).data;
  // save tokens to storage
  setAuthTokens(authResponseToAuthTokens(res));
};

// to reset auth tokens
const logout = () => clearAuthTokens();

// check if refresh token exists
if (isLoggedIn()) {
  // assume we are logged in because we have a refresh token
}

Configuration

{
  requestRefresh,  // async function that takes refresh token and returns {accessToken, refreshToken}
  header = "Authorization",  // header name
  headerPrefix = "Bearer ",  // header value prefix
}

Caveats

• If multiple requests happen simultaneously after token expiration then multiple refresh token requests may be issued.
• Your backend should allow a few seconds of leeway between when the token expires and when it actually becomes unusable.