Branding (B2B)
Auth0 can be customized with a look and feel that aligns with your organization's brand requirements and user expectations. Branding Auth0 collateral provides a consistent user experience for your customers, and gives them peace of mind that they’re using a product from a trusted and secure provider.
Auth0 provides support for internationalization (I18N) and localization (L10N), both of which are important if you work on branding for an international clientele. Out-of-box collateral, such as the Auth0 Lock UI widget and New Universal Login, comes ready enabled for multiple language support, with built-in extensibility for adding more languages if what you require doesn’t already exist.
Best Practice
Almost all applications need Internationalization and/or Localization in one form or another. Auth0 makes it easy to add, but you need to account for it up front: retro-fitting localization, for example, can be a painful process if left too late.
When considering the items you want to brand, as well as how best to brand them, there are a number of things you'll want to review:
Do you need to brand your login page?
Do you need to localize your login page?
If you are sharing an Auth0 tenant across customer organizations, should you add organization-specific branding to their login experience?
How can you customize emails so that they're not just branded, but vary based on user preference?
How will users know that they're still on your domain when they see your login page?
What do you need to do to provide additional browser security (e.g., implement Extended Validation)?
Where do you want to direct users in the event of errors?
Auth0 provides tremendous flexibility when it comes to customizing and configuring Auth0 pages such as Universal Login and Password Reset. So you can pretty much set up whatever UX look and feel you require. For many, the out-of-the-box experience - with perhaps a little alteration - is all that's required. However, for others the value of their brand and brand awareness requires more extensive customization. This flexibility extends to not only Auth0 pages, but via extensibility can also be applied to the email templates. Auth0 Custom Domain functionality further enhances consumer awareness by providing users with the confidence and peace of mind when it comes to safety and security.
If you are sharing an Auth0 tenant across multiple customer organizations, providing each organization with their own domain of users and managing their credentials, you will need to consider how each user will know which credentials they should use and how they will trust that they are entering them somewhere safe and secure. See Branding login by organization for details.
While Auth0 provides for default information when it comes to error situations, out-of-the-box information can be somewhat cryptic as the context that can only be provided by you is missing. Auth0 error page customization guidance can however help mitigate that by allowing you to provide information of a more context-specific nature via your own support organization.
Best Practice
To provide helpful resources for users who experience problems, you should also configure a friendly name and a logo, as well as provide the support email address and URL for your organization. To learn how, see Dashboard Tenant Settings.
Get Started with Auth0 Videos
Watch three short videos—Brand: How It Works, Brand: Signup and Login Pages, and Brand: Emails and Error Pages—to learn how branding works with Auth0, how to use Auth0’s Universal Login feature to customize your sign up and login pages, and how to use Auth0 email templates and make changes to the reply email address, subject, redirect URL, and URL lifetime.
Universal login and login pages
Universal Login is the recommended method for authenticating users, and it centers around use of the Login page. You can customize the Login page to support your organization's branding requirements.
Best Practice
If you choose to customize the Universal Login page script, we strongly recommend that you make use of version control. To do this, you should deploy the script to your Auth0 tenant via deployment automation or via one of the alternative strategies.
Branding login by organization
Whether or not you need to do special customization on the Universal Login page is determined by how you plan to manage your customers’ organization. Before reading through this section, make sure you have read through the Universal Login section and know how you are approaching organizations by reviewing Multiple Organization Architecture.
If your organization users will all be isolated from each other, it’s important to make it clear on the Universal Login page which organization the login page is for. The easiest way to do this is to use the Organizations Feature which provides you a way to store logo, primary color, and background color which will be used to customize the branding on the Universal Login Page once the organization has been identified either by passing org_id from the application or the user entering their organization at the organization prompt.
Custom domain naming
By default, the URL associated with your tenant will include its name and possibly a region-specific identifier. For example, tenants based in the US have the a URL similar to https://example.us.auth0.com
while those based in Europe have something that is of the fashion https://example.eu.auth0.com
. A Custom Domain offers a way of providing your users with a consistent experience by using a name that’s consistent with your organization's brand.
In addition, Custom Domain functionality offers you complete control over the certificate management process. By default, Auth0 provides standard SSL certificates, but if you configure a custom domain, you can use Extended Validation (EV) SSL certificates or similar to provide the visual, browser-based cues that offer your visitors additional peace of mind.
In general, we see customers having the most success when they use a centralized domain for authentication - this is especially the case if the company offers multiple products or service brands. By using a centralized domain, you can provide end users with a consistent user experience while also minimizing the need to maintain multiple production tenants in Auth0.
Email template customization
Auth0 makes extensive use of email to provide both user notifications and to drive the functionality needed for secure identity management (for example, email verification, account recovery, and brute force protections), and Auth0 provides a number of templates for these.
Out of the box, the email templates used contain standard verbiage and Auth0 branding. However, you can configure almost every aspect of these templates to reflect the verbiage and user experience you want and make changes to things like the preferred language, accessibility options, and so forth.
Email templates are customized using Liquid syntax. If you are interested in customizing your templates based on user preferences, you will also have access to the metadata located in users' profiles, as well as any specific application metadata too.
Password reset page customization
The Password Reset page is used whenever a user takes advantage of password change functionality and, as with the login page, you can customize it to reflect your organization's particular branding requirements.
If your organization users will all be isolated from each other (i.e, each organization gets its own Auth0 database connection), and you are branding the Universal Login pages by organization, then it's also important to brand things like the password reset page so users know for which organization the password change is occurring. This can be done in a couple of ways:
Create JavaScript on the Password Reset page that can pull resources from a CDN based on the connection parameter that indicates from which organization the user is coming.
Create a separate tenant for an organization and use Universal Login to customize what is required for that organization.
Error page customization
If there are issues encountered during user interactive workflow (e.g. user sign up or login), Auth0 provides error messages that indicate what the problem is under the hood. The default messages are somewhat cryptic, especially to the end user, since they will likely be missing context that only you can supply. As such, we recommend customizing your error pages to provide the missing context-specific information directly to your users. Furthermore, customizing your error pages allows you to display your branding, not Auth0's, as well as provide useful information to your users as to what should be done next. This information might include a link to a FAQ or how to get in touch with your company's support team or help desk.
Best Practice
Out-of-the-box there is no user interface for customizing Auth0 provided error pages, but you can use the Tenant Settings endpoint of the Management API to configure them. Alternatively, if you can create and host your own error page, then you can have Auth0 direct users to that page instead of using the Auth0-hosted option.
Guardian multi-factor page customization
The Multi-factor Authentication pages can be customized by adjusting the Universal Login branding options in the Universal Login Settings section.
If you need further customization, you can also customize the full HTML content to reflect your organization's particular UX requirements.
Project Planning Guide
We provide planning guidance in PDF format that you can download and refer to for details about our recommended strategies.