Problem with angular login if compiled with --base-href

I downloaded and ran auth0-angular-samples/01-Login All login/logout and reload scenarios worked as advertised.

In particular, if logged in and looking at localhost:3000/profile, and I do a reload in the browser, I am automatically logged back in and returned to the same place.

I wanted to set up the compiled angular client to run in localhost/login-demo so that it was not running in the root directory of my web server, which means building it with the --base-href option. But before doing that I had to change the auth-service.ts code. First, in order for the code to know the base-href, I injected the LocationStrategy as follows

private locationStrategy: LocationStrategy

and then in places where a redirect_uri was configured, I changed

${window.location.origin}

${window.location.origin}${this.locationStrategy.getBaseHref()}

I built the application with (I’m using bash on windows, so this works)

ng build --prod --base-href //login-demo\\

and finally deployed to the /login-demo directory on my web server.

In the browser if I go to localhost/login-demo. The app comes up properly. I can log in, navigate to the profile and log out all fine. When not logged in, I can navigate straight to localhost/login-demo/profile and I will, as expected, be redirected to the login page and when login completes I will be in the right place. So, this is all good.

All good until, very specifically, I try to re-load a page when already logged in. In this specific scenario I get a 400 status error on the call

https://dev-8hdwaaeq.auth0.com/authorize?client_id=…

Stranger still, after 60 seconds, I get routed to /localhost/login-demo which comes up fine, without me logged in. If I then click the login button, I get the same 400 status error and the client screen is locked.

Most strange is that 60 seconds after that, without me having logged in, I am returned to the the site, logged in!

Resolved. Error message on the server was:

"The specified redirect_uri 'http://localhost/login-demo/' does not have a registered origin."

I had white-listed both http://localhost/login-demo/ and http://localhost/login-demo, but of course, neither of those was correct, and I needed to white-list only http://localhost.

The reason everything worked at localhost:3000 was that I had done the white-list properly.

Live and learn.

Glad you have it working and thanks for sharing with the rest of community!