Microsoft Authentication React "hash_empty_error" when using loginPopup

Question

I am failing to understand the error that I am getting while trying to authenticate a user with the Micrsoft Authentication library for React (PWA). I need help understanding why it fails when attempting to sign in a user using the loginPopup method.

In some cases authentication works as expected but in some cases it does not work. Advise and/or assistance of any sort will be greatly appreciated.

The following is how I have the microsoft authentication library configured:

// create the microsoft signin configuration object
const msalConfig = {
  auth: {
    clientId   : process.env.REACT_APP_APP_CLIENT_ID,
    authority  : "https://login.microsoftonline.com/common/",
    redirectUri: window.location.origin,
  },
  cache: {
    cacheLocation: "sessionStorage",
  }
};

// initialize the user egent of the application 
const msalInstance = new msal.PublicClientApplication(msalConfig);

This is the block in which I call the loginPopup method this should return a promise that is fulfilled when this function has completed, or rejected if an error was raised.

const handleMicrosoftSignin = async () => {
  try {
    // this function does not get fulfilled, hence a 'hash_empty-err' 
    let msalResponse = await msalInstance.loginPopup();
    console.log("MSAL POPUP-LOGIN RESPONSE:", msalResponse)

    authenticateWithMicrosoft(
      msalResponse.account.username,
      msalResponse.accessToken
    );
  } catch (err) {
    setSnackBar({
      open    : true,
      message : err.message,
    });
  }
}

The following is the error that I get when I try to login using the Login Popup method:

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: http://localhost:3000/login

The following are the exact packages that I am using as defined in my package.json dependency tree:

"dependencies": {
    ...
    "@azure/msal-browser": "^2.14.1",
    "@azure/msal-react": "^1.0.0-beta.2",
    ...
}

What makes this dificult to debug is that it is not repitable, I am finding it hard understanding why this error comes during random times. Sometimes the promise is fullfilled but sometimes it is not. In otherwords, it works and it doesn't.

Assistance and/or advice on how I can debug or get this issue resolve will be of great value and highly appreciated. Thank you in advance for the help.

Disclaimer: I have read the documentation, Microsoft Msal sample applications, I have also gone through a plethora of tutorials but still failing to make this fully functional.

Hi @0xdeadbeef were you able to resolve to issue if yes than how because im stuck at this. — , Jun 27 '21 at 09:26
Hi @shri120kant, well unfortunately I did not. I ended up changing my whole authentication logic to Firebase Auth — 0xdeadbeef, Jun 28 '21 at 07:03

score 1 · Answer 1 · answered Jun 01 '21 at 16:09

Please double check that the page you use as your redirectUri does not change or clear the hash of the url. The response from AAD is returned in the hash and clearing this can result in this intermittent behavior as it creates a race condition between your application logic and MSAL.

score 1 · Answer 2 · answered Mar 17 '22 at 19:48

Set the redirectUri to a blank page or a page that does not implement MSAL. If your application is only using popup and silent APIs you can set this on the PublicClientApplication config like I did below:

export const msalConfig = {
    auth: {
        clientId: process.env.REACT_APP_CLIENTID,
        authority: `https://login.microsoftonline.com/${process.env.REACT_APP_TENANTID}`,
        redirectUri: 'http://localhost:3000/blank.html'
    },
    cache: {
        cacheLocation: "localStorage"
    }
}

If your application also needs to support redirect APIs you can set the redirectUri on a per request basis:

msalInstance.loginPopup({
    redirectUri: "http://localhost:3000/blank.html"
})

Microsoft Authentication React "hash_empty_error" when using loginPopup

2 Answers2