Auth0-spa-js: Getting loop when receive “Error on Login” in Angular implementation

[alvarocjunq]

Describe the problem

First of all, I opened the question in the Community too
But I thought this is a bug of the documentation and maybe the full encapsulation of the AuthGuard, because I can not modify in the last version of the lib.

When the user try to do the login, but he have not access, I receive the code 401 (that's normal), but that implementation redirect me to back to the application and my components have Guards, to redirect me to the Login again, the user have no access and redirect back to the application... infinite loop
So, how can I handle this issue? In the last version of the library I have less access to make changes in the Guard, so how can I stop the loop?

(I know in the tutorial, the HomeComponent have no guards, But in my application I don't have components that can be accessed without login, here in the company, the applications works with SSO, if the user is logged, we don't redirect to login again)

What was the expected behavior?

If the user have no access, I want to redirect him to kind a UnauthorizedComponent

Reproduction

To reproduce, is just implement the Angular tutorial as is: https://auth0.com/docs/libraries/auth0-angular-spa
The only difference, it is I don't have components without guards, just 'logged components'

Can the behavior be reproduced using the SPA SDK Playground?

Is not necessary a specific implementation, just the starter one

Environment

Please provide the following:

• Version of auth0-spa-js used: 1.11.0 (the same behavior in 1.3.2)
• Which browsers have you tested in? Chrome and Firefox
• Which framework are you using, if applicable (Angular, React, etc): Angular 10
• Other modules/plugins/libraries that might be involved:

[frederikprijck]

Hey @alvarocjunq ,

Just to be sure, are u using our Angular SDK or not? If that is the case, that repository can be found at https://github.com/auth0/auth0-angular and issues can be reported there. (no need to move it now, we can handle this issue here)
Are you using a specific route for handling the redirect callback or are you being redirected back to the root of your application, being a secure route that uses the AuthGuard?

What I think is occurring is that you are being redirected back to a protected route in your application. However, that will kick in the AuthGuard before being able to process the authentication transaction, resulting in an infinite redirect loop.

The redirectUri should always be a public route in your application (even if the entire application is secure, our SDK needs a public route to be redirected back to). This is because, when redirecting back to the application, we do not have any user information yet. Our SDK first needs to process the URL (code and state arguments) and call Auth0's endpoints again. Once that is successful, the user is considered authenticated.

What you want to be doing is ensure the user is redirected back to a specific, not secured route, e.g. /callback.

• Create a component that will be rendered on /callback (this can be an emty component, or one that shows a loading spinner. It doesn't have to do anything. Our SDK will do everything for u in case u are using our Angular SDK.)
• Configure AuthModule to redirect back to /callback

AuthModule.forRoot({
  domain: 'YOUR_AUTH0_DOMAIN',
  clientId: 'YOUR_AUTH0_CLIENT_ID',
  redirectUri: window.location.origin + '/callback',
})

This should prevent the infinite redirect.

[alvarocjunq]

Tks @frederikprijck for the answer

Yes, I'm using the Angular SDK and I'll test this configuration. Make a lot of sense, Really thanks, I'll test with my team

But this isn't explicitly in the documentation, I think this is essential to configure the library, don't you think?
A creation of a CallbackComponent and the concatenation of the route in redirectUri?

[frederikprijck]

I added an example application here: https://github.com/frederikprijck/auth0-callback

Be sure to replace the domain and clientId in app.module.ts: https://github.com/frederikprijck/auth0-callback/blob/master/src/app/app.module.ts#L20

But this isn't explicitly in the documentation, I think this is essential to configure the library, don't you think?

It is only essential in specific use-cases where the root is protected, but yes I agree we should cover this in the documentation somewhere.

[frederikprijck]

Closing this as I opened a PR to add something to our FAQ in our Angular SDK's repository: https://github.com/auth0/auth0-angular/pull/128