how can I force users to use two factor authentication with MSAL angular?

I am trying to implement two-factor sign in using msal-angular, I want to force users to use two factor authentication, preferably Authenticator App.

So far I only managed to configure it the way users only required to enter password.

my settings:

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;


export const protectedResourceMap: [string, string[]][] = [
  ['https://graph.microsoft.com/v1.0/me', ['user.read']]
];


@NgModule({
  imports: [
    CommonModule,
    MsalModule.forRoot({
      auth: {
        clientId: '*******',
        authority: 'https://login.microsoftonline.com/*****/',
        validateAuthority: true,
        redirectUri: 'http://localhost:4200/',
        postLogoutRedirectUri: 'http://localhost:4200/',
        navigateToLoginRequestUrl: true,
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // set to true for IE 11
      },
    },
      {
        popUp: !isIE,
        consentScopes: [
          'user.read',
          'openid',
          'profile',
          'api://**********/access_as_user'
        ],
        unprotectedResources: ['https://www.microsoft.com/en-us/'],
        protectedResourceMap,
        extraQueryParameters: {}
      }
    )
  ],
  declarations: [

  ],
  providers: [
    MsalLoginService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    }
  ]
})
export class MsalLoginModule { }

due to angular version I use msal-angilar@1.1.2 here is my code:

@Injectable({
  providedIn: 'root'
})
export class MsalLoginService {
  loginDisplay = false;

  constructor(
    private broadcastService: BroadcastService,
    private authService: MsalService
  ) {
    this.checkoutAccount();

    this.authService.handleRedirectCallback((authError, response) => {
      if (authError) {
        console.error('Redirect Error: ', authError.errorMessage);
        return;
      }

      console.log('Redirect Success: ', response);
    });

    this.authService.setLogger(new Logger((logLevel, message, piiEnabled) => {
      console.log('MSAL Logging: ', message);
    }, {
      correlationId: CryptoUtils.createNewGuid(),
      piiLoggingEnabled: false
    }));

  }

  checkoutAccount() {
    this.loginDisplay = !!this.authService.getAccount();
  }

  loginPopup(): Observable<any> {
    return new Observable((subscriber) => {

      this.authService.loginPopup({ scopes: ['user.read'], prompt: 'select_account' }).then(res => {
        this.authService.acquireTokenSilent({ scopes: ['user.read'] }).then((response: any) => {
          // send token for validation on server
          subscriber.next(response);
        }).catch(ex => subscriber.error(ex));
      }).catch(ex => subscriber.error(ex));

    });
  }

  logout() {
    this.authService.logout();
  }

}

just in case although I suppose the problem is in the setting in Azure.

Edit: There are several ways to force multi-factor login through the Azure Portal, however most of them are visible only through paid/trial account

Yes, you can force users to use two factor authentication with MSAL angular. Your angular configuration is looking OK. Now you need to recheck your azure configurations. You can configure your settings here.