Intermittent problem using loginPopup MSAL JS in a REACT PWA

Question

Good morning, I'm using MSAL JS in order to authenticate users in a PWA application developed using REACT. Sometimes login works perfectly, redirecting users to the home page of the app. Other times login popup opens, users insetr their login but then login procedure fails with this error:

BrowserAuthError: hash_empty_error: Hash value cannot be processed because it is empty. 
Please verify that your redirectUri is not clearing the hash. 
Given Url: https://siteinspection-dev.azurewebsites.net/login
    at t [as constructor] (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:163177)
    at new t (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:266493)
    at Function.t.createEmptyHashError (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:266991)
    at https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:304999

This is the configuration of MSAL:

    export const MSAL_CONFIG: Configuration = {
      auth: {
        clientId: AzureActiveDirectoryAppClientId,
        authority: `https://login.microsoftonline.com/${AzureTenantId}`,
        knownAuthorities: [],
        redirectUri: window.location.origin
      },
      cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: true,
      },
      system: {
        loggerOptions: {
          loggerCallback: (level, message, containsPii) => {
            if (containsPii) {
              return;
            }
            switch (level) {
              case LogLevel.Error:
                console.error(message);
                return;
              case LogLevel.Info:
                console.info(message);   // when fails this message appears: "[Thu, 15 Apr 2021 07:06:24 GMT] :  : @azure/[email protected] : Info - Emitting event: msal:loginFailure"
                return;
              case LogLevel.Verbose:
                console.debug(message);
                return;
              case LogLevel.Warning:
                console.warn(message);
                return;
            }
          },
        },
      },
    };

This is the login method implemented:

private myMSALObj: PublicClientApplication = new PublicClientApplication(
    MSAL_CONFIG
  );

this.loginRequest = {
      scopes: [],
      prompt: "select_account",
      redirectUri: BaseUrl
    };

this.myMSALObj
        .loginPopup(this.loginRequest)
        .then((resp: AuthenticationResult) => {
          console.log(resp);
        })
        .catch((err) => {
          console.log(err);   // here the error showed before
        });

After a login error a page refresh with browser data cleaning permit users to logon correctly. I can't understand what cause this problem, anyone can help me? Thanks.

Answer 1

Solved changing the redirect url to the same login url - no more problems.

Answer 2

This is happening due to a recent update in the package - msal-common & this is being indirectly referenced in [email protected] & It is picking the latest version of msal-common 6.3.0. We will have to handle this and set it to appropriate versions.

You could use the below commands to uninstall and reinstall the packages:

1. npm uninstall @azure/msal-common
2. npm uninstall @azure/msal-browser
3. npm uninstall @azure/msal-react
4. npm i @azure/[email protected]
5. npm i @azure/[email protected]
6. npm i @azure/[email protected]