Hi,
I would like to implement custom logins styling, as Lock / Login Customisation in the Dashboard seemed really limited?
like only
displayName: “Test Conn”,
primaryColor: “#b7b7b7”,
foregroundColor: “green”,
icon: “http://example.com/icon.png”
to override?
With Custom Login, how can I implement it for my SPA calling an API? I cannot seem to find good documentation but there is the Lock.js as well? What is the difference between Lock.js and Dashboard/Hosted page?
Cheers
Hi @josh4.
I want to clarify a couple of concepts first by answering the last question first.
Login can be “embedded” in your application (your application is in charge of the login UI), or the user can be redirected to log in into the identity provider domain (what Auth0 calls “Universal login”). When using Universal Login, Auth0 will display the “hosted login page” if the user needs to be authenticated.These options are explained in Centralized Universal Login vs. Embedded Login.
Now, in both scenarios, you can use Lock or Auth0.js for the login UI. Obviously using Lock is far easier (plenty of things are already done for you) but more limited in terms of customization.
Auth0.js allows you to build your own UI, and invoke Auth0.js methods to perform all the interactions with the Auth0 server (like sending email/passwords, requesting an authentication with an external identity provider, signing up a user and so on).
A good starting point to do so is to use the “Custom login Form” template when customizing the hosted login page:
That template does the basic functionality (obtain user credentials to log in, use social providers and so on), so it’s a good example to start.
