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.

Answer 1

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.

Answer 2

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"
})

Answer 3

I faced this issue with Azure's service Entra ID, in login using stacks nextjs: 14.1 typescript: ^5 @azure/msal-react: 2.0.12 @azure/msal-browser: 3.10.0

Error

BrowserAuthError: hash_empty_error: Hash value cannot be processed because it is empty. Please verify that your redirectUri is not clearing the hash. For more visit: aka.ms/msaljs/browser-errors at createBrowserAuthError (BrowserAuthError.mjs:264:12) at deserializeResponse (ResponseHandler.mjs:19:41) at eval (FunctionWrappers.mjs:29:28) at PopupClient.acquireTokenPopupAsync (PopupClient.mjs:124:156)

when explicitly added property prompt: "login" in PopupRequest passing argument .

appInstance.acquireTokenPopup({
    scopes: "",
    prompt: "login"
})

and in msalConfig object redirectUri property was given as /path-name, then I replaced the redirectUri value with / removed the path-name , and this resolved my issue.

Note: giving property prompt: "login" will ask credential every time in login, it won't allow the automatically login, based on application service instance availability.

Hope this scenario would help some one.