MSAL js, AAD B2C Multi Factor Authentication, 400 Bad Request, Request header too long

Question

MSAL js Version: v0.2.4;
Chrome Version: 79.0.3945.88 (Official Build) (64-bit)

1. From the various post It is understood that due to cookies piled up, we are seeing '400 Bad Request - Request header too long', But it is not happening in all my developer environments. I would like to know, why it is not with local environments (running from VS Code) but in deployed environments(Azure App Service)

2. I can update the MSAL package to latest version, but at the same time previously it was working fine in deployed environments but not now, why?

3. Is there any connection with scope error message (AADB2C90055) with 'Bad Request - Request header too long' ?

AADB2C90055: The scope 'openid profile' must specify resource

Any sort of information will be useful to me or other folks, and thanks in advance

Here is the Code being used in My App,

let userAgentApplication: Msal.UserAgentApplication;

const createAuthorityUrl = (tenantId: string, policy: string) => {
  return `https://${tenantId}.b2clogin.com/tfp/${tenantId}.onmicrosoft.com/${policy}`;
};

export const b2cLogin = (config: B2CConfig) => {
  const msalAppConfig = {
    cacheLocation: 'localStorage',
    redirectUri: `${location.protocol}//${location.host}`,
    navigateToLoginRequestUrl: false,
    storeAuthStateInCookie: true,
    validateAuthority: false,
  };

  const { clientId, tenantId, myb2cSigninPolicy, myb2cPasswordResetPolicy } = config;

  return new Promise(resolve => {
    let handlingPasswordReset = false;
    const app = new Msal.UserAgentApplication(
      clientId,
      createAuthorityUrl(tenantId, myb2cSigninPolicy),
      (errorDesc: string, token: string) => {
        if (errorDesc && errorDesc.indexOf('AADB2C90118') > -1) {
          // user forgot password
          // https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp/issues/9#issuecomment-347556074
          handlingPasswordReset = true;
          new Msal.UserAgentApplication(
            clientId,
            createAuthorityUrl(tenantId, myb2cPasswordResetPolicy),
            () => null,
            msalAppConfig,
          ).loginRedirect();
        }        
        return resolve(token);
      },
      msalAppConfig,
    );

    if (!handlingPasswordReset) {
      userAgentApplication = app;
    }


    // Seems that MSAL's acquireTokenSilent() won't resolve if run within an iframe
    if (window.parent !== window) {
      return resolve('');
    }
    if (!userAgentApplication.isCallback(location.hash)) resolve(getAccessToken());    
  });
};

export const getAccessToken = async (): Promise<string> => {  
  if (!userAgentApplication) {
    throw new Error('getAccessToken attempted before authentication initialized');
  }
  try {
    return await userAgentApplication.acquireTokenSilent(['openid']);
  } catch (error) {
    console.log(error);
    return '';
  }
};

Answer 1

The error HTTP 400: Size of header request is too long generally happens because there's too many cookies or cookies that are too big.

reference:

Azure Portal: Bad Request - Request Too Long