Customize the Auth0 Universal Login

Tyler Clark: [0:00] Universal Login authenticates users via a central authorization server. Each time a user needs to prove their identity to your application, your application will redirect to Universal Login, and Auth0 will do what it's needed to guarantee the user's identity.

[0:16] By choosing Auth0's Universal Login, you don't have to worry about integration work to handle the various flavors of authentication. You can start off using a simple username and password. Before we talk about third-party integrations and multi-factor authentication, let's see how we can first brand this experience to match any application.

[0:35] Now, to customize your Universal Auth0 Login experience, go to your Auth0 Dashboard as you see here. In the lower-left sidebar, click on Branding and Universal Login. Right off the bat, you'll notice two experiences to choose from.

[0:47] You can choose between the Classic and the New, though I recommend using New from here on out, because of added features like not needing JavaScript to run.

[0:55] Once you've selected an experience, just below this, you can paste a link to your company's photo and switch out the colors to match your company's branding. I'm going to try this out. I'm going to paste the link here and then set two different colors.

[1:09] I'll save this. Then, go back to this Getting Started, you'll see here that you can click and view the experiences as it looks like now. As you can see, my logo and my colors are applied.

[1:20] This is the basic customization ability of the Login experience. Notice up here at the top, we have these other tabs. Each one provides even more power to customize the Login experience. For example, when we click on the Login tab, you'll notice that we have access to the HTML and CSS, so we can further customize with our own Custom CSS.

[1:41] By toggling this page, we'll have access to the code. There are even pre-built templates that we can choose from. Here, we can easily switch the mounts and do whatever we need to them. As you can see here, I can edit the CSS and HTML to further brand my Login page to match my application.

[2:00] Once this is done to your liking, there's even a handy preview tab here that will let you see what you're working with before you make it live by clicking the Save Changes button down at the bottom.

[2:10] The same setup is the same for password reset. On this Password Reset tab, we can click to customize this code directly, make some changes to it, and then click on the Preview button to see what that'll look like.

[2:24] Finally, this is again the same for the multi-factor authentication tab, which gives you the access to customize that HTML and CSS as well. Make sure when you're done, you save those changes. That's how we customize and brand those Login experience.

[2:41] One other thing we can do is instead of branding, on the left here, we have this Custom Domains tab. This allows us to map the Login's domain from our tenant to a custom domain, which allows us to keep an even more consistent experience for our users by keeping them on the domain they're on instead of redirecting to the tenant domain.

[3:02] Auth0 Custom Domains are only available for paid subscription plans. Also, if you want to manage the SSL/TLS certificates for yourself, you'll need to be on an enterprise subscription. Once a custom domain is set and registered, it can be used for many different things inside of the Auth0 ecosystem, not only at universal login but also multi-factor authentication, emails, other social connections, and many more.

[3:27] This certificate-type option here, Auth0 obtains it's certificates for your domain, and then manages the SSL handshake directly with the client. With the self-managed certificates approach, you're completely responsible for handling the SSL certificates, and setting up and managing a reverse proxy for content to be sent Auth0.

[3:49] Auth0 does not negotiate SSL with the end user's client, but with the proxy. As you can see, once you've added a domain, Auth0 will want to verify that you own it. In order to verify it, you need to add this TXT record to the DNS of the domain. Once that's added and deployed, come back here and click this Verify button.

[4:12] Once we get our custom domain verified, we're done with the first half of the setup. The other half is whatever code you're using to power Auth0, you'll need to add additional config options.

[4:23] For example, if you're working with Lock, there is a configuration-based URL option that needs to be set. For single-page application SDK, Auth0.js, and other SDKs, you'll need to pass through the domain when initializing.

[4:38] If we take a look at this React code that I've set up for our personal project, when I initialized the React SDK, I need to pass through this domain property with my custom domain. Make sure to check out the videos below. I'll put a link to this page there so you can dive a little deeper on this.

[4:57] Next up on our customization journey is how to customize the emails that get sent to our users. First of all, notice this warning message we get here. Until we set up an email provider, these changes will not take effect. We also won't be able to test them out either. After we update whatever we want to update, we can't test them out.

[5:16] To set up an email provider, simply click on the Email Provider tab here and select Use My Own Email Provider. Then, select the provider that you want and input whatever fields it asked for down here. Once you've imported those, make sure you push Save.

[5:31] Now, back in the email templates, you're going to notice that very similar theme to updating the Universal Login that we saw before. This template box here shows all the emails that are sent to our users that we can customize. For each one of these templates, we have the power to virtually customize whatever we like, which includes things like From and Subject.

[5:51] Again, similar to the branding experiences we got in the Universal Login page, you can customize the email exactly by editing the code. Once we've saved this and we've selected an email provider, we can have the option to try this email out and see for ourselves if we like the way it appears.