Axios Refresh Me

Introduction

Axios Refresh Me is an Axios wrapper designed to handle refresh tokens and retry requests seamlessly. It simplifies the process of managing token expiration and retrying failed requests, ensuring a smoother user experience.

Installation

To install the package, use npm or yarn:

1npm install axios-refresh-me

Usage

Axios Refresh Me uses a request observer to monitor requests and trigger the refresh handler when necessary. If the request fails due to a specified status code, the request observer will cancel all pending requests and refresh the token. After successfully refreshing the token, the request observer will retry the failed requests and the canceled requests automatically.

See the example below for a basic implementation of Axios Refresh Me.

Example

1import AxiosInstanceFactory from 'axios-refresh-me';
2
3// Function to get the current token
4function getToken() {
5  // Logic to get the current token
6  return 'current-token';
7}
8
9// Function to get a new token
10async function refreshToken() {
11  // Logic to get a new token
12  const newToken = await new Promise((resolve) => {
13    setTimeout(() => {
14      resolve('new-token');
15    }, 1000);
16  });
17
18  //  Remember to update the token in your token storage
19  updateToken(newToken);
20}
21
22// Register the request observer with custom options
23AxiosInstanceFactory.use({
24  // Logic to get a new token
25  refreshHandler: refreshToken,
26  // Status codes to trigger the refresh handler, default is [401]
27  statusCodes: [401],
28  // Retry count for the requests after refreshing the token successfully, default is 1
29  retryCount: 1,
30  // The request observer uses abort signals to cancel the requests, set this option to true to combine the abort signals
31  // from the request observer and default signal from the Axios request, default is false
32  combineAbortSignals: false,
33  // Function to determine if the request should be retried, will override the statusCodes option, default is undefined
34  shouldRefresh: (error) => {
35    // Logic to determine if the request should be retried
36    return error.response?.status === 401;
37  },
38});
39
40AxiosInstanceFactory.interceptor.request.use((config) => {
41  // Logic to modify the request config before sending the request
42  config.headers['Authorization'] = `Bearer ${getToken()}`;
43  return config;
44});
45
46// Create an instance of AxiosClient
47const instance = AxiosInstanceFactory.getInstance({
48  baseURL: 'https://api.example.com',
49  headers: {
50    'Content-Type': 'application/json',
51  },
52  // Or you can override the default options
53  interceptors: {
54    request: {
55      onFulfilled: (config) => {
56        config.headers['Authorization'] = `Bearer ${getToken()}`;
57        return config;
58      },
59      onRejected: (error) => {
60        // Handle error request
61        return Promise.reject(error);
62      },
63    },
64    response: {
65      onFulfilled: (response) => {
66        // Handle successful response
67        return response;
68      },
69      onRejected: (error) => {
70        // Handle error response
71        return Promise.reject(error);
72      },
73    },
74  },
75});
76
77// Example API call
78// Retry if request failed with 401 status code
79instance
80  .get('/data')
81  .then((response) => {
82    console.log('Data:', response.data);
83  })
84  .catch((error) => {
85    console.error('Error:', error);
86  });

License

This project is licensed under the MIT License.

Author

D4r1inG