AzureAD/microsoft-authentication-library-for-js

Azure AD B2C Msal.js acquireTokenSilent Performance issue

Closed this issue · 8 comments

srivathsanvlb commented

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Browser:

  • Chrome version 68.0.3440.106
  • Firefox version XX
  • IE version XX
  • Edge version XX
  • Safari version XX

Library version


Library version: msal.js 0.1.3



## Current behavior

Works fine, able to get the access token and call my web api endpoints. But it takes 4-5 seconds to get the access token by using acquireTokenSilent  


## Expected behavior

acquireTokenSilent  should be able to get the access token faster


## Minimal reproduction of the problem with instructions

Have the details here
https://social.msdn.microsoft.com/Forums/en-US/22a53bc6-cd7d-4226-ba61-3ba84368dd8b/azure-ad-b2c-msaljs-acquiretokensilent-performance-issue?forum=WindowsAzureAD#1551122f-9a36-43c6-8d64-f94201e7c877

Have also opened one here
https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp/issues/20
nehaagrawal commented

@srivathsanvlb Can you please update the msal to latest version and try again. You are on a pretty old version and this issue might have been resolved already.

srivathsanvlb commented

Hi @nehaagrawal

  1. I researched a bit and found that <script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.7/js/msal.min.js"></script> is the latest version I am able to get via CDN. Even though Release notes says that the latest version is 0.2.1, I am not able to get it via CDN. Correct if I am wrong.

  2. I am NOT able to see any considerable performance improvement after upgrade from 0.1.3 to 0.1.7

  3. According to documentation, when app launches, I initialize
    this.userAgentApplication = new Msal.UserAgentApplication(ServiceUrl.clientId, ServiceUrl.authority, this.authCallback, { cacheLocation: ServiceUrl.cacheLocation, loadFrameTimeout: ServiceUrl.loadFrameTimeout, navigateToLoginRequestUrl: false });

For every subsequent API call I use
return window.msal.acquireTokenSilent(ServiceUrl.b2cScopes).then((accessToken) => {});
To retrieve the access token and call my web api endpoints.

For each and every api call, when acquireTokenSilent is used, the entire app reloads and comes back to the "then" block. I have some scenarios, to call 2-3 api endpoints, to get data before loading the page. At that time, when I use the chrome debugger, I am able to see the app reloading for each call and executing the appropriate then blocks.

Is there anything wrong in what I doing. Is there a way to avoid multiple reloads, I think that is the reason for the app getting too slow. Let me know if you need more info.

nehaagrawal commented

@srivathsanvlb I will release the latest msal version to CDN in this week. MSAl reloading the app during acquireTokenSilent is a known issue and it's a miss on our side that this is not documented properly. Please see this FAQ from ADAL. This is also relevant to MSAL. Basically you need to have if-else block to check if this reload is happening because of iframe.
I will also document this on MSAL wiki.

srivathsanvlb commented

Hi @nehaagrawal

Just wanted to clarify what I am doing is right.

  1. Mine is a SPA with only one html ie index.html.
  2. In that I have <script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.7/js/msal.min.js"></script> <script type="module" src="Scripts/authenticate.js">
  3. The authenticate.js, has the js class that does the authentication work. In its constructor I have

constructor() {
if (window !== window.parent) {
this.userAgentApplication = new Msal.UserAgentApplication(ServiceUrl.clientId);
}
else {
this.userAgentApplication = new Msal.UserAgentApplication(ServiceUrl.clientId, ServiceUrl.authority, this.authCallback, { cacheLocation: ServiceUrl.cacheLocation, loadFrameTimeout: ServiceUrl.loadFrameTimeout, navigateToLoginRequestUrl: false });
}
if (document.getElementById('btnLogin') != null) {
document.getElementById('btnLogin').addEventListener('click', () => {
this.login();
});
document.getElementById('btnProceed').addEventListener('click', () => {
this.callApi();
});
}
}
4. On every acquiretokensilent call, the constructor still gets invoked (means app reloads) and the 'if' block gets called. First time 'else' block is called, and in the subsequence acquiretokensilent 'if' block is called. Unfortunately this doesn't improve any performance. Am I missing something?

  1. Since acquiretokensilent is causing the peformance issue, do you think I can call it only once during the app load and then store the accesstoken in window object and reuse it? (See Q2 below)

Thank you very much for helping me so far. Really appreciate it.

Q2:

  1. My app doesn't have much sensitive data.
  2. I have used custom policies kmsi
  3. I have set the max token life time in custom policies
    token_lifetime_secs 3600
    id_token_lifetime_secs 3600
    refresh_token_lifetime_secs 1209600
    rolling_refresh_token_lifetime_secs 7776000
  4. Having said all these, I am planning to just get the accesstoken during the app load, store it in a static class variable and use it for every api call instead of acquiretokensilent. Let me know your thoughts on this.

Thank you very much.

kwaazaar commented

Caching the access token yourself makes no sense, since this is MSAL's job (and automatically refreshing it once the cached token has expired).

It's very frustrating to see the samples are not working 100% and many Github issues are not answered or go silent for long periods. I'm wondering how serious Microsoft is with Azure AD B2C. I've just 'sold' it to my customer, being convinced MS will deliver. But getting pretty unsure that was a smart choice.

sameerag commented

@srivathsanvlb @kwaazaar

We have recently gone through a redesign of the library's API surface. Please download our latest preview package or pull the dev branch and try updating your code and see if the issue still persists.

If you would like guidance on how to use the new version of the library, please review our wiki page here.

We also have a working B2C sample is picking the preview version if msal mentioned above. We are working on merging the branch soon to the main sample but please go ahead and try and let us know if you are still facing issues.

sameerag commented

Please reopen if the issue still persists.

srivathsanvlb commented

Thanks @sameerag for the reply. Good to see that msal.js has matured extensively.

I will give it a try and let you know on how it goes, but will take sometime since I have moved to a different project.