Handling JWT token expiration in a React based application? - rest

Question

We are in the process of building a web based application, using React and making use of a REST based server. The question that came up is how to best manage a previously authenticated connection becoming unauthenticated and whether there are any React or React/Redux design patterns for this?
Previous designs had used sessions, but since the REST server is meant to be stateless, the current REST server design will probably look at follows:
POST /auth/authenticate --> Authenticate and provides a token
DELETE /auth/token --> Invalidates the token, black-list token
PUT /auth/token --> Renews token, if still valid
GET /auth/token --> Indicates if token is still valid
On the client side the current draft design is to wrap the fetch function with our own function for dealing with checking the response state and then either calling a client side service for invalidating state and redirecting to login page or doing the same thing with Redux. We are also looking to add an interval timer to check the token we have and then automatically do the same thing if the 'exp' field is present and past.
The function we have at this point is (it does not take care of revalidation of token, at this point, to prevent an activate 'session' expiring):
function handleFetchResponse(fetchResponse) {
let newResponse;
try {
return fetchResponse.then((response) => {
newResponse = response;
const contentType = response.headers.get('content-type');
if (contentType && contentType.indexOf("application/json") !== -1) {
return response.json();
} else if (response.status === 200) {
return response.blob();
} else {
if (response.status === 401) {
forceLogout();
}
throw new RequestError(response.statusText, response.status);
}
}).then((responseBody) => {
if (newResponse.status === 401) {
forceLogout();
return;
} else if (newResponse.status !== 200) {
if (responseBody) {
throw new RequestError(
responseBody.details ||
newResponse.statusText,
newResponse.status
);
}
throw new RequestError(newResponse.statusText, newResponse.status);
}
return responseBody;
});
} catch (error) {
console.error('handleFetchResponse:error', error);
return Promise.resolve(err)
.then((err) => {
throw err;
})
}
}
It would be called via:
return handleFetchResponse( fetch(...) );
Is this an acceptable design or are they ways to improve on this?