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 MFA on logins which meet certain criteria, or just across the board. For more information on the MFA page, refer to Universal Login > MFA.
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.
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.
There are a few theming options for the MFA Widget, namespaced under the
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 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
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:
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.