Microsoft-authentication-library-for-js: MSAL redirect to the page starting the login flow

[SvenLauterbach]

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: - [x] 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: ` Profile ` 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

[jasonnutter]

@SvenLauterbach Does this happen with 0.1.2? Or 0.1.4-beta.1?

[jasonnutter]

I also couldn't get your demo to work, keep getting this error: Can't find package: core-js

[SvenLauterbach]

@jasonnutter Thanks for that quick answer. I've check 0.1.2 and 0.1.4-beta.1, the first has the same issue as 0.1.3 and the beta version did not work (no redirect to the MS login page at all).

I've also update the Stackblitz example:

• Code: https://stackblitz.com/edit/angular-msal-demo
• Application: https://angular-msal-demo.stackblitz.io

I also added localhost (http and https) to the redirect url in azure and upload the source to github:
https://github.com/SvenLauterbach/angular-msal-demo

With npm install and npm run start you can run the example locally.

[jasonnutter]

@SvenLauterbach Thanks, we'll take a look and get back to you.

[jasonnutter]

@SvenLauterbach The sample app includes a routes entry for **, which your app doesn't have. I tried adding an entry for ** and it appear to fix it.

e.g.

{ path: '**', redirectTo: 'home' }

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/samples/MSALAngularDemoApp/src/app/app.routes.ts#L20

[jasonnutter]

Also please try 0.1.4-beta.2 to fix the issue with teh login window not showing up, thanks!

[SvenLauterbach]

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

[SvenLauterbach]

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)
  {
  }
}