I’m working on an Angular application that is an ASP .NET Core website for backend. Ie. based from the Angular .NET template.
Because I don’t want the Angular HTML/Javascript to be available to anyone who isn’t logged in, I’ve added authentication to both the server-side and front-end.
So, as soon as you visit the page for the first time, you immediate get redirected by the server-side to Auth0 to login, then you get redirected back to the site. This works fine.
Once logged in (server-side), the client-side then does this in the app.component.ts constructor…
authService.isAuthenticated$.subscribe(value => {
if (!value)
authService.login()
})
Note that for the client-side, I’ve exactly followed these instructions:
https://auth0.com/docs/quickstart/spa/angular2
So ‘authservice’ in my above example, just uses the authservice from that Auth0 quick start page.
The idea behind the above snippet, is that if you get to this point, you’ve already signed in due to the server-side redirect, and the above ‘this.authService.login()’ will only be called the first time, and will redirect to auth0 and immediately back again because you’ve already logged in.
This works fine in Chrome (although, it does redirect to auth0 an additional time than I’d expect). In Firefox though, this continuously redirects back to auth0, back to my site, back to auth0, etc.
I’m guessing I’m approaching this problem in completely the wrong way! Could anyone advise on the best way to solve this issue?
I also tried doing the same, but using the ‘authService.loggedIn’ property. But this then continuously redirects in both Chrome and Firefox!