'Middleware to verify/update JWT access and refresh tokens

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



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source