Microsoft-authentication-library-for-js: Error 'User login is required' and app is getting redirected back to login page

[SujitGodavarti]

I am using MSAL in my angular app for authentication purpose. The error that is being thrown is "error getting accees token: user_login_error:User login is required" as shown in below image and the app gets redirected back to login page again. How can I successfully complete the login and get the token?
I created a github repo for the code at 'https://github.com/SujitGodavarti/SamplePortalApp' with detailed instructions on how to run it mentioned in the ' README.md' file.

Please help me solve this issue.

[rohitnarula7176]

@SujitGodavarti Thank you for providing me with the code repro. I am investigating your code and will get back to you within a day.

[rohitnarula7176]

@SujitGodavarti I noticed a couple of issues with the code. I got busy with other stuff. I will work on your code and send you a PR in a couple of days.

[AnnaShk]

Hi @rohitnarula7176

The issue is with routing, not msal related. So you can close it.
But you are very welcome to share the other issues you noticed, please :)

Thanks.

[rohitnarula7176]

@SujitGodavarti As @AnnaShk mentioned, there is an issue with your routing and the way you have structured your code and not related to Msal. For instance, from your dashboard.component.ts, you call

var requestoptions = this.apiRequest.makeRequest(RequestMethod.Get, 'Tasks/statuses');

In the makeRequest method, you are doing an asynchronous operation by calling getAuthenticationToken which is why the value of requestoptions in your code will always be undefined. The makeRequest api should return a promise if its doing an asynchronous operation. There are many other issues like this which I have found. Also, instead of calling login explicitly from your service or components, you should plan on adding authentication guards which trigger Msal to initiate the login when you enter a protected route. You get the above error because your code tries to call the acquireTokenSilent method before completing the login flow.

[JBrownie77]

Hi, I am running into the same issue. In my auth guard I call acquireTokenSilent to ensure that the token is available, but upon the redirect back to my app the guard is triggered before tokenRecievedCallback, so acquireTokenSilent says the user isn't logged in even though they just logged in. Upon refresh the token is available.

Is there a proper way to do this using an auth guard and waiting for the token to be available?
Thanks!

[tassadarBT]

I have this same error aswell. What I don't understand is why it breaks fatally the entire page and you need to clear the local storage/ session storage / cookies to fix it back and be able to login again. Did you guys bothered to add any try/catches and reset the local storage or whatever is used to store the state of the auth if this go south? I'm pretty sure somewhere your code is bad and you should of at least added some guards yourselves. We are the users, we are usually copy-paste idiots who use the interface, without understanding the inner workings. A google library never done this shit to me.