javascript - Is there a way to improve the performance of MSAL-browser js login?

Question

I have a single page JavaScript (TypeScript) application hosted on Azure as an app service, and I am using Implicit Flow MSAL authentication with Azure AAD with the @msal-browser npm package to authenticate my users. I have configured my MSAL instance to use login redirect. The login works, but the response is very slow: it takes >7 seconds for my app to receive a response. I have included my MSAL config as a code snipit below.

The handleRedirectPromise promise is triggered several times with a null response before the redirect happens. After the user signs in, they are immediately redirected to the correct URL inside my app, but the promise takes a really long time to resolve. My users are getting frustrated because they think nothing is happening.

Is there a way to improve the performance of the login that doesn't involve using the popup? I tried using the popup version of MSAL, but it is just as slow. I would like my login to be seamless. Go to site, immediate redirect to MS login, redirect back to my site, immediate receipt of login success, and finally app loads on successful authentication.

const cacheLocation: 'localStorage' = 'localStorage';
const msalConfig: Msal.Configuration = {
      auth: {
          clientId: environment.clientId,
          authority: `https://login.microsoftonline.com/${environment.tenant}/`,
          knownAuthorities: [`https://login.microsoftonline.com/${environment.tenant}/`],
          //validateAuthority: true,
          redirectUri: environment.redirectUri,
          navigateToLoginRequestUrl: false,
          postLogoutRedirectUri: environment.postLogoutRedirectUri
      },
      cache: {
          cacheLocation,
          storeAuthStateInCookie: false
      },
      system: {
        loggerOptions: {
          loggerCallback: (level: Msal.LogLevel, message: string, containsPii: boolean): void => {
            console.log(message)
          },
          piiLoggingEnabled: true,
          logLevel: Msal.LogLevel.Verbose 
        }
      }
    };
    this.msalInstance = new Msal.PublicClientApplication(msalConfig);

    this.msalInstance
    .handleRedirectPromise()
    .then((tokenResponse) => { console.log('log in callback')
      if (tokenResponse !== null) {
         <DO THINGS HERE>
      }
    })

Answer 1

You can use ROPC flow to login your MS Account.

Use ROPC, you can send http request to get access_token and id_token.

However, Microsoft does not recommend this method, and other authentication methods will have pop-up windows.

Http Request

Response