Add Custom Text to the One-Time Password Challenge Screen
Last Updated:
Overview
This article explains how to add custom text to the One-Time Password Challenge screen. Page templates can be used to inject custom text into the screen in question. Care must be taken with this approach, as the CSS class names and HTML structure can change with each build, potentially breaking any customizations.
The screenshot below demonstrates what can be achieved via this method:
Applies To
- Universal Login Page Templates
Cause
This can be useful for scenarios where there is an issue with progressing from the MFA challenge screen; users can then follow the instructions provided in the custom text.
Solution
The page template can be set via the Page Templates API or using the Auth0 CLI.
See below for a simple example of how page templates can be harnessed to add custom text to the One-Time Password Challenge screen.
NOTE: This is a simple example to get started and is not deemed to be a complete solution. Ensure full testing is completed in a non-production environment before deploying to production environments.
<!DOCTYPE html>
{% assign resolved_dir = dir | default: "auto" %}
<html lang="{{locale}}" dir="{{resolved_dir}}">
<head>
{%- auth0:head -%}
</head>
<body class="_widget-auto-layout">
{%- auth0:widget -%}
{% if prompt.name == "mfa-otp" and prompt.screen.name == "mfa-otp-challenge" %}
<script>
const myForm = document.querySelector('form');
//Check if form element exists otherwise feedback and still render screen
if (!myForm) {
console.error("Form element not found!");
} else {
//Create a new div element
const newDiv = document.createElement('div');
newDiv.classList.add('new-div');
//Add some text
const needHelp = document.createElement('h2');
const contact = document.createElement('p');
needHelp.textContent = "Need Help"
contact.textContent = "Contact x"
// Add styling
needHelp.style.fontWeight = 'bold';
needHelp.style.textAlign = 'center';
needHelp.style.marginTop = '20px';
contact.style.textAlign = 'center';
myForm.appendChild(needHelp);
myForm.appendChild(contact);
}
</script>
{% endif %}
</body>
</html>
