Angular Redirect Loop

Help
4

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]
  1. 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!

4 Likes