I have a react application that use Azure SSO for login. Due to security reason, we have to clear the browser storage which cached id token, access token and refresh token issued from Azure AD.
Now after 1 hour, the application will prompt Network Error.

From my understanding (after reading the doc), the cache token is used to acquire new access token silently when the existing is about to/ has expired, so that the user is not interrupted/ need to re-login again.

Is there other way to achieve the same result without the cached token? If not, how to detect the expired token and logout user, instead of prompting Network error?

Here my code in

const App: FC = () => {
  const { instance, accounts } = useMsal();
  const [account, setAccount] = useState<AccountInfo | null>(accounts && accounts[0] || null);
  const [accessToken, setAccessToken] = useState<string | null>(null);
  const [msalAccessToken, setMsalAccessToken] = useState<string | null>(null);

  const requestProfileData = async () => {
    // Silently acquires an access token which is then attached to a request for MS Graph data
    // acquireTokenSilent() will handle expired token automatically
    instance.acquireTokenSilent({
      scopes: ['User.Read'],
      account: accounts[0]
    }).then(async response => {
      setAccount(response.account);
      setAccessToken(response.idToken);
      setMsalAccessToken(response.accessToken);
      sessionStorage.clear();
    }).catch((err) => {
      console.error(err.message);
    });
  };

  useEffect(() => {
    if (accounts.length) {
      requestProfileData();
    }
  },[]);
}