Infinite loop when unauthorized user tries to access page (authorization via adal-angular)

I have a web based dashboard in react that authenticates user with adal-angular. Authorized users can access the page without any issue, but when a user is unauthorized, they get into an infinite loop with login page.

This was my initial code:


AuthContext.handleWindowCallback();

if ((window === window.parent) && window === window.top && !AuthContext.isCallback(window.location.hash)) {

  if (!AuthContext.getCachedToken(adalConfig.clientId) || !AuthContext.getCachedUser()) {
    AuthContext.login();
    }
  } 
  else 
  {
    AuthContext.acquireToken(adalConfig.endpoints.xyz, (message, token, msg) =>{
      if (token) {
        ReactDOM.render(
          //rendering code
        );
      }
    });
  }

After moving 'AuthContext.handleWindowCallback();' inside the first if condition, the user doesn't get in to infinite loop anymore. But the error page is not displayed as expected. They just get a blank page, but the url has the message that user is not authenticated.

How can I get a working error page when the user is not authenticated? Is there a way to access the error message programmatically?

AzureAD / azure-activedirectory-library-for-js

Infinite loop when unauthorized user tries to access page (authorization via adal-angular) #909