BrowserAuthError: interaction_in_progress: Interaction is currently in progress.

Core Library

@azure/msal-browser

Core Library Version

2.14.0

Wrapper Library

@azure/msal-angular

Wrapper Library Version

2.0.0-beat-5

Description

While trying to do a query for https://graph.microsoft.com/v1.0/me on component init it throws “BrowserAuthError: interaction_in_progress: Interaction is currently in progress.” in redirect flow while pop-up flow works as expected without any problem.

Error Message

ERROR Error: Uncaught (in promise): BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API. For more visit: aka.ms/msaljs/browser-errors. BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API. For more visit: aka.ms/msaljs/browser-errors. at BrowserAuthError.AuthError [as constructor] (index.es.js:528) at new BrowserAuthError (index.es.js:7239) at Function.push.u8tD.BrowserAuthError.createInteractionInProgressError (index.es.js:7306) at PublicClientApplication.push.u8tD.ClientApplication.preflightInteractiveRequest (index.es.js:11077) at PublicClientApplication.<anonymous> (index.es.js:10316) at step (index.es.js:75) at Object.next (index.es.js:56) at index.es.js:49 at new ZoneAwarePromise (zone-evergreen.js:1387) at __awaiter (index.es.js:45) at resolvePromise (zone-evergreen.js:1213) at new ZoneAwarePromise (zone-evergreen.js:1390) at __awaiter (index.es.js:45) at PublicClientApplication.push.u8tD.ClientApplication.acquireTokenRedirect (index.es.js:10301) at MsalService.acquireTokenRedirect (azure-msal-angular.js:42) at MsalInterceptor.acquireTokenInteractively (azure-msal-angular.js:351) at CatchSubscriber.selector (azure-msal-angular.js:324) at CatchSubscriber.error (catchError.js:27) at subscribeToPromise.js:8 at ZoneDelegate.invoke (zone-evergreen.js:372)

Msal Logs

No response

MSAL Configuration

import { MsalGuardConfiguration, MsalInterceptorConfiguration } from "@azure/msal-angular";
import { IPublicClientApplication, PublicClientApplication, BrowserCacheLocation, LogLevel, InteractionType } from "@azure/msal-browser";


export class MSALConfiguration {
  // this is is only for IE11 support. In case we do not want to support IE we can remove this.
  static isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;

  public static MSALInstanceFactory(): IPublicClientApplication {
    return new PublicClientApplication({
      auth: {
        clientId: 'c0509186-e1f9-4bd4-a07a-c1a7b98b26eb', // Test application id
        authority: 'https://login.microsoftonline.com/common',
        redirectUri: 'https://localhost:8080/user'
      },
      cache: {
        cacheLocation: BrowserCacheLocation.LocalStorage,
        storeAuthStateInCookie: this.isIE, // set to true for IE 11. Remove this line to use Angular Universal
      },
      system: {
        loggerOptions: {
          logLevel: LogLevel.Info,
          piiLoggingEnabled: false
        }
      }
    });
  }

  public static MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
    const protectedResourceMap = new Map<string, Array<string>>();
    protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
    return {
      interactionType: InteractionType.Redirect,
      protectedResourceMap
    };
  }

  public static MSALGuardConfigFactory(): MsalGuardConfiguration {
    return {
      interactionType: InteractionType.Redirect,
      authRequest: {
        scopes: ['user.read']
      },
      loginFailedRoute: '/login-failed'
    };
  }
}

Relevant Code Snippets

"app.Module.ts"
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {
  MsalBroadcastService,
  MsalGuard,
  MsalInterceptor,
  MsalModule,
  MsalRedirectComponent,
  MsalService,
  MSAL_GUARD_CONFIG,
  MSAL_INSTANCE,
  MSAL_INTERCEPTOR_CONFIG
} from '@azure/msal-angular';

import { UserInformationComponent } from './user-information/user-information.component';
import { ActivateLicenceComponent } from './activate-licence/activate-licence.component';
import { InvalidLoginComponent } from './invalid-login/invalid-login.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MSALConfiguration } from './Common/MSAL-Config';

@NgModule({
  declarations: [
    AppComponent,
    UserInformationComponent,
    ActivateLicenceComponent,
    InvalidLoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MsalModule,
    HttpClientModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALConfiguration.MSALInstanceFactory
    },
    {
      provide: MSAL_GUARD_CONFIG,
      useFactory: MSALConfiguration.MSALGuardConfigFactory
    },
    {
      provide: MSAL_INTERCEPTOR_CONFIG,
      useFactory: MSALConfiguration.MSALInterceptorConfigFactory
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

"user component"
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import Swal from 'sweetalert2';

const GRAPH_ENDPOINT = 'https://graph.microsoft.com/v1.0/me'; //

class ProfileType {
  givenName?: string;
  surname?: string;
  mail?: string
  userPrincipalName?: string;
  id?: string;
}

@Component({
  selector: 'app-user-information',
  templateUrl: './user-information.component.html',
  styleUrls: ['./user-information.component.css']
})
export class UserInformationComponent implements OnInit {

  storeToken = '';

  constructor(private http: HttpClient, private route: ActivatedRoute) { }
  profile = new ProfileType();
  isRequestInProgress = false;
  ngOnInit(): void {
    this.route.queryParams
      .subscribe(params => {
        console.warn(params); // token param
        this.storeToken = params.token;
        // console.warn(this.storeToken); // sample token value
      }
      );
    this.getProfile();
  }

  getProfile() {
    this.http.get<ProfileType>(GRAPH_ENDPOINT)
      .subscribe(profile => {
        this.profile = profile;
      });
  }

  activateSubscription(): void {

    this.isRequestInProgress = true;
    const options = {
      headers: new HttpHeaders().append('Content-Type', 'application/json'),
    }

    this.http.post("https://localhost:44386/api/Fulfilment/activate", JSON.stringify(this.storeToken), options).subscribe(
      (data) => {
        this.isRequestInProgress = false;
        console.log(data);
        if (data) {
          Swal.fire({
            icon: 'info',
            title: 'Activated',
            position: 'center',
            heightAuto: false,
            text: 'You subscription has been activated. You can now close this window',
          })
        }
      },
      (err) => {
        this.isRequestInProgress = false;
        console.log(err);
        if (err instanceof HttpErrorResponse) {
          if (typeof err.error === 'string') {
            Swal.fire({
              icon: 'error',
              title: 'Not Activated',
              position: 'center',
              heightAuto: false,
              text: err.error
            })
          }
          else {
            Swal.fire({
              icon: 'error',
              title: 'Not Activated',
              position: 'center',
              heightAuto: false,
              text: 'Unable to activate subscription.'
            });
          }
        }
      }
    )
  }
}

Reproduction Steps

1. Configure the app with the use of the setting provided in code snippet

Expected Behavior

BrowserAuthError: interaction_in_progress: Interaction is currently in progress. should be thrown and interceptor should handle it

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

No response

Source

External (Customer)