'angular Microsoft authentication library issue

I am using MICROSOFT AUTHENTICATION LIBRARY in our angular 10 project. I have used MSAL loginPopup() function to login the user in our active directory. But sometimes When I click the login function msal login pop appear and when I close the parent window it does not redirect in the next page stuck there and on the browser debugger console window it shows this error (ERROR BrowserAuthError: hash_empty_error: Hash value cannot be processed because it is empty. Please verify that your redirect URI is not clearing the hash. Given Url:)

microsoft-graph-apimsalmsal-angular


Solution 1:[1]

What worked for me in my ReactJS application was to 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 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"
})

Solution 2:[2]

After some research I found out that the problem was related to the redirect Uri, and most resources pointed to adding a blank page as the redirect Uri in a popup flow. However most of the answers were related to React. I tried a few options for adding a blank html page but it was not so simple. I did not want to waste much time on this issue, because the app is new and we might go with the redirect flow in the future.

Then I remembered that the problems started when we configured the home page, which is the redirect target, to be authenticated with MSAL Guard.

Since I couldn`t easily add a blank html page, I added a blank-page component configured in the Router with blank-page path. The component had no functionality and was not related to MSAL, MSAL Guard or MSAL Interceptor. This solved it for me. I hope this helps.

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 Mike B.
Solution 2 Zapo

Related Questions