Auto Redirect for login

[dmccolloughOneGas]

Library

• [ ] msal@1.x.x or @azure/msal@1.x.x
• [X] @azure/msal-browser@2.11.0
• [ ] @azure/msal-node@1.x.x
• [ ] @azure/msal-react@1.x.x
• [ ] @azure/msal-angular@0.x.x
• [ ] @azure/msal-angular@1.x.x
• [X] @azure/msal-angular@2.0.0-alpha.6
• [ ] @azure/msal-angularjs@1.x.x

Description

I have followed this repos. In fact. I downloaded the code, added a controller to the API and am making calls to the new controller.

I would like to know if it's possible in the Angular App to not have the user click on a login button to redirect to the Microsoft Login Page?

I have attempted this on my own in the angular app, by doing the following: In the app.component.ts file, in the ngOnInit() method. I added a call to this.login(); above the line this.checkAccount();

The angular app, will auto redirect to the Microsoft Login Page automatically, I can login and it will take me to the default page based on the routing map.

The odd behavior I see is once I'm on the default page if I click the browser refresh button, the page will just automatically start a refresh loop. It will do this refresh until you stop it. When it does this, I see in the console the error thats described in this issue: #3042

I have read through the comments and see where a MsalRedirectComponent has been introduced, would this solve my problem?

If so, can I get a link to a sample that uses the MsalRedirectComponent or the documentation for it? The comments in 3042 mention a linked sample page, but I don't see a link.

I'm attaching my modified sample project for review.

Ideally I do not want the user to have to click a login button to get to the the Microsoft Login Page

Thanks

ModifiedSampleApp.zip

[jo-arroyo]

@dmccolloughOneGas Thanks for your question and for providing your sample app. I will be investigating this issue and will get back to you early next week.

[jo-arroyo]

@dmccolloughOneGas Thanks for sending your sample app. I tried it out and was able to reproduce the issue. Our recommendations are as follows:

1. If you do not want the user to have to hit a login button, one way this can be done is by setting the MsalGuard on your initial page. The MsalGuard will then prompt users to log in before hitting the Init page and the Home page. We would recommend this approach over calling login in the ngOnInit in the app.component.ts.
2. Additionally, as the InitComponent is now protected by the guard, subscribing to the msalSubject$ in the InitComponent will no longer be necessary, and additional code can be removed so the InitComponent's ngOnInit() looks like the following:

   ngOnInit(): void {
   this.router.navigate(['/home']);
   }

3. We would recommend using the MsalRedirectComponent as this will simplify your app and you will not have to call handleRedirectObservable on your pages. Please see this doc for guidance on how it can be bootstrapped.

Please try out our recommendations above, and reach out if you have further questions.

[dmccolloughOneGas]

Thanks @jo-arroyo I'll take a look at it.

[sidyes]

@dmccolloughOneGas Thanks for sending your sample app. I tried it out and was able to reproduce the issue. Our recommendations are as follows:

1. If you do not want the user to have to hit a login button, one way this can be done is by setting the MsalGuard on your initial page. The MsalGuard will then prompt users to log in before hitting the Init page and the Home page. We would recommend this approach over calling login in the ngOnInit in the app.component.ts.
2. Additionally, as the InitComponent is now protected by the guard, subscribing to the msalSubject$ in the InitComponent will no longer be necessary, and additional code can be removed so the InitComponent's ngOnInit() looks like the following:

  ngOnInit(): void {
    this.router.navigate(['/home']);
  }

1. We would recommend using the MsalRedirectComponent as this will simplify your app and you will not have to call handleRedirectObservable on your pages. Please see this doc for guidance on how it can be bootstrapped.

Please try out our recommendations above, and reach out if you have further questions.

Hey @jo-arroyo I was just looking for a solution to automatically login users when entering the application. Calling the login method in ngOnInit leads to some flickering. I also tried your provided solution by adding the MsalGuard for the first route to ensure having an authenticated user.

So my question is: is adding the MsalGuard the best solution for achieving an automated login of a user? If so, it is then necessary to add this guard to all available routes within an application as the user does not hit necessarily the start/landing page but any existing page of the application.

PS: I also had the login in my ngOnInit to achieve this bevavior first.

[jo-arroyo]

@sidyes Yes, our recommendation is to add the MsalGuard to achieve automated login. If you want all your routes to be protected, then yes, you should add the guard to all routes. We will be updating our docs with this guidance.

[rellis-of-rhindleton]

I'm also trying to set this up, and running into problems. My goal is to have all routes in the application protected by MsalGuard. With MSAL 1 this worked if I used an unprotected login-redirect route. With MSAL 2 it hasn't been as clear.

It seems to work if I do all of these:

• bootstrap MsalRedirectComponent
• use an unprotected login-redirect uri which subscribes to handleRedirectObservable
• supply a custom navigation client (otherwise it reloads the page)

I see a BrowserAuthError in the console ("no_token_request_cache_error"), but it doesn't seem to stop login from working.

It seems like this should be simpler. The redirects documentation implies that MsalGuard should be able to handle redirects but it doesn't seem to do so. I'm also confused that I have to use MsalRedirectComponent and subscribe to handleRedirectObservable in login-redirect, that seems redundant, but login fails if I don't do both. Am I supposed to do both or do I have something misconfigured?

I'm not sure exactly what I'm asking here, other than for clear guidance on how to set up an app where all routes (except possibly login-redirect/-failed) are guarded.

[jo-arroyo]

@rellis-of-rhindleton Thanks for the feedback. This seems to be a popular customer ask and we are currently working on updating our documentation with better guidance around this usage. I will link the PR when it is available.

We will also have a fix in the next release that should resolve the BrowserAuthError you are seeing.

[jo-arroyo]

@rellis-of-rhindleton @sidyes Thanks again for your feedback. We have just released a new version of @azure/msal-angular with updated guidance and samples regarding login on app load for path and hash routing, hope this helps. If you are still experiencing issues with this, please try out the new versions and open a new issue with your configuration and usage.

[rellis-of-rhindleton]

Adding an 'auth' path to your routes, setting the MsalRedirectComponent as the component (this route should not be protected by the MsalGuard

/smacksownhead

Of course. Makes sense now. I was doing the right thing, then, but the hard way. Thanks.