question

NagarjunaAravapalliCapgeminiAmeric-9827 avatar image
0 Votes"

Getting BrowserAuthError: interaction_in_progress: Interaction is currently in progress


Hello,
I have an App Registration which supports 'All Microsoft account users'. I have tried to login from my Angular application with 3 types
of login accounts.

  >     1. Microsoft tenant users - Successfully logging-in
  >     2. Microsoft Personal account users i.e. hotmail/outlook.com accounts - Successfully logging-in
  >     3. Other organization accounts. - Getting BrowserAuthError: interaction_in_progress: Interaction is currently in progress

![enter image description here][1]

     Inside app.module.ts file
         const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1; // Remove this line to use Angular Universal
         export function loggerCallback(logLevel: LogLevel, message: string) {
           //console.log(message);
         }
         export function MSALInstanceFactory(): IPublicClientApplication {
           return new PublicClientApplication({
             auth: {
            
               clientId: authConfig.clientId,
               authority: authConfig.authority,
               redirectUri: authConfig.redirectUri,
             },
             cache: {
               cacheLocation: BrowserCacheLocation.LocalStorage,
               storeAuthStateInCookie: isIE, 
             },
             system: {
               loggerOptions: {
                 loggerCallback,
                 logLevel: LogLevel.Info,
                 piiLoggingEnabled: false
               }
             }
           });
         }
        
        
         export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
           const protectedResourceMap = new Map<string, Array<string>>();
           // protectedResourceMap.set(authConfig.graphEndpoint, ['user.read']);
           protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
            
           protectedResourceMap.set(`${environment.API_URL}*/*`, authConfig.consentScopes);
            
           return {
             interactionType: InteractionType.Redirect,
             protectedResourceMap
           };
         }
            
         export function MSALGuardConfigFactory(): MsalGuardConfiguration {
           return {
             interactionType: InteractionType.Redirect,
             authRequest: {
               scopes: ['user.read']
             }//,
             //loginFailedRoute: '/login-failed'
           };
         }
    
 async ngOnInit(): Promise<void> {
     this.isIframe = window !== window.parent && !window.opener; // Remove this line to use Angular Universal
     this.setLoginDisplay();
    
     this.msalBroadcastService.inProgress$
       .pipe(
         filter((status: InteractionStatus) => status === InteractionStatus.None),
         takeUntil(this._destroying$)
       )
       .subscribe(() => {
         this.setLoginDisplay();
         this.checkAndSetActiveAccount();
       })
         
   }
   checkAndSetActiveAccount(){
     /**
      * If no active account set but there are accounts signed in, sets first account to active account
      * To use active account set here, subscribe to inProgress$ first in your component
      * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
      */
     let activeAccount = this.authService.instance.getActiveAccount();
    
     if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
       let accounts = this.authService.instance.getAllAccounts();
       this.authService.instance.setActiveAccount(accounts[0]);
     }
   }
    
   loginRedirect() {
     if (this.msalGuardConfig.authRequest){
       this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
     } else {
       this.authService.loginRedirect();
     }
   }
    
   loginPopup() {
     if (this.msalGuardConfig.authRequest){
       this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest)
         .subscribe((response: AuthenticationResult) => {
           this.authService.instance.setActiveAccount(response.account);
         });
       } else {
         this.authService.loginPopup()
           .subscribe((response: AuthenticationResult) => {
             this.authService.instance.setActiveAccount(response.account);
       });
     }
   }
    
   logout(popup?: boolean) {
     if (popup) {
       this.authService.logoutPopup({
         mainWindowRedirectUri: "/"
       });
     } else {
       this.authService.logoutRedirect();
     }
   }
    
   ngOnDestroy(): void {
     this._destroying$.next(undefined);
     this._destroying$.complete();
   }
    
 Inside app.component.ts file
    
  setLoginDisplay() {
     this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
   }
    
  this.msalBroadcastService.inProgress$
       .pipe(
         filter((status: InteractionStatus) => status === InteractionStatus.None),
         takeUntil(this._destroying$)
       )
       .subscribe(() => {
         this.setLoginDisplay();
         this.checkAndSetActiveAccount();
       })
    
 checkAndSetActiveAccount(){
     /**
      * If no active account set but there are accounts signed in, sets first account to active account
     
    
     * To use active account set here, subscribe to inProgress$ first in your component
      * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
      */
     let activeAccount = this.authService.instance.getActiveAccount();
    
     if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
       let accounts = this.authService.instance.getAllAccounts();
       this.authService.instance.setActiveAccount(accounts[0]);
     }
   }
    
   loginRedirect() {
     if (this.msalGuardConfig.authRequest){
       this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
     } else {
       this.authService.loginRedirect();
     }
   }
    
   loginPopup() {
     if (this.msalGuardConfig.authRequest){
       this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest)
         .subscribe((response: AuthenticationResult) => {
           this.authService.instance.setActiveAccount(response.account);
         });
       } else {
         this.authService.loginPopup()
           .subscribe((response: AuthenticationResult) => {
             this.authService.instance.setActiveAccount(response.account);
       });
     }
   }
    
      
    
     logout(popup?: boolean) {
         if (popup) {
           this.authService.logoutPopup({
             mainWindowRedirectUri: "/"
           });
         } else {
           this.authService.logoutRedirect();
         }
       }
        
       ngOnDestroy(): void {
         this._destroying$.next(undefined);
         this._destroying$.complete();
       }
        
       setLoginDisplay() {
         this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
       }

We are using same config and everything is same for all the login authentications. But only for organization accounts its showing this error. Please advice as I am new to the authentication in Angular



azure-active-directoryazure-ad-msal
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

0 Answers