Docs

Guardian Multi-factor Login Page

In the Auth0 Dashboard, you can enable 2nd-factor authentication, using Guardian Multi-factor. You can customize the page that Auth0 displays to your users, allowing you to require multi-factor authentication (MFA) on logins which meet certain criteria, or just across the board. For more information on the MFA page, refer to Universal Login > MFA.

Universal Login Guardian MFA Page

Guardian Login Page HTML Editor

To customize the Guardian Login page, go to Dashboard > Universal Login > Guardian Multi-factor and enable the Customize Guardian Page switch.

Once you do that, you'll be able to use the text editor built into the Auth0 Dashboard 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.

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

  • Reverting to the last saved template by clicking Reset to Last;
  • Reverting to the default template provided by Auth0 by clicking Reset to Default.

Please note that Hosted Pages work without customization (Auth0 will also update the included scripts as required). However, once you toggle the customization to on, you are responsible for the updating and maintaining the script (including changing version numbers, such as that for the MFA widget), since Auth0 can no longer update it automatically.

Configuration Options

defaultLocation

Theming Options

There are a few theming options for the MFA Widget, namespaced under the theme property.

icon

The value for icon is the URL for an image that will be used in the MFA Widget header, which defaults to the Auth0 logo. It has a recommended max height of 58px for a better user experience.

primaryColor

The primaryColor property defines the primary color of the MFA Widget. This option is useful when providing a custom icon, to ensure all colors go well together with the icon's color palette. Defaults to #ea5323.

When customizing the login page with the MFA Widget, users will not be able to select from a list of enrolled factors. Auth0 will ask them to perform MFA with the most secure one.

Rendering "Invited Enrollments" vs. Standard Scenarios

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 + Liquid syntax

The hosted page uses Liquid syntax for templating. 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.