Auth0 Home Blog Docs

How to implement a no-redirection strategy in an Angular app?

angular
spa
redirect

#1

We have implemented Auth0 in our Angular app, and are surprised that for new users entering our app we have to load Angular, move to a different site, then reload Angular again on the callback step. Of course, when the token hasn’t expired there are no redirects and everything works as expected.

A few others have had similar questions, but the answers seem to deviate from the Auth0 samples and reference download app and don’t use any of the provided libraries:

https://community.auth0.com/questions/2085/login-flow-is-there-a-way-to-avoid-redirecting-the
https://community.auth0.com/questions/499/best-way-to-use-auth0-without-redirect-in-an-spa

There used to be a popup api (can’t find it any more) that would have provided a far superior user experience and avoided the redirection.

Are there any sensible ways to keep our SPA truly single page and still use Auth0?


#2

If you want to avoid redirect mode for the authentication flow, you can use Popup mode:
https://auth0.com/docs/libraries/lock/v10/popup-mode

Note, our recommendation is still to use redirect mode due to the limitations of popup mode. One way this can be handled in SPA’s is to define a callback route in your application, which will handle the redirect from Auth0, set the user profile, and then perform redirects to your desired routes.


#3