angular Microsoft authentication library issue - microsoft-graph-api

Question

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:)

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

Answer 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.