Brand: How It Works

Brand: How It Works

Learn how branding works with Auth0. Add your company name and logo, and choose colors for your pages.

video placeholder

Was this video helpful?

Video transcript

Introduction

The way your sign up and login pages look to your users makes a difference in their overall experience. If those pages have your company branding and URL, your customers will have peace of mind that your application can be trusted and is secure.

In this video, we’ll start by explaining what Auth0 Universal Login is and what it does for you, and then show you how easy it is to set up your branded pages.

How Universal Login works

Universal Login is Auth0's implementation of the login flow, which is the key feature of an Authorization Server. Each time a user needs to prove their identity, your application redirects to your Auth0 tenant and Auth0 will do what's needed to verify the user's identity which often includes redirecting the user to the Universal Login Page to collect their credentials and/or provide them other options for login, such as social or enterprise identity providers.

By choosing Universal Login, you don't have to do any integration work to handle the various flavors of authentication. When you customize the login page, the customizations you make will persist, even when you add new features such as social logins, and multi-factor authentication.

You also benefit from all improvements Auth0 does in the login flow without you changing a single line of code in your application.

Use the Dashboard to customize your pages

The login page appearance and behavior is customizable right from the Dashboard. You can change the logo and colors of the login pages, and in more advanced use cases, you can modify the HTML code of each page. You can also customize the look of the URL used to navigate to the Universal Login page. Creating this vanity URL not only aligns with the idea of a consistent user experience, but also offers you complete control over the certificate management process, if you need it—so for example, 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.

Let’s see how this is done.

First, we'll add a meaningful name to your application. Next, we'll configure the universal login settings, adding your company logo, then we'll specify a custom primary and background color.

Now we'll configure the tenant settings, specifying a friendly name, a logo, a support email and a support url.

Next, we'll configure your custom vanity URL, by click on Custom Domains tab.

Go back to the Tenant Settings page and click the Custom Domains tab.

  1. Type in your custom domain URL—such as accounts.acme.com.
  2. Select Auth0-managed certificates and click Add Domain.
  3. Now you need to verify that you own that domain so you need to add the CNAME verification record listed in the Dashboard to your domain’s DNS record. Then click Verify.

The steps may vary by domain provider but it’s easy to verify your domain.

Summary

There may be additional steps you have to complete depending on which Auth0 features you are using. For example, if you are using Auth0.js or one of the other SDKs, or if you are using Google Workspace connections, there are some additional domain name related steps you will need to take. We provide documentation on the Auth0/docs website to help you.

In the next video, we'll look at how to set up Universal Login.

Up next

Previous videos

Interested in instructor-led version of this training?Contact Training