MSAL redirect to the page starting the login flow

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Other... Please describe:

Browser:

Chrome version 76.0.3809.100 (Official Build) (64-bit)
Firefox version XX
IE version XX
Edge version XX
Safari version XX

Library version


Library version: 0.1.3

Current behavior

When using the [MsalGuard], the application does not redirect to the component after the login.

The route configuration is: { path: 'profile', component: ProfileComponent, canActivate : [MsalGuard] },

The import of the route module is using {useHash:true}

The markup for the navigation link:

<a [routerLink]="['../', 'profile']">Profile</a>

When clicking the link, the application gets redirected to the MS login page and I’m able to login in there, however, the application redirects to “https://url/#id_token=…”

and the application throws the following error message:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'id_token'
Error: Cannot match any routes. URL Segment: 'id_token'
    at ApplyRedirects.noMatchError (apply_redirects.ts:112)
    at CatchSubscriber.eval [as selector] (apply_redirects.ts:89)
    at CatchSubscriber.error (catchError.ts:132)
    at MapSubscriber.Subscriber._error (Subscriber.ts:143)
    at MapSubscriber.Subscriber.error (Subscriber.ts:113)
    at MapSubscriber.Subscriber._error (Subscriber.ts:143)
    at MapSubscriber.Subscriber.error (Subscriber.ts:113)
    at MapSubscriber.Subscriber._error (Subscriber.ts:143)
    at MapSubscriber.Subscriber.error (Subscriber.ts:113)
    at ThrowIfEmptySubscriber.Subscriber._error (Subscriber.ts:143)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at eval (zone.js:913)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (ng_zone.ts:262)
    at ZoneDelegate.invokeTask (zone.js:422)
    at Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

The error message is correct, there is no route for that. What I’m wondering is, how is the sample app doing this? I ported the sample app to Angular 8 to ensure that it’s not something angular related. In the angular sample app this redirection does work. So, my question is:

What do I need todo so that the application redirects to the correct angular route after login?

Expected behavior

After successfull login the application redirects to the route which initiated the login.

Minimal reproduction of the problem with instructions

I create a demo on Stackblitz: https://stackblitz.com/edit/angular-msal-demo

Issue Analytics

State:
Created 4 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

2reactions

SvenLauterbachcommented, Aug 20, 2019

Ok, I got it, all what was missing was injecting the MsalService into the AppComponent, since MsalService inherits from UserAgentApplication.

import { Component } from '@angular/core';
import { MsalService} from "@azure/msal-angular";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private authService : MsalService)
  {
  }
}

0reactions

SvenLauterbachcommented, Aug 20, 2019

@jasonnutter Thanks for your answer. When adding this route I get redirected to the home component after the successfull login, but I should get redirected to the profile component. The source code you’re linking also redirects to an ErrorComponent.

I tried to debug the problem a little bit further. I saw that the MsalGuard saves the route which it is protecting to the localStorage before redirecting to the MS login page (here)

The UserAgentApplication seems than to be responsible for redirecting to this saved route after receiving the MS login response. This class is not called in my demo project, but in the msal-angular sample app.