Use Custom HTML on "Check Your Email" Screen

Overview

This article covers how to render custom HTML on the “Check Your Email” (reset-password-email) screen displayed when a user issues a password reset.

Applies To

  • reset-password-email screen
  • New universal login page
  • Password reset
  • Custom page templates

Cause

Solution

This can be achieved using a custom universal login template.

In the template, check the prompt.screen.name attribute to render the desired content for only the reset-password-email screen, for example:

<!DOCTYPE html>
<html>
<head>
{%- auth0:head -%}
</head>
<body>
{%- auth0:widget -%}

{% if prompt.screen.name == 'reset-password-email' %}
<p>Custom content specifically for the reset-password-email screen</p>
{% endif %}
</body>
</html>

JavaScript can also be used to modify the existing content, but this is not recommended as the page structure can change at any time.

Remember that the custom template will only be rendered when using a custom domain. Using the canonical domain will use the default template.