Change a React Context state inside Axios instance

Viewed 282

I need to change the authenticated to false, when axios get a 401 from refresh endpoint. Heres the context, I need either call handleLogout or change authenticated to false

const Context = createContext();    
    function AuthProvider({ children }) {
            const [authenticated, setAuthenticated] = useState(false);
            function handleLogout() {
                localStorage.removeItem('token');
                localStorage.removeItem('refreshToken');
                localStorage.removeItem('user');
                api.HEADER = undefined;
                setAuthenticated(false);
                return true;
            }
            return (
                <Context.Provider value={{ handleLogout }}>
                    {children}
                </Context.Provider>
            );
        }
    export { Context, AuthProvider};

heres the api instance

api.interceptors.response.use(
  (response) => {
    return response;
  },
  async function (error) {
    var originalRequest = error.config;
    const access_token = localStorage.getItem("token");
    if (error.response.status === 401 && access_token) {
      const response = await refreshToken(error).then((res)=>{
        if(res.status === 201){
          originalRequest.headers.Authorization = response.data.Token;
          return api(originalRequest);
        }
      }).catch((err)=>{
       // NEED TO CALL IT HERE
      });
    }
    return Promise.reject(error);
  }
);

However I'm having trouble to think a way to do this, because its a axios instance, not a react component.

0 Answers
Related