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

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

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 auth0-angular/auth.service.ts at master · auth0/auth0-angular · GitHub).

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.

2 Likes

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).

2 Likes

Thanks for providing that feedback!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.