Angular router.navigate not working inside a subscribe of acquireTokenSilent or loginPopup about ms-identity-javascript-angular-tutorial HOT 9 CLOSED

@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.

from ms-identity-javascript-angular-tutorial.

@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"
}
}

from ms-identity-javascript-angular-tutorial.

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"
  }

from ms-identity-javascript-angular-tutorial.

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.

from ms-identity-javascript-angular-tutorial.

@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']);
      });
}

from ms-identity-javascript-angular-tutorial.

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

from ms-identity-javascript-angular-tutorial.

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

from ms-identity-javascript-angular-tutorial.

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.

from ms-identity-javascript-angular-tutorial.

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.

from ms-identity-javascript-angular-tutorial.