Error getting access token when the page loads for the very first time after logging into the angular app using MSAL

[SujitGodavarti]

I am using MSAL in my angular app for authentication purpose. To start off, I used this application as demo app with my tenant I created in azure. After I login, before I make an API call, I am successfully able to get the access token without any issue for the this app.

Now I am following the same approach and trying to integrate this into my actual angular app. I also enabled logging as mentioned below.

https://github.com/spottedmahn/NetCoreAngularAzureB2CMsal/blob/error-debugging/ClientApp/app/services/authentication.service.ts

I am able to successfully login into the app. After logging in, when I am trying to load the page with the API call for the very first time, I get an error 'User login is required' and there is no 'user' in the 'this.clientapplication' which I am logging in console as shown in below image.

But when I refresh the page that has the API call, I am able to get the token without error and the 'user' which was missing in the first case, is there after the refresh as shown in the image below.

I am unable to figure out what I am missing when the page loads for the very first time. Please help me solve this issue.