Moving SPAs using Lock to Universal Login
When you use Lock, your code does basically this:
- Initialize Lock:
- Set the session and update the UI in the
- Handle errors in the
- Show Lock when a login is required:
To use Universal Login, you need to use auth0.js to perform the same tasks:
- Initialize auth0.js, using the same parameters as when initializing Lock:
- Create a
handleAuthenticationfunction that processes successful and failed authentication attempts calling
handleAuthentication()function on page load so it tries to parse the hash if it's present.
Redirect to the
/authorizeendpoint when you need to log the user in your app.
- Review if you are using any legacy authentication flow in your application, and adjust your code accordingly.
You can find complete examples of implementing Universal Login in Single-Page Applications for different technologies in our Quickstarts.
Customizing the Login Page
When you integrate Universal Login in your application, you redirect the user to the
/authorize endpoint of your Auth0 tenant. If Auth0 needs to authenticate the user, it will show the default login page.
You can customize the login page in your Dashboard under Hosted Pages, by enabling the Customize Login Page toggle.
Customize Lock in the Login Page
The default login page for Universal Login with your tenant is a template that will use Lock to provide your users with an attractive interface and smooth authentication process. You can look over that template and use it as a starting point if you choose to customize it in any way.
If you want to change any of Lock's configurable options, you can do so using the editor Dashboard under Hosted Pages. These options can alter the behavior of Lock itself, or the look and feel of the widget using the theming options. See the configuration documentation for details on how to customize Lock.
When you're done making changes to the code, click Save to persist the changes.