Multi-factor Authentication Page
How it works
Customizing the MFA Pages
You can customize the MFA pages using the Universal Login's basic customization features.
If you need further customizations, you can provide your own HTML for the MFA page. Note that this will use the Auth0 MFA Widget, which has the following limitations:
- It does not support MFA with Email.
- If users enrolled 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's internationalization features
Customizing the HTML for the MFA page
To customize the MFA 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 MFA page works 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.