title: How to trigger axios.interceptor to intercept a request when refreshing a token
body: <p>I am currently working on an axios interceptor that triggers before a GET request. The idea is to check if the logged in user's refresh token has expired, and if so it should be refreshed.</p>
  <p>I have an LoginForm.jsx file that has the login functionality as well as the refresh token functionality which is seen below:</p>
  <pre><code>function LoginForm() {
  
      let navigate = useNavigate();
  
      //end point for registration
      const registerUrl = &quot;http://localhost:5000/api/auth/register&quot;;
  
      const loginUrl = &quot;http://localhost:5000/api/auth/login&quot;;
  
      const [user, setUser] = useState({
          accessToken: &quot;&quot;,
          refreshToken: &quot;&quot;
      })
  
     
      
     
      const refreshToken = async () =&gt; {
          try{
              console.log(&quot;in refreshToken func&quot;);
              console.log(&quot;before passing refresh, refresh is:&quot;);
              console.log(Cookies.get('refresh'));
  
              //refresh cookie is reaching here
              //the 403 is due to an invalid token being passed here
  
              //an old token is being passed which is causing 403, which means the res.data is not updated
              const res = await axios.post(refreshUrl, {token: Cookies.get('refresh')});
              setUser({
                  ...user,
                  accessToken: res.data.accessToken,
                  refreshToken: res.data.refreshToken,
              });
              //not reaching here some times so it is an issue with the post itself?
              console.log(&quot;user is&quot;);
              console.log(user);
              return res.data;
          } catch (err){
              console.log(err);
          }
      }
  
  
  
   
      
      const axiosJWT = axios.create(); 
  
  
      axiosJWT.interceptors.request.use(async (config)=&gt;{
      //     //before making a request
          console.log(&quot;in axios.interceptors&quot;)
          let currentDate = new Date();
          if(!Cookies.get('authorization')){
              console.log(&quot;no access token&quot;)
              return;
          }
          
          //check if this already exists
          const decodedToken = jwt_decode(Cookies.get('authorization'));
          console.log(&quot;decode expiry is:&quot;)
          console.log(decodedToken.exp);
  
  
          //if the token has expired
          if(decodedToken.exp * 1000 &lt; currentDate.getTime()){
              console.log(&quot;refreshing token!&quot;)
              const data = await refreshToken();
              console.log(&quot; refresh token data is&quot;);
              console.log(data);
              // config.headers[&quot;authorization&quot;] = &quot;Bearer &quot; + data.accessToken;
              Cookies.set('authorization', data.accessToken);
              Cookies.set('refresh', data.refreshToken);
          }
          return config;
      },(error)=&gt;{
  
          return Promise.reject(error);
      });
  </code></pre>
  <p>The axios.interceptors.request is intended to run and then generate the refresh token when certain requests are made, like getting products. My issue is that the GET request lives on a file called products.jsx which has none of the login or token functionality on it.:</p>
  <pre><code> const axiosNew = axios.create();
  
   
  
  
      useEffect(()=&gt;{
  
          // FUNCTION TO GET PRODUCTS
          const getProducts = async () =&gt;{
              try{
                  //run the axios.interceptor to genereate the token before this request
                  const res = await axiosNew.get(
                      cat
                      ? `http://localhost:5000/api/products?category=${cat}` 
                      // : &quot;http://localhost:5000/api/products&quot;);
                      : &quot;http://localhost:5000/api/products&quot;, { headers: {&quot;token&quot; : &quot;Bearer &quot;+Cookies.get('authorization')} });
  
  </code></pre>
  <p>The file paths are:
  /components/LoginForm.jsx and
  /components/Products.jsx</p>
  <p>How would I be able to trigger the axios.interceptors on LoginForm.jsx when making a get request on Products.jsx ?</p>
  <p>Thanks</p>