Auto logout after access token expires in react application

Question

I have a react application authenticating with Azure AD using react-aad-msal library. The below code is working fine. But when the access token expires getAccessToken method automatically fetches the new access token and keeps the application going. But instead, I have a requirement to ask user to reauthenticate when the access token expires and if the user is Idle for the entire duration. Is there a way to do it?

  const apiAuthenticationParameters = {
    scopes: [config.appScope],
    forceRefresh: true,
  };

  const getAccessToken = () => {
    return AuthProvider.getAccessToken(apiAuthenticationParameters);
  };

Pamela Peng - MSFT Pamela Peng - MSFT · Accepted Answer · 2020-12-21T08:50:06

It seems no direct method to check the token if it is about to expire. You could refer to this similar issue with middleware.

const checkTokenExpirationMiddleware = store => next => action => {
  const token =
    JSON.parse(localStorage.getItem("user")) &&
    JSON.parse(localStorage.getItem("user"))["token"];
  if (jwtDecode(token).exp < Date.now() / 1000) {
    next(action);
    localStorage.clear();
  }
  next(action);
};

The default lifetime of access token is 1 hour, see here. You could call logout function after the time.

Auto logout after access token expires in react application

1 Answers