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

Help
1

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? 
    code=fK0frbSIkXuHAE28&state=cjc4WHdUSnU4U0pSeDlwMjc3c3NJZ0MxcGpsZ3dwX2h2eX42dEJacDJCWg%3D%3D"
__proto__: RouterEvent

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

app.component.ts:14 
NavigationStart {id: 2, url: "/", navigationTrigger: "imperative", restoredState: null}
    id: 2
    navigationTrigger: "imperative"
    restoredState: null
    url: "/"
__proto__: RouterEvent
1 Like
2

Hello,

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.

2 Likes
3

Thank you for linking this! This link also solved my problem and I agree, it would be nice to have in the Quickstart guide, as I am brand new to Auth0 and pretty new to Angular. Appreciate this post!

1 Like
4

Thanks for sharing that feedback. I’ll make sure to relay it to appropriate team!

5

Thanks! it helps me too.

         <button
  *ngIf="(auth.isAuthenticated$ | async) === false"
  (click)="loginWithRedirect({
    appState: { target: '/YOUR-URL' }
  })">
  Log in
</button>
6

Hey I implemented that solution as well, and while it solves the issue, it is not solving it perfectly, as my root path component is still loading for less than a second before the last step redirects to the target url. Is there a way around that, so that it goes directly to the target url instead of going to the root first?

7

Hi,

i am facing the same small issue (root path component is showing for a split second). I found out that you can just match the redirectUri and the targetPath. So for me the redirectUri is “http://localhost:4200/users/dashboard” and the targetPath is “users/dashboard”. I don’t know if thats the optimal way but it seems to work.

Best regards.