Axios Token Interceptor

An interceptor which makes it easier to work with tokens in axios.

Usage

1const tokenProvider = require('axios-token-interceptor');
2
3const instance = axios.create({
4  baseURL: 'https://api.example.com'
5});
6
7// Configure the provider with the necessary options.
8const options = { ... };
9instance.interceptors.request.use(tokenProvider(options));
10
11// When a call to an endpoint is made, a token will be provided as a header.
12instance.get('/foo')

Providing a token

There are different ways to provide a token. You can provide the token as a static value:

1instance.interceptors.request.use(tokenProvider({
2  token: 'abc'
3}));
4
5// This will send the "Authorization: Bearer abc" header when making the call to the API endpoint.
6instance.get('/foo')

Instead of providing a static value you can also use a method to get the token:

1instance.interceptors.request.use(tokenProvider({
2  getToken: () => localStorage.get('access_token')
3}));
4
5// This will send the "Authorization: Bearer ..." header when making the call to the API endpoint.
6instance.get('/foo')

And this method can also return a promise:

1instance.interceptors.request.use(tokenProvider({
2  getToken: () => someMethod()
3    .then(response => response.access_token);
4}));
5
6// This will send the "Authorization: Bearer ..." header when making the call to the API endpoint.
7instance.get('/foo')

Customizing the Header

The following options allow you to set the header and the header value:

1instance.interceptors.request.use(tokenProvider({
2  token: 'abc',
3  header: 'X-Api-Key',
4  headerFormatter: (token) => 'token/' + token,
5}));
6
7// This will send the "X-Api-Key: token/abc" header when making the call to the API endpoint.
8instance.get('/foo')

Caching

In cases where getting a token is an expensive operation (eg: exchanging a refresh token for an access token) you'll want to cache this work for as long as the token is valid.

The following example shows how we can cache tokens for 8 hours:

1const cache = tokenProvider.tokenCache(
2  getTokenFromAuthorizationServer().then(res => res.body.access_token),
3  { maxAge: ms('8h') }
4);
5
6instance.interceptors.request.use(tokenProvider({
7  getToken: cache
8}));

Now it could also be that the token itself contains the expiration time (this is typically expires_in you'll get from your Authorization Server). In that case you can also use this to configure the maximum age of the cache:

1const cache = tokenProvider.tokenCache(
2  () => getTokenFromAuthorizationServer().then(res => res.body),
3  { getMaxAge: (body) => body.expires_in * 1000 }
4);
5
6instance.interceptors.request.use(tokenProvider({
7  getToken: cache,
8  headerFormatter: (body) => 'Bearer ' + body.access_token,
9}));

And the cache can also be reset:

1const cache = tokenProvider.tokenCache(
2  getTokenFromAuthorizationServer().then(res => res.body),
3  { getMaxAge: (res) => res.expires_in * 1000 }
4);
5
6cache.reset();

Note that expires_in coming from your authorization server is expressed in seconds, so you'll need to convert it to milliseconds when returning it to the getMaxAgefunction.