Customize MFA for Classic Login

You can enable multi-factor authentication in the Dashboard > Security > Multi-factor Auth section. You can customize the MFA pages using basic branding options on the Auth0 Dashboard. For further customization, you can provide your own HTML for the MFA page. When using your own HTML, Classic Login uses the Auth0 MFA Widget with the following limitations:

  • It does not support MFA with email.

  • If users enrolled in more than one factor, they cannot select which one to use. The MFA widget will ask them to login with the most secure factor.

  • It does not use Universal Login internationalization features. To learn more, read Universal Login Internationalization.

Customize HTML for the MFA page

To customize the MFA page, go to Dashboard > Branding > Universal Login > Multi-factor Authentication tab and enable the Customize MFA Page toggle. You can then use the text editor to change your HTML, style your page using CSS, and alter the JavaScript used to retrieve custom variables. Once you've made your changes, and make sure to click Save Changes.

MFA pages work without customization and Auth0 will update the included scripts as required. However, once you enable customization, you are responsible for updating and maintaining the script (including changing version numbers, such as that for the MFA Widget) since Auth0 can no longer update it automatically.

To learn more about how to override the text for many areas of the MFA process for Classic Login, read MFA Theme Language Dictionary. To learn more about the MFA Widget theme options, read MFA Widget Theme Options.

Reset page

If you'd like to revert to an earlier design, you have two options:

  • Revert to the last saved template by clicking Reset to Last;

  • Revert to the default template provided by Auth0 by clicking Reset to Default.

Render enrollment invitations

There are two different possible scenarios in which the page is rendered. If a user has been directed to this page specifically for enrollment (for instance, from an email with an enrollment link) then the property ticket will be available. Otherwise, the property requestToken will be available.

HTML and Liquid syntax

The hosted page uses Liquid syntax for templating. To learn more, read Liquid for Designers on GitHub. The following parameters are available to assist in rendering your page:

  • userData.email

  • userData.friendlyUserId

  • userData.tenant

  • userData.tenantFriendlyName

  • iconUrl

Most of the parameters that are used in the MFA Widget need to be passed to Guardian as shown in the default template provided in the customization area. If you need a higher level of customization you could use auth0-guardian.js.

To learn more, read Customize MFA User Pages.

Learn more