Axios interceptor, authProvider onError still throws error

exclusive-coral · 2024-08-28T14:10:17.315Z

i implemented axios as authProvider, but i also added interceptor to refresh access token, i do refresh the token set the new token in the error.config but new problem is onError throws an error now on the screen saying that TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined. at Object.deleteOne (provider.ts:150:13)

K

kapa.ai•8/28/24, 2:10 PM

Hi @Onder. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•8/28/24, 2:10 PM

----------------------
It seems like you are encountering an issue with the

onError

onError

method in your

authProvider

authProvider

when using Axios interceptors to refresh the access token. The error message indicates that there is a problem with destructuring the

data

data

property from an undefined value in your

deleteOne

deleteOne

deleteOne

deleteOne method.

Here are a few steps to help you troubleshoot and resolve this issue:

Ensure Axios Interceptor is Correctly Configured:
Make sure your Axios interceptor is correctly set up to handle token refresh and retry the original request. Here is an example from the knowledge sources:

   axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {
     const token = localStorage.getItem("accessToken");
     if (request.headers) {
       request.headers["Authorization"] = `Bearer ${token}`;
     } else {
       request.headers = {
         "Content-Type": "application/json; charset=utf-8",
         Accept: "application/json",
         Authorization: `Bearer ${token}`,
       };
     }
     return request;
   });

   axiosInstance.interceptors.response.use(
     (response) => {
       return response;
     },
     async (error) => {
       const originalRequest = error.config;
       if (error.response.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
         // Logic to refresh the token
         const newToken = await refreshToken();
         localStorage.setItem("accessToken", newToken);
         axios.defaults.headers.common["Authorization"] = `Bearer ${newToken}`;
         return axiosInstance(originalRequest);
       }
       return Promise.reject(error);
     }
   );

   axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {
     const token = localStorage.getItem("accessToken");
     if (request.headers) {
       request.headers["Authorization"] = `Bearer ${token}`;
     } else {
       request.headers = {
         "Content-Type": "application/json; charset=utf-8",
         Accept: "application/json",
         Authorization: `Bearer ${token}`,
       };
     }
     return request;
   });

   axiosInstance.interceptors.response.use(
     (response) => {
       return response;
     },
     async (error) => {
       const originalRequest = error.config;
       if (error.response.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
         // Logic to refresh the token
         const newToken = await refreshToken();
         localStorage.setItem("accessToken", newToken);
         axios.defaults.headers.common["Authorization"] = `Bearer ${newToken}`;
         return axiosInstance(originalRequest);
       }
       return Promise.reject(error);
     }
   );

   axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {
     const token = localStorage.getItem("accessToken");
     if (request.headers) {
       request.headers["Authorization"] = `Bearer ${token}`;
     } else {
       request.headers = {
         "Content-Type": "application/json; charset=utf-8",
         Accept: "application/json",
         Authorization: `Bearer ${token}`,
       };
     }
     return request;
   });

   axiosInstance.interceptors.response.use(
     (response) => {
       return response;
     },
     async (error) => {
       const originalRequest = error.config;
       if (error.response.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
         // Logic to refresh the token
         const newToken = await refreshToken();
         localStorage.setItem("accessToken", newToken);
         axios.defaults.headers.common["Authorization"] = `Bearer ${newToken}`;
         return axiosInstance(originalRequest);
       }
       return Promise.reject(error);
     }
   );

   axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {
     const token = localStorage.getItem("accessToken");
     if (request.headers) {
       request.headers["Authorization"] = `Bearer ${token}`;
     } else {
       request.headers = {
         "Content-Type": "application/json; charset=utf-8",
         Accept: "application/json",
         Authorization: `Bearer ${token}`,
       };
     }
     return request;
   });

   axiosInstance.interceptors.response.use(
     (response) => {
       return response;
     },
     async (error) => {
       const originalRequest = error.config;
       if (error.response.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
         // Logic to refresh the token
         const newToken = await refreshToken();
         localStorage.setItem("accessToken", newToken);
         axios.defaults.headers.common["Authorization"] = `Bearer ${newToken}`;
         return axiosInstance(originalRequest);
       }
       return Promise.reject(error);
     }
   );

K

kapa.ai•8/28/24, 2:10 PM

