Docs

Branding

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, 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?
  • 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.

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 via the Dashboard to support your organization's branding requirements Simple customizations can be made that include changes to the logo, primary color, or background color, as well as more advanced customizations that require you to directly modify the script powering the page itself.

Best Practice

If you choose to customize Universal Login page script then we strongly recommend that you make use of version control, and deploy to your Auth0 tenant via deployment automation or one of the alternative strategies.

Auth0 widgets, such as Lock (https://auth0.com/lock), integrate seamlessly with Universal Login to provide out-of-box support for user login and sign up; Lock also has built-in support for multiple languages which can be leveraged to satisfy the requirements of an international audience. Alternatively the Auth0 JavaScript SDK (/libraries/auth0js) can be utilized when providing for a fully customized UX, using technologies such as React or Angular.

Universal Login advanced customization allows you to modify page script for greater customization flexibility. However you will be responsible for maintaining the page thereafter, including updating the version of any Auth0 widget - such as Lock - or Auth0 SDK used. You should also exercise caution regarding the use of third-party JavaScript on your Login Page, since sensitive security-related information often flows through the page and the introduction of cross-site scripting (XSS) vulnerabilities is of particular concern.

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.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.

Only one custom Domain Name can be applied per Auth0 Tenant, so if you absolutely must have independent domain name branding then you will require an architecture where multiple Auth0 Tenants are deployed to production.

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 Extra 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.

Before customizing email templates, please set up your Email Provider.

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.

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.

B2C IAM Project Planning Guide

Keep reading