title: How to use refresh token in reactjs
body: <p>I am working on a admin app in reactjs which uses redux for state management. In my app when user log in it gets <code>access_token</code> and <code>refresh _token</code>. <code>access_token</code> which gets expired after 5 min. after 5 min token becomes invalid to make any api endpoint request.</p>
  <p>I want to know how am I suppose to use this <code>refresh_token</code> to update my <code>access_token</code> which is stored in <code>localStorage</code> of the browser. I had no idea about this <code>refresh_token</code> before this. This is how I make login request and save my <code>access_token</code> and <code>refresh_token</code>.</p>
  <p><strong>authentication:</strong></p>
  <pre><code>export  const Authentication = async(payload) =&gt;{
      try{
      const response = await fetch(`${generalConfig.baseURL}/oauth/token`, {
          method: 'POST',
          cache: 'no-cache',
          headers: {
              'Authorization': `Basic ${btoa(&quot;topseller:topseller&quot;)}`,
              'Accept': '*/*',
              // 'Content-Type': 'multipart/form-data',
              'accept-encoding': 'gzip, deflate',
              
          },
          body: payload
      })
      .then((response)=&gt;{
          console.log(response)
          return response.json()
      },err=&gt;{
         console.log(err,'############')
      })
      console.log(response,'@@@@@@@@@')
      return response;
  }catch(err){
      console.log(err,'############')
  }
  }
  </code></pre>
  <p><strong>authentication.action:</strong></p>
  <pre><code>export const getAccessToken = (dataToSend) =&gt; async (dispatch) =&gt; {
    try {
      var formData = ConvertToFormData(dataToSend);
      const authResponse = await Authentication(formData);   
      &lt;-- See above about this Authentication function
  
      const response = await fetch(&quot;http://api.smartocart.com/userType&quot;, {
        method: &quot;GET&quot;,
        cache: &quot;no-cache&quot;,
        headers: {
          Authorization: `Bearer ${authResponse.access_token}`,
        },
      });
      const payload = await response.json();
  
      if (payload.status === &quot;admin&quot;) {
        SaveToLocalStorage(&quot;access_token&quot;, authResponse.access_token);
        SaveToLocalStorage(&quot;refresh_token&quot;, authResponse.refresh_token);
        dispatch({
          type: GET_ACCESS_TOKEN,
          payload: {
            access_token: authResponse.access_token,
            refresh_token: authResponse.refresh_token,
          },
        });
      } else {
        dispatch({
          type: ERROR_ACCESS_TOKEN,
          buttonPressed: true,
        });
      }
    } catch (exception) {
      console.log(&quot;Log In again&quot;);
    }
  };
  </code></pre>
  <p>I did read about this in some of the blog post but i did get this. <a href="https://nmajor.com/posts/access-and-refresh-token-handling-with-redux" rel="nofollow noreferrer">https://nmajor.com/posts/access-and-refresh-token-handling-with-redux</a>
  Any help would be highly appreciated.</p>