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

Help
, ,
1

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

1 Like
2

Hey there!

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

3

Thanks
Greg

4

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

5

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

6

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