0

I have an app with JWT authentication written in React/ Django / Django-allauth.

I have an endpoint to verify/ refresh my access token and it works fine. My question is regards to where to put the refresh logic so it is automatically processed before each request? Is there middleware I can use or is there a way to override fetch?

Essentially, I want the app to verify the token, refresh it if necessary, and redirect unauthenticated user to login for every request dependent on JWT authorization. I also don't want to rewrite this logic over and over.

I'm thinking of overriding fetch


async function handle_token() {
    const {valid, status} = await API.process_token()
    return {
        status,
        valid,
    } 
}

// initialize the fetch object to minimize code repeat at every request
// https://stackoverflow.com/questions/44820568/set-default-header-for-every-fetch-request
function updateOptions(options) {

  const update = { ...options }
  update.headers = Object.assign({
        'Content-Type': 'application/json',
        'Accept': 'application/json'
  }, update.headers ? update.headers : {})

  if(update.jwt) {
    const token = localStorage.getItem('access') ? localStorage.getItem('access') : ''
    update.headers = Object.assign(update.headers, {'Authorization': `Bearer ${token}`})

    /*******************************************************************************
     * Perhaps put token logic here but unser how to to handle it
    ********************************************************************************/
    const {valid, status} = handle_token()
}

  return update;
}


function fetcher(url, options) {
  return fetch(url, updateOptions(options));
}

export default fetcher;

Or maybe there is a middleware that is common to use? Thanks

sin tribu
  • 1,148
  • 1
  • 6
  • 14
  • Your app should give a new refresh token everytime you request a access token, doing so, you will stay authenticated (meaning no more login) as long as your refresh token expire. This expiration this is higher than your access token. So the logic might be: If access token is expired (because of 403 for instance): request a new one with the refresh token. Store the new access token AND the new refresh token (the refresh token is also regenerated). Else: do nothing special. – Sami Tahri Feb 22 '22 at 21:30
  • Thanks, maybe my question is not clear enough. I'm trying to avoid having to add that to every request. I was hoping I could add the token logic to some middleware (or something) so I don't have to modify all my fetch request. Thanks for your reply. – sin tribu Feb 23 '22 at 15:30
  • I don't know about ReactJS, but I think http client libs (like Axios or Angular HTTP) usually allows to defined guards, so any responses to your requests with a 403 can be handled as a middleware. Which client are you using ? – Sami Tahri Feb 23 '22 at 16:28
  • I'm using fetch, but thinking I might switch to axios next time around to give it a try. I could probably write ```window.fetch``` to use axios under the hood, but I ended up just calling a n authentication function in my react components that make request. Thanks for the advice! – sin tribu Feb 24 '22 at 02:07

0 Answers0