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 login 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 endpoint returns `{"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<string> => {
// perform refresh
return (await axios.post(refreshEndpoint, { token: refreshToken })).data
.access_token;
};
// add interceptor to your axios instance
useAuthTokenInterceptor(apiClient, { requestRefresh });
Login/logout:
import {
isLoggedIn,
setAuthTokens,
clearAuthTokens,
getAccessToken,
getRefreshToken
} 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
}
// get access to tokens
const accessToken = getAccessToken();
const refreshToken = getRefreshToken();
Configuration
{
requestRefresh, // async function that takes refreshToken and returns a promise for a fresh accessToken
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.