Redirect URI issue after successful login with @auth0/auth0-angular

[noragrossman]

Hi there,

I’ve been banging my head against the wall trying to figure out why my Angular app is automatically redirecting to root after momentarily visiting the correct redirectUri upon a successful login.

The flow I have is fairly simple; when a user asks to login, I record the current path in local storage before calling this.authService.loginWithRedirect(). I have my callback URL set to /callback, and a simple CallbackComponent routed to /callback:

@Component({
  selector: 'app-callback',
  templateUrl: './callback.component.html',
  styleUrls: ['./callback.component.scss']
})
export class CallbackComponent implements OnInit {


  constructor() { }

  ngOnInit(): void {
    console.log("In CallbackComponent");
  }
}

After a successful login, however, Auth0 correctly redirects to “/callback” (and prints the console log), but then several milliseconds later the app navigates to “/” no matter what I try. I found this issue that looks to be very similar, but no resolution was posted: Redirect URI problem with Auth0-spa-js and Angular. Any thoughts on what might be going on?

For reference, here is a simplified version of my app-routing.module.ts:

export const routes: Routes = [
  { path: 'callback', component: CallbackComponent },
  { path: '', component: HomePageComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

SDK: @auth0/auth0-angular (v1.2.0)
Angular v9.1.12
Node v15.2.1

[frederik.prijck]

Hi.

It looks like what is happening is expected.
Our Angular SDK is configured to work as follows:

• User initiates login by calling loginWithRedirect
• User is redirected to Auth0, including a redirectUri (in this case /callback)
• User is, after succesful authentication, redirected back to the provided redirectUri (in this case /callback)
• The callback URL is used only to process code and state in order to retrieve an actual token
• The user is then redirected again to /

However, if you want to not be redirected back to / in the very last step, but instead they want the user to end up at a different URL, they can do so by providing that information to loginWithRedirect() :

loginWithRedirect({
  appState: { target: '/some-url' }
})

By doing that, in the very last step the SDK will not redirect the user back to / , but to /some-url instead (see https://github.com/auth0/auth0-angular/blob/master/projects/auth0-angular/src/lib/auth.service.ts#L299).

I record the current path in local storage before calling this.authService.loginWithRedirect()

There is no need for doing this. If you provide that route to { appState: { target: ''}}, our SDK will store it in Session Storage for you.

[noragrossman]

This is perfect, thanks so much! It would be great to get this added to the documentation somewhere, because I was definitely misunderstanding the purpose of redirectUri (specifically the last two bullet points you stated).

[konrad.sopala]

Thanks for providing that feedback!