Auth0 Angular - Cannot match any route

Question

I have an angular application in which I'm trying to integrate with Auth0. I followed these two tutorials:

https://auth0.com/docs/quickstart/spa/angular2/01-login

https://auth0.com/docs/quickstart/spa/angular2/02-calling-an-api

Here is the setup of my project:

AuthService

Copy+Pasted from the first tutorial link

LoginController

export class LoginComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
      this.authService.login();
  }
}

App-Routing Module

const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'profile', component: ProfileComponent, resolve: { queues: ProfileResolver}, canActivate: [AuthGuard]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorService,
      multi: true
    }
  ]
})
export class AppRoutingModule { }

I'm getting logged in successfully, however when auth0 does its callback, it navigates to http://localhost:4200/profile?code=[code]&state=[state], which then Angular throws "Cannot match any routes".

My questions are:

What are the code and state parameters used for?
What should I do to properly handle these so my site can route to /profile properly?

Thanks a bunch!

code parameter is retuned because the application is executing Authorization code flow. state parameter is used to mitigate CSRF attack. https://auth0.com/docs/api-auth/tutorials/authorization-code-grant-pkce https://auth0.com/docs/protocols/oauth2/oauth-state — Tanver Hasan, Mar 13 '20 at 23:33

score 0 · Answer 1 · answered Aug 27 '20 at 16:46

This is a nasty gotcha with auth0-spa-js that caused a big headache for me in production. The issue is describe in this thread. How I solved it was changing the last line of the handleAuthCallback function in the auth service from:

this.router.navigate([targetRoute])

to:

this.router.navigate([name-of-path-you're-redirecting-to]).

Auth0 Angular - Cannot match any route

1 Answers1