Angular 10 app after Auth0 login fails to redirect correctly. Loops forever, query parameters problem

When I added Auth0 authentication I made a post-login route to take me to a component for further work for our app. The full callback route is /apps/post-login.
It authenticates correctly and then it attempts the callback route with query parameters that look like /apps/post-login?code=74jA7CXa2K9cwAXvX&state=Y2x%2BOWOWeERvCnFzRHVieUVGLjI1UDhGRFVLeUcyRDBrM1FPWi56RTNnZg%3D%3D
It then begins a loop going back to the route that calls the Auth0 (“localhost:4200/apps/pre-login”) and back again to post-login.

If I get a new browser tab after login and call /apps/login?code=sfdfd it works and if I call /apps/login?code=sfdfd&stateXX=dfd it works but as soon as I call /apps/login?code=sfdfd&state=dfd it starts the looping again.

When looping, the Component is never reached. When it works with the fudge above, it gets into the Component with ‘post-login works’ message in browser.
So it seems to accept http parameters ok but the combination of code and state in parameters causes the issue.

If I do as the example does and callback to root it works.

Has anyone seen this behavior in their early stages of implementing Auth0?

Thanks

Hey there!

Can you share wit me the link to the doc / quickstart / SDK of ours that you’re using?

Thanks
Greg

The routing module has
const routes: Routes = [
{
path: ‘pre-login’, component: PreLoginComponent,
// loadChildren: () => import(’./login/login.module’).then(m => m.LoginModule)
},
{
path: ‘post-login’, component: PostLoginComponent, canActivate: [AuthGuard],
// loadChildren: () => import(’./login/login.module’).then(m => m.LoginModule)
},

Once you are logged in you can call /apps/post-login and it’s fine. It is found in the route list but if you call /apps/post-login?code=abc&state=xyz
the route is undefined apparently and goes back to the ** url which in my case was /apps/pre-login module which automatically calls auth.loginWithRedirect()

module
import { Component, OnInit } from ‘@angular/core’;
import {AuthService} from ‘@auth0/auth0-angular’;

@Component({
selector: ‘app-pre-login’,
templateUrl: ‘./pre-login.component.html’,
styleUrls: [’./pre-login.component.scss’]
})
export class PreLoginComponent implements OnInit {

constructor(
public auth: AuthService
) { }

ngOnInit(): void {
this.auth.loginWithRedirect();
}

}

Regards

I think I have the solution but not sure why it works in this way and not the other.
If I make the ‘**’ route to the /apps/post-login route and I am not logged in and land on root of app, it will attempt to go to /apps/post-login but AuthGuard will send it via Auth0 login. Once authenticated, it will go to /apps/post-login and you will see for a moment the http params, and then it will go to /apps/post-login without the params and land there.

I think this solves my problem but I don’t see anywhere this explained.

Regards
Greg

Glad to hear that it’s working! I’m not an angular expert but let me research and discuss it and get back to you soon with what I found!

1 Like