Lock vs. a Custom UI
When adding Auth0 to your web apps, the best solution is to use Auth0's Hosted Login Page. Using the Hosted Login Page is an incredibly simple process, and prevents the dangers of cross-origin authentication. The Hosted Login Page uses the Lock Widget to allow your users to authenticate by default, but also has templates for Lock Passwordless and for a custom UI built with Auth0.js SDK. You can customize the page in the Hosted Pages Editor, and use any of the following to implement your authentication needs.
- Lock, Auth0's drop-in login and signup widget
- One of our libraries (along with a custom interface)
- Or, a custom user interface that you have created directly tying into the Authentication API.
If the Hosted Login Page doesn't work for you, all of the above can be embedded in your own application and used in that way, as well.
When to Implement Lock vs. a Custom UI
Lock is a drop-in authentication widget that provides a standard set of behaviors and a customizable user interface.
Auth0 SDKs are client-side libraries that do not come with a user interface but allow for expanded customization of the behavior and appearance of the login page.
The Authentication API provides integration without requiring the use of Auth0 SDKs. The best option to choose will depend on the needs of your app.
Below is a quick overview of reasons you might want to use Lock, versus using an Auth0 SDK or the authentication API. There are details about each option (Lock, Auth0 SDKs, Authentication API) below the table, to assist you in finding the right way to implement Auth0 in your application!
|Desired UI Attributes:||Lock||Custom UI|
|Has a simple design that fits in with most modern websites with just a few tweaks to its options.||Yes||No|
|Adapts to your configuration and only show the allowable options in the appropriate situations||Yes||No|
|Chooses the correct connection automatically||Yes||No|
|Remembers the last used connection for a given user||Yes||No|
|Automatically accommodates internationalization||Yes||No|
|Automatically provides password policy checking at signup||Yes||No|
|Provide secure authentication via Auth0||Yes||Yes|
|Potential to provide auth without having to create custom code to deal directly with Auth0's API||Yes||Yes|
|Follows strict appearance requirements as set by your company||No||Yes|
|Allows you to retain your existing UI for authentication||No||Yes|
|Adapts to a simpler process for username/password and social provider authentication||No||Yes|
|Handles multiple databases or Active Directory connections||No||Yes|
Lock is an embeddable login form that makes it easy for your users to authenticate using a selected connection. Lock will automatically handle most of the details involved in creating and authenticating users. Lock is provided as a drop-in solution for Web, as well as for native iOS or Android apps.
With Lock, you will be implementing a UI that:
- Is robust and provides an excellent user experience on any device with any resolution
- Has a simple design that fits in with most websites with just a few tweaks to its custom color
- Adapts to your configuration, displaying the appropriate form controls for each available connection and only those which are allowed (such as sign up or password reset)
- Selects the correct connection automatically. You may specify a desired default behavior for ambiguous cases
- Remembers the last used connection for a given user
- Automatically accommodates internationalization
- Provides instant password policy checking at sign up
Although you cannot alter Lock's behavior, you can configure several basic options to make Lock look and behave differently.
When to use Lock
Consider using Lock if:
- You like structure, look, and feel of Lock
- You prefer a quicker and easier implementation of Auth0 and a ready-made responsive UI
- Your process includes many of the use cases that Lock handles out of the box:
- Enterprise logins
- Databases with password policies
- User signup and password reset
- Authentication using social providers
- You want a login form that can be reused in multiple areas
Custom User Interface
If the requirements of your app cannot be met by the standardized behavior of Lock, or if you have a complex custom authentication process, a custom user interface is needed. You also might prefer this option if you already have a user interface which you would prefer to keep.
With Auth0's library for Web, or with native libraries for iOS or Android, you can customize the behavior and flow of the process used to trigger signup and authentication. You an also directly use the Authentication API, without any wrapper at all, if you so choose.
Unlike with Lock, neither of these options includes a user interface. You will have complete control over the user experience for signup and authentication flow, and for the UI aspects of layout, look and feel, branding, internationalization, RTL support, and more.
When to use a custom user interface
Consider implementing a custom user interface in conjunction with an Auth0 library or the Authentication API for your app if:
- You have strict requirements for the appearance of the user interface
- You have strict requirements for file sizes - the Auth0 libraries are significantly smaller than Lock, and if you instead choose to deal with the API directly, that would require add no additional weight.
- You only need to handle username/password and social provider authentication
- You have multiple database or Active Directory Connections
You can also see specific examples of the usage of both Lock and Auth0 SDKs for a wide variety of programming languages and platforms in our Quickstarts. These guides may further assist you in your decision about which to use for your specific app needs.