Implement
onError
onError
Method in
authProvider
authProvider
:
Ensure that your
```
onError
```
```
onError
```
method in the
```
authProvider
```
```
authProvider
```
is correctly implemented to handle errors and provide the necessary properties in the return object. Here is an example from the knowledge sources:

   const authProvider = {
     onError: async (error) => {
       if (error.status === 401 || error.status === 403) {
         return {
           redirectTo: "/login",
           logout: true,
           error: error,
         };
       }
       return {};
     },
   };

   const authProvider = {
     onError: async (error) => {
       if (error.status === 401 || error.status === 403) {
         return {
           redirectTo: "/login",
           logout: true,
           error: error,
         };
       }
       return {};
     },
   };

   const authProvider = {
     onError: async (error) => {
       if (error.status === 401 || error.status === 403) {
         return {
           redirectTo: "/login",
           logout: true,
           error: error,
         };
       }
       return {};
     },
   };

   const authProvider = {
     onError: async (error) => {
       if (error.status === 401 || error.status === 403) {
         return {
           redirectTo: "/login",
           logout: true,
           error: error,
         };
       }
       return {};
     },
   };

Check the
deleteOne
deleteOne
deleteOne
deleteOne Method:
Ensure that the
```
deleteOne
```
deleteOne
```
deleteOne
```
deleteOne
method in your data provider correctly handles the response and error cases. Here is an example snippet from the knowledge sources:

   export const dataProvider = (apiUrl: string): DataProvider => ({
     getList: async ({ resource, pagination, sorters, filters }) => {
       const url = `${apiUrl}/${resource}`;
       const queryFilters = generateFilters(filters);
       const { data: response, headers } = await axiosInstance.get(`${url}?cursor=${pagination?.current || 0}&${stringify(queryFilters)}`);
       return {
         data: response.data,
         total: headers["x-total-count"],
       };
     },
     deleteOne: async ({ resource, id }) => {
       const url = `${apiUrl}/${resource}/${id}`;
       const { data } = await axiosInstance.delete(url);
       return {
         data,
       };
     },
   });

   export const dataProvider = (apiUrl: string): DataProvider => ({
     getList: async ({ resource, pagination, sorters, filters }) => {
       const url = `${apiUrl}/${resource}`;
       const queryFilters = generateFilters(filters);
       const { data: response, headers } = await axiosInstance.get(`${url}?cursor=${pagination?.current || 0}&${stringify(queryFilters)}`);
       return {
         data: response.data,
         total: headers["x-total-count"],
       };
     },
     deleteOne: async ({ resource, id }) => {
       const url = `${apiUrl}/${resource}/${id}`;
       const { data } = await axiosInstance.delete(url);
       return {
         data,
       };
     },
   });

   export const dataProvider = (apiUrl: string): DataProvider => ({
     getList: async ({ resource, pagination, sorters, filters }) => {
       const url = `${apiUrl}/${resource}`;
       const queryFilters = generateFilters(filters);
       const { data: response, headers } = await axiosInstance.get(`${url}?cursor=${pagination?.current || 0}&${stringify(queryFilters)}`);
       return {
         data: response.data,
         total: headers["x-total-count"],
       };
     },
     deleteOne: async ({ resource, id }) => {
       const url = `${apiUrl}/${resource}/${id}`;
       const { data } = await axiosInstance.delete(url);
       return {
         data,
       };
     },
   });

   export const dataProvider = (apiUrl: string): DataProvider => ({
     getList: async ({ resource, pagination, sorters, filters }) => {
       const url = `${apiUrl}/${resource}`;
       const queryFilters = generateFilters(filters);
       const { data: response, headers } = await axiosInstance.get(`${url}?cursor=${pagination?.current || 0}&${stringify(queryFilters)}`);
       return {
         data: response.data,
         total: headers["x-total-count"],
       };
     },
     deleteOne: async ({ resource, id }) => {
       const url = `${apiUrl}/${resource}/${id}`;
       const { data } = await axiosInstance.delete(url);
       return {
         data,
       };
     },
   });

By following these steps, you should be able to handle the token refresh and error handling correctly, avoiding the

TypeError

TypeError

you encountered.

K

kapa.ai•8/28/24, 2:10 PM

For more detailed information, you can refer to the following documentation:

Authentication Error Handling (https://refine.dev/docs/guides-concepts/authentication/#error-handling)
Auth Provider onError Method (https://refine.dev/docs/authentication/auth-provider/#onerror)

If you need further assistance, please
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•8/28/24, 2:10 PM

@238969575289389057 kapa.ai is still learning and improving, please let us know how it did by reacting below

E

exclusive-coralOP•8/29/24, 7:30 AM

i discovered that setFilters, setCurrent and setPageSize functions of useTable are not wrapped with useCallback, causing infinite rerenders when used inside useEffect. I use useRef to workaround