'Intermittent problem using loginPopup MSAL JS in a REACT PWA

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.

msal msal-react

Solution 1:^[1]

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

Solution 2:^[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:

npm uninstall @azure/msal-common
npm uninstall @azure/msal-browser
npm uninstall @azure/msal-react
npm i @azure/[email protected]
npm i @azure/[email protected]
npm i @azure/[email protected]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	user15645317
Solution 2	Naveen Venkatesh

'Intermittent problem using loginPopup MSAL JS in a REACT PWA

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]