Why does msal-angular `loginPopup` pop ups it's own page when I am using Azure static web app

Question

When I call MsalService.loginPopup of "msal-angular", it's own page is popuped like this.

This happens when while I am signed in from customain, and tried to sign in from default domain(which is published from Azure Static Web App)

import { Inject, Injectable } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { LOGIN_REQUEST_TOKEN, LoginRequest, TOKEN_REQUEST_TOKEN, TokenRequest } from './config';
import { defer, from, Observable, of } from 'rxjs';
import { AuthResponse } from 'msal';
import { isIE } from './isIE';

export function checkClientLogin(): boolean {
    return !!localStorage.getItem('isLogin');
}

const extraScopesToConsent = [ 'user.read', 'openid', 'profile' ];

@Injectable()
export class MsalAuthService {

    constructor(
        private msalService: MsalService,
    ) {
    }

    login(): Observable<AuthResponse> {
        return defer(() => {
            if (isIE) {
                return this.msalService.loginRedirect({extraScopesToConsent});
            } else {
                return from(this.msalService.loginPopup({extraScopesToConsent}));
            }
        });
    }

}

Answer 1

When you are using msal-angular in your code and authenticate yourself another popup will appear to redirect you to login.microsoftonline.com. As mentioned in your code it is declared when there is a need to pop up and when there is a need to redirect.

Azure Static apps supports loginPopUp with model Dialog. Learn more about Azure Static Web App and Model Dialog:

https://docs.microsoft.com/en-us/azure/static-web-apps/

https://docs.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devops

Answer 2

This is a knowing issue you can follow some solutions in this link: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/174

Basically, you will need to close it using some code like this:

if (window.opener && window.opener !== window) {
  // you are in a popup
  isPopup = true;
}
this.router.events.subscribe(event => {
  if (event instanceof NavigationStart) {
    if (location.hash.includes("id_token")
    || location.hash.includes("access_token")
    || isPopup) {
      // this will close MS login popup
      let config: Configuration = {
        auth: {
          clientId: this.configService.environment.clientId,
          authority: this.configService.environment.authority,              
        }
      };
      new UserAgentApplication(config).loginPopup().then(response => {
        window.close();
      });
    }
  }
})

You can put it in the constructor of app.component.ts