Auth0 Home Blog Docs

How to maintain the user authenticated in a SPA with custom login?



I’ve read all what’s there to read about this, and I’m still quite confused. How can I allow the user to use my SPA without requiring them to login every 10 hours, and without using the Auth0 lock interface or any hosted Login UI?


The recommended approach would imply that the user would go through the hosted login page where he would perform authentication. By going through this flow a session would be established at the Auth0 side and your application could later use it as means to obtain additional refreshed tokens.

The way you would obtain these additional tokens that would allow for your application to keep the user authenticated would be through the silent authentication procedure.

At this time, this is the available option for a SPA that wants to keep obtaining refreshed tokens without further user interaction. As an additional note, we understand that in very specific circumstances there may be a need for the input of user credentials to happen at the client application itself and not through the hosted login page; we’re working on providing alternatives for this flow, but I can’t provide you with a definitive timeline.


Hello, any updates on the latter scenario? Thanks


There’s been some progress and some libraries code have received some changes with regards to this, but there’s still no formal documentation so it’s not yet complete and final.


Any update on this since June last year?


Also, I’m not so sure these are very specific circumstances.
It is not possible to maintain a consistent UI with any form hosted login page or custom login page. If we care about consistent UI we need to go down this route.
That is unless you make it possible to create a custom login page that can use our framework. In my case that is Angular (not AngularJS).


Using standard protocols like OIDC/OAuth 2.0 lead to a decoupling of user authentication and authorization. The main responsibility shifts from the application to the identity provider/authorization server so in general the place where authentication credentials are collected should also be the IdP and not the application. In addition, the hosted login page can be fully customized, including using Angular (although it may be an overkill) as you can still have consistent branding without having to implement the hosted login page in Angular.


The alternative mentioned is the cross-origin authentication ( possibility which is available in latest versions of Auth0.js and Lock.


Thanks for you quick response. I really appreciate that.
I completely agree with you regarding the problem of decoupling of user authentication and authorization. I have given a great deal of thought to this and I would love to use some form of hosted login page to overcome this.
My reason for wanting to use Angular in the login page is because we use Angular Material and it is very difficult to match the look and feel using just one of the Material js pacakges. I will have a look at the hosted login again. Last time I looked I couldn’t see how to use Angular. Thanks Again.