Angular router.navigate not working inside a subscribe of acquireTokenSilent or loginPopup

[pjr1ga]

Issue

Please provide us with the following information:

This issue is for the sample

    - [x ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ]   4) Deploy to Azure Storage and App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a multi-tenant web API

This issue is for a

    - [x ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

In the angular project I´m working I´m migrating to use the MsalService. I have already working and the pop up appears, and it gives back a successful response. I have the below code:

      this.msalService.loginPopup().subscribe(
        (response: AuthenticationResult)=>{
          console.log(response);
          this.isLoginInProcess=false;
          this.msalService.instance.setActiveAccount(response.account);
           this.router.navigate(['/theRouteIWantToOpen']);
        }
      );

At the end of the login I want to open the route: theRouteIWantToOpen however that it is not happening, the route keeps being the http://localhost:4200/
I tried to check if an error was happening by adding a "then" after the call of navigate, and added a console.log on the sucess response, and it indeed goes to the flow of expected successful response, but the router does goes to the theRouteIWantToOpen.

The same happened when there is an active account, and I try to call the acquireTokenSilent to validate the access.

this.msalService.acquireTokenSilent(request).toPromise().then(
      (result)=>{
        console.log("Success acquiring token");
        this.router.navigate(['/theRouteIWantToOpen']);
      }
    ).catch((error)=>{
      console.log("ERROR aquiring token");
      this.router.navigateByUrl('/login');
    });

Nothing happens on success.

A msalGuard is not configured, a custom guard is configured.

Any log messages given by the failure

There are no error messages, the last messages are:

[Wed, 01 Mar 2023 20:52:42 GMT] : @azure/msal-browser@2.33.0 : Info - Emitting event: msal:acquireTokenSuccess
msal-config.ts:25 [Wed, 01 Mar 2023 20:52:42 GMT] : @azure/msal-browser@2.33.0 : Verbose - Emitting event to callback e4bee3fb-5b51-4c92-a061-5de8b50f84e6: msal:acquireTokenSuccess
msal-config.ts:25 [Wed, 01 Mar 2023 20:52:42 GMT] : [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx] : @azure/msal-browser@2.33.0 : Verbose - PerformanceClient: Measurement found for acquireTokenSilent
msal-config.ts:25 [Wed, 01 Mar 2023 20:52:42 GMT] : [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx] : @azure/msal-browser@2.33.0 : Verbose - PerformanceClient: Submeasurement for acquireTokenSilent already exists for standardInteractionClientGetDiscoveredAuthority, ignoring
msal-config.ts:25 [Wed, 01 Mar 2023 20:52:42 GMT] : [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx] : @azure/msal-browser@2.33.0 : Verbose - PerformanceClient: Emitting performance events

Expected/desired behavior

navigate to other route once the popup login is finished or when the token was acquired silently in the first login

Library version

"@angular/core": "~10.1.0",
"@azure/msal-angular": "^2.0.2",
"@azure/msal-browser": "^2.16.0",

Browser and version

Chrome Version 109.0.5414.120 (Official Build) (64-bit)

[derisen]

@pjr1ga possibly a race condition is occurring here, let me try to reproduce this and get back to you. In the meantime, you can perhaps make use of the Events API to do the navigation after the LOGIN_SUCCESS or the ACQUIRE_TOKEN_SUCCESS events fire here.

[pjr1ga]

@derisen Here is the content of my package.json, I´m forcing the install of some dependencies, and today I´ll check if it could be the reason. Thanks for your help.

{
"name": "portal",
"version": "0.1.0",
"scripts": {
"ng": "ng",
"start": "node serve --host 0.0.0.0 --poll 500",
"build": "ng build --prod",
"build-develop": "ng build --prod --configuration develop --base-href=/portal/",
"build-quality": "ng build --prod --configuration quality --base-href=/portal/",
"local-deployment-dev": "ng build --prod --configuration develop && node prod-server/app.js",
"local-deployment-qa": "ng build --prod --configuration quality && node prod-server/app.js",
"local-deployment-prod": "npm run build && node prod-server/app.js",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-material-components/color-picker": "^4.0.1",
"@angular/animations": "~10.1.0",
"@angular/cdk": "^8.2.3",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/material": "^8.2.3",
"@angular/material-moment-adapter": "^8.2.3",
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"@azure/msal-angular": "^2.0.2",
"@azure/msal-browser": "^2.16.0",
"@fortawesome/angular-fontawesome": "^0.7.0",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-regular-svg-icons": "^5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@ng-select/ng-select": "^5.0.6",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^4.0.0",
"angular-file-uploader": "^7.1.1",
"angular-oauth2-oidc": "^10.0.3",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"crypto-js": "^3.1.9-1",
"express": "^4.17.1",
"hammerjs": "^2.0.8",
"idle-user": "file:./custom_modules/user-idle",
"ng2-charts": "^2.4.2",
"ngx-material-file-input": "^2.0.0",
"permission-directive": "file:./custom_modules/permission-directive",
"rxjs": "~6.6.3",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1001.0",
"@angular/cli": "~10.1.0",
"@angular/compiler-cli": "~10.1.0",
"@angular/language-service": "~10.1.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"idle-user": "file:./custom_modules/user-idle",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"permission-directive": "file:./custom_modules/permission-directive",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}

[pjr1ga]

Hello. I tried by using the msalBroadcastService in the appComponent , however the result was the same. The router does not navigate to the desired route.
On the other hand I started a project from scratch and the router successfully moved to the desired route, once the token was acquired silently, so I´m suspecting it could be something related with the dependencies of the project.
The test project has the below dependencies

"dependencies": {
    "@angular/animations": "~10.1.6",
    "@angular/common": "~10.1.6",
    "@angular/compiler": "~10.1.6",
    "@angular/forms": "~10.1.6",
    "@angular/core": "~10.1.6",
    "@angular/platform-browser": "~10.1.6",
    "@angular/platform-browser-dynamic": "~10.1.6",
    "@angular/router": "~10.1.6",
    "@azure/msal-angular": "^2.0.2",
    "@azure/msal-browser": "^2.16.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.7",
    "@angular/cli": "~10.1.7",
    "@angular/compiler-cli": "~10.1.6",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }

[pjr1ga]

Hello.
I analyzed the code, and debugged to search another call to navigate or navigateByUrl at the same time, and only one call to those methods is triggered when the token was acquired.
I´ll keep digging.

[derisen]

@pjr1ga I can reproduce this. As I mention this is most likely a race condition as msal tries to process the hash in url while the router tries to navigate. You might have to wait for inProgress observable to become none before trying to navigate to another route.

Did you had a chance to try using the events API yet? Something like this would be a better alternative for what you are aiming to do:

ngOnInit(): void {
      this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
          const payload = result.payload as AuthenticationResult;
          this.authService.instance.setActiveAccount(payload.account);
          this.router.navigate(['/theRouteIWantToOpen']);
      });
}

[pjr1ga]

Hello.
Yes, I already tried to use the msalBroadcastService and the result was the same, the router did't navigate to other route.

[derisen]

@pjr1ga ok, are you using a hash or path location strategy? what does your msal configuration looks like?

[pjr1ga]

Hello.
The msal config is shown below:

export const msalConfig: Configuration = {
    auth: {
        clientId: environment.azureConfigData.cliendId,
        authority: environment.azureConfigData.authority,
        redirectUri: environment.azureConfigData.redirectUri,
        postLogoutRedirectUri:environment.azureConfigData.postLogoutRedirectUri,
        navigateToLoginRequestUrl: true 
    },
    cache:{
        cacheLocation: BrowserCacheLocation.LocalStorage,// Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: isIE // Set this to "true" if you are having issues on IE11 or Edge
    },
    system:{
        loggerOptions: {
            loggerCallback(LogLevel: LogLevel, message: string){
                console.log(message);
            },
            logLevel: LogLevel.Verbose,
            piiLoggingEnabled: false
        }
    }
}

We´re using path as location strategy.

[pjr1ga]

I´m closing this issue, as the root cause was a nested call to the backend that was not documented and prevented to get user details from the backend server. Therefore, because of the missing data the guard prevented the navigation.