MSAL loginPopup Not Closing in Iframe – Login Not Successful, Error: user_cancelled

We are using the loginPopup method from MSAL (this.msalService.loginPopup) in our Angular application to authenticate users via Azure AD. It works as expected in our local standalone web application.

However, when deployed to our test environment—where the app is embedded inside an iframe from a parent application—the login flow fails:

• The Azure login popup appears.
• After entering valid credentials, the redirect URL opens inside the popup.
• The popup does not close, and the login is not successful.
• Eventually, we see the following error in the browser console:

Plain Text

Login failed: BrowserAuthError: user_cancelled: User cancelled the flow.

Environment Details:

• Angular application using MSAL.js
• Authentication method: loginPopup
• Works in standalone mode
• Fails when loaded in an iframe

Troubleshooting Done:

• Verified redirect URI configuration
• No popup blockers interfering
• No additional console errors apart from the one mentioned

**Question:**Why does the login fail and the popup remain open when the app is loaded inside an iframe? Is there a known limitation or workaround for using MSAL loginPopup in iframe contexts?We are using the loginPopup method from MSAL (this.msalService.loginPopup) in our Angular application to authenticate users via Azure AD. It works as expected in our local standalone web application.

However, when deployed to our test environment—where the app is embedded inside an iframe from a parent application—the login flow fails:

• The Azure login popup appears.
• After entering valid credentials, the redirect URL opens inside the popup.
• The popup does not close, and the login is not successful.
• Eventually, we see the following error in the browser console:

Plain Text

Login failed: BrowserAuthError: user_cancelled: User cancelled the flow.

Environment Details:

• Angular application using MSAL.js
• Authentication method: loginPopup
• Works in standalone mode
• Fails when loaded in an iframe

Troubleshooting Done:

• Verified redirect URI configuration
• No popup blockers interfering
• No additional console errors apart from the one mentioned

**Question:**Why does the login fail and the popup remain open when the app is loaded inside an iframe? Is there a known limitation or workaround for using MSAL loginPopup in iframe contexts?

configuration details :

const msalConfig = {

auth: {

    clientId: 'clientId', // Replace with your Application (client) ID

    authority: 'authority', // Replace with your Tenant ID or common

    redirectUri: 'redirectUri', // Your application's redirect URI

    navigateToLoginRequestUrl: false

  },

  cache: {

    cacheLocation: 'sessionStorage', // or 'sessionStorage'

    storeAuthStateInCookie: false,

  },

  system: {

    loggerOptions: {

      loggerCallback: (level, message, containsPii) => {

        if (containsPii) {

          return;

        }

        console.log(`MSAL Log [${level}]: ${message}`);

      },

      piiLoggingEnabled: false,

    },

    allowRedirectInIframe: true

  },

};

export function MSALInstanceFactory(): PublicClientApplication {

  return new PublicClientApplication(msalConfig);

}

export function MSALInterceptorConfigFactory() {

  return {

    interactionType: InteractionType.Popup, // or Popup

    protectedResourceMap: new Map([

      ['https://graph.microsoft.com/v1.0/me', ['user.read']], // Example protected resource

    ]),

  };

}

export function initializeMsal(msalService: MsalService): () => Promise<void>  {

return () => {

if (!msalInitialized) {

  msalInitialized = true;

  return msalService.instance.initialize()

    .then(() => {

      console.log('MSAL initialized via APP_INITIALIZER');

    })

    .catch((err) => {

      console.error('MSAL initialization failed:', err);

    });

} else {

  console.warn('MSAL already initialized, skipping.');

  return Promise.resolve();

}

};

}

}

{

  provide: MSAL_INSTANCE,

  useFactory: MSALInstanceFactory

},

MsalService,

{

  provide: APP_INITIALIZER,

  useFactory: initializeMsal,

  deps: [MsalService],

  multi: true

},

login call

this.msalService.loginPopup({ prompt: 'login',

  scopes: ['openid', 'email','profile', 'User.Read'],

  redirectUri: 'redirectUri''} as PopupRequest).subscribe({

  next: (result: AuthenticationResult) => {

    console.log('Login successful:', result);

    // set hide flags

    this.eSignToken = result.idToken

    gnToken)

  },

  error: (error) => {

    console.error('Login failed:', error);

     this.processError(error);

  }

});

}

Error as seen in browser console :

at c (BrowserAuthError.mjs:269:12)

at PopupClient.mjs:301:28

at L.<computed> (zone.js:2405:41)

at v.invokeTask (zone.js:406:31)

at Object.onInvokeTask (core.mjs:24197:33)

at v.invokeTask (zone.js:405:60)

at M.runTask (zone.js:178:47)

at invokeTask (zone.js:487:34)

"@azure/msal-angular": "^4.0.12",

"@azure/msal-browser": "^4.13.0",

"@angular/core": "^15.0.2",

opening poup like below code snippet:

this.msalService.loginPopup({ prompt: 'login' } 

Please help us to resolve this issue