Angular Redirect Loop

[4lexnz]

Hi Folks,

I’m using Ionic, Angular and Auth0 to make a web app.
I’ve got a problem where my app and auth0 are getting stuck in a redirect loop and I’m not sure why - nor where to start investigating.

I’ve generated starter projects and replaced all the auth0 code I have, with that code - doesn’t fix the problem so I don’t think it’s any interaction between auth0 and angular.

I’ve checked my app config in the auth0 management dashboard and if there is a problem there I haven’t been able to find it.

The only thing I can think of is some weird and unknown interaction between auth0 and ionic 4? Looking at the network requests before the web app refreshes, it could be some weird async race condition where I’m waiting for auth0 credentials to be stored, but an access guard or something isn’t waiting long enough for that to be handled and is redirecting back to auth0 to get more credentials…

Has anyone had a problem like this before? If anyone has any debug pointers or hotspots where things like this can happen I’d be really greatful

Cheers

Alex

[dan.woda]

Hi @4lexnz,

Are you using the Angular quickstart? Can you record a HAR file of the loop and send it to me via a DM?

Thanks,
Dan

[4lexnz]

Updating this thread in case it helps anyone in future,

Here’s what I’ve found so far:

It appears that the Auth0 JS SPA library is making an assumption in it’s default implementation that your app has authenticated, and unauthenticated parts.

This means when you apply an access guard to all parts of the app, we see some tricky behavior where you get stuck in a redirect loop.

You can recreate this yourself with the following:

1. Create new angular application in the Auth0 Dashboard
2. Download the quick start and carry out the steps it asks (setting logout urls, callbacks and such)
3. npm install
4. In app-routing.module.ts add the AuthGuard on 'profile' path to home path like so:

path: '',
component: HomeComponent,
pathMatch: 'full',
canActivate: [AuthGuard]

5. npm start , browse to localhost:3000 and attempt to log in…

I’ve done some further digging, and found this thread also: Angular 8 isAuthenticated race condition

This thread describes the same symptoms that I’m seeing with the above reproduction.
Interestingly, @camden.brown solves this problem here: Angular 8 isAuthenticated race condition - #3 by camden.brown

I’ve gone back to my original app where I saw the redirect issue, made the changes he advises, and can confirm that I don’t see the redirect loop anymore.

This issue has been blocking me for a long time as I tried hard to comb through my application and make sure I had done things correctly. I’m hesitant to call it ‘done’ - but right now I’m feeling reasonable about this fix.

Thanks to @dan.woda for originally talking through the issue with me, and thanks to @camden.brown for updating his question with the answers he found!

[dan.woda]

Thanks for posting a write up of your solution!