auth0-angular: redirectUri does not work properly

Thanks!

Hi @stevehobbsdev, I’m sorry I’m using this closed issue, but it seems that the issue is still there (feel free to tell me to open another issue if you prefer).

I’m facing the same problem of @manast during an authorization code flow login.

While I think it’s important to save a appState before the redirect of the function loginWithRedirect, I’m wondering why the handleRedirectCalllback in the Auth0 service navigates to appState.target (and it chooses to navigate to “/” if the target is undefined):

  private handleRedirectCallback(): Observable<RedirectLoginResult> {  
    return defer(() => this.auth0Client.handleRedirectCallback()).pipe(  
      tap((result) => {  
        const target = result?.appState?.target ?? '/';  
        this.navigator.navigateByUrl(target);  
      })  
    );  
  }  

I think it should be a choice of the application developer. Let me explain my thoughts.

The developer of the application knows what to save before the redirect (loginWithRedirect) and he can put the application state into the “appState” parameter of the loginWithRedirect. The developer has to choose the callback url and he has to configure it in the application setup on auth0.com. After the login with auth0, the browser is redirect to the callback url where the application developer can wait for the result of /oauth/token POST (emit of isAuthenticated$?) and then he can also run some custom logic he developed (for example get some user preferences from a local database). He doesn’t need to have a AuthGuard on the callback route of his application because the custom logic relies on some service which run in a confidential runtime (for example application server or jvm) and the services check if the authorization token is valid before sending back the response. Then the application developer can choose to redirect the user to the homepage of the application or any other page.

What do you think about that? Do you see any error?

Thank you. Gianfelice

@manast Coming back to your use case, will this work for you?

• Set your redirectUri to something other than your homepage our your profile page, perhaps something like https://taskforce.sh/callback
• Set appState.target to your /profile route when calling loginWithRedirect

So:

// app.module.ts
AuthModule.forRoot({
  domain,
  clientId,
  redirectUri: `${window.location.origin}/callback`
});

// Then when you want to log in
auth.loginWithRedirect({
  appState: {
    target: '/profile'
  }
});

Untested, but this should get you what you want without jumping back to your homepage. Your callback page in this case could be blank, or could show a “Please wait while we redirect you” message.

Even if I implement a change to support looking at redirectUri, this won’t work for you if you’re using the AuthGuard on that route and also setting your callback URL to that same route. What will happen, is Auth0 will redirect back to /profile, hit your route, run the auth guard logic but think you’re not logged in yet (because the callback hasn’t been handled) and you will end up back at the login page.

You need a page in between the two things that Auth0 can call, if you don’t want to simply end up on the home page.

Great. In the meantime I will put something together that makes redirectUri work a little more as expected 👍