angular-oauth2-oidc: Does redirect_uri have to be /index.html?

Question

In the PKCE example of the angular-oauth2-oidc library

https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/code-flow-+-pcke.html

The redirect_uri is

window.location.origin + '/index.html'

Is this important from a security point of view?

When I add the /index.html, I get a Page Not Found error in my app after redirecting from the auth server.

But when I do it like this:

window.location.origin

it works.

Does this have to work with index.html and I am doing something wrong?

Answer 1

Do you ever visit http://yourdomain:yourport/index.html? What happens when you visit this URL? The chances are that it does not exist. In an Angular app all routes serve index.html - that is what a Single Page Application is by definition. Maybe you have a home route - e.g. /home

You should redirect to your home route not index.html.

Basically you want:

window.location.origin + '/home'

Or even better:

constructor(private router: Router) {}

this.router.navigateByUrl('/home')

Redirecting to:

window.location.origin

Is essentially just the domain and port of the current page - e.g. http://yourdomain:yourport - so redirecting is essentially just sending you to your default Angular route. Your default Angular route should be defined in your app routing .ts file. Sometimes there's a "catch all" route in there which I would expect would be picked up if no specific route is defined in the URL.

Basically just visit ... http://yourdomain:yourport ... in the browser. Whatever page you hit is where redirecting to window.location.origin should take you to.

In the docs you link to they say:

URL of the SPA to redirect the user to after login redirectUri: window.location.origin + '/index.html'

This is just an example and should not be hardcoded like this!