Auth0 redirect is not working properly, Angular automatically redirects to base route

I’m trying to set up Auth0 with my Angular app, however when Auth0 redirects back to my Angular app after successful authentication it tries to redirect to http://localhost:4200/tracker?code=fK0frbSIkXuHAE28&state=cjc4WHdUSnU4U0pSeDlwMjc3c3NJZ0MxcGpsZ3dwX2h2eX42dEJacDJCWg%3D%3D

This page isn’t allowed to load and then almost instantly redirects back to http://localhost:4200

If I try to manually navigate to http://localhost:4200/tracker?code=fK0frbSIkXuHAE28&state=cjc4WHdUSnU4U0pSeDlwMjc3c3NJZ0MxcGpsZ3dwX2h2eX42dEJacDJCWg%3D%3D, the app will again force the browser back to http://localhost:4200

However if I try to manually navigate to http://localhost:4200/tracker?code=fK0frbSIkXuHAE28&, without the state parameter in the URL, angular allows the route to activate

I have Auth0 set up so that it will automatically redirect to http://localhost:4200/tracker after Authentication, but this redirect being caused by angular is breaking the authentication flow.

I can see that separate navigation events are being raised by the router, so it’s obviously Angular causing the redirect.

What are these “code” and “state” parameters that are coming back with the redirect?

Do I need to specifically state the params that are expected by the route or something? Why is it automatically preventing the route from activating?

NavigationStart {id: 1, url: "/tracker?code=fK0frbSIkXuHAE28&state=cjc4WHdUSnU4U…SeDlwMjc3c3NJZ0MxcGpsZ3dwX2h2eX42dEJacDJCWg%3D%3D", navigationTrigger: "imperative", restoredState: null}
    id: 1
    navigationTrigger: "imperative"
    restoredState: null
    url: "/tracker? 
__proto__: RouterEvent

core.js:27910 Angular is running in development mode. Call enableProdMode() to enable production mode.

NavigationStart {id: 2, url: "/", navigationTrigger: "imperative", restoredState: null}
    id: 2
    navigationTrigger: "imperative"
    restoredState: null
    url: "/"
__proto__: RouterEvent


It seems I’ve found the answer to my question in this thread: Redirect URI issue after successful login with @auth0/auth0-angular

The solution was to add appState: { target: "/url" } as a parameter to the call to loginWithRedirect method.

I’ve tried this, and it works correctly.

This is really something that should be mentioned in your docs and in the Angular Quickstart and Angular Complete Guide. It’s very confusing for someone new to Auth0 and I believed it was an Angular issue, so I was looking at completely the wrong places for a solution.

I’d like to ask, given that the Auth0 SDK will redirect the user to the base route of their application regardless of the value of the redirect_url option in the call to loginWithRedirect, what is actually the point of this option? Is it so that the developer can add extra logic to a particular route and have Auth0 redirect to that route to execute the login after authentication? Or perhaps another reason?

I’m just curious why it exists as it’s confusing to expect the SDK to redirect to the supplied URL, when that doesn’t actually happen.