Brand: Emails and Error Pages

In the previous video we showed you how to add branding to your login pages using the universal login Settings in the Auth0 Dashboard. In this video, we are going to show how easy it is to brand the rest of the things that your users might see, such as emails, and error pages.

First let’s take a look at email templates.

We’ll start by choosing a template to customize. In this example, we’ll work on the Change Password template. This is the email that will be sent whenever a user requests a password change; the password will not be changed until the user follows the link in the email.

Note that we enabled Customize Password Reset Page in the Universal Login Password Reset tab in the last video. If you haven’t done that yet, go ahead and do that now.

Enter all the information into the fields to determine the reply email address, subject, redirect URL, and URL lifetime. Email templates in Auth0 support Liquid syntax, and allow you to include a number of Auth0 provided common variables

1. For the Reply Email Address, you can include any of the common variables like {{ application.name }}. For example: {{ application.name }} <support@yourcompany.com>. For this field, however, you can not use liquid syntax as part of the email address itself.

2. For the Subject line, you can include any of the common variables like {{ application.name }} and {{ user.email }}. For example: Welcome to {{ application.name }}!.

3. For the Redirect URL, enter the URL that you want the user to be redirected to after the action finishes. You can use the {{ application.name }} and {{ application.callback_domain }} variables.

4. The URL Lifetime default is set to 432,000 seconds which is 5 days. After that time has passed, the URL link will expire.

5. Click Save.

At the bottom, you can see the HTML code of message body. You can edit the HTML directly. You can also use common variables in the email message body. You can use liquid syntax in the body of the email to do everything—from just changing some of the text to be user specific, to using if/then statements to provide localization of the text.

Now we will show you how easy it is to configure a custom email provider to use. In order to use a custom email template you will need to setup one of the out of box third-party email provider services, or provide credentials from any SMTP service that supports basic authentication.

You can use an external email provider to manage, monitor, and troubleshoot your email communications. It’s as simple as opening the right ports and whitelisting inbound connections from specific IP addresses. Auth0 currently supports the following providers:

• Mandrill
• Amazon SES
• SendGrid
• SparkPost
• Mailgun
• Or any Other SMTP provider (e.g., Gmail, Yahoo)

Note that you can only configure one email provider, which will be used for all emails.

You can also use your own SMTP server to send emails. This works well for testing your email templates without spamming your users. There are three requirements for the SMTP server:

• It must support LOGIN authentication.
• It must support TLS 1.0 or higher.
• And It must use a certificate signed by a public certificate authority (CA).

1. Open the Custom Email Provider page on the Auth0 Dashboard.
2. Click on Use my own Email Provider.
3. Click the SMTP logo.
4. Enter your SMTP server Host, Port, Username and Password in the appropriate fields.
5. Click Save.

Common SMTP ports include 25 and 587. Port 25 is generally reserved for unencrypted traffic and so should not be used; this is particularly important for emails from Auth0 since they often contain sensitive information.

Now you can send a test email using the SEND TEST EMAIL button on the Custom Email Provider page of the Auth0 Dashboard. If you don't receive an email after a few minutes, check your dashboard logs for any failures.

Now we’re going to look at customizing error pages.

By default, if your users encounter any problems at sign up or log in, Auth0 provides generic error pages, that includes the support URL and support email address, that's entered right here.

Down near the bottom of the page, under the Error Pages heading, you can select Redirect users to your own error page if desired

Using your own error pages allows you to add your branding (not Auth0’s) and provide user information about what your users should do next. To do this, you simply enter the URL for your error page. When Auth0 redirects users to your own error pages, additional query parameters will be included in your URL, which provides additional information about the error that was encountered.

In the next video, we'll look at the user logout process.