Customizing the Guardian Screen

You may change the logo and the friendly name that is displayed to your users. To do so, make the appropriate changes to the Guardian page's settings on the General tab in Tenant Settings. You can also reach the Tenant Settings page by clicking on your tenant name on the top right of the page and then selecting Settings from the dropdown menu.

  • Friendly Name: the name of the app that you want displayed to users
  • Logo URL: the URL that points to the logo image you want displayed to users

Customizing the Guardian Landing Page

Activate the Hosted Page

Customizing the content of the Guardian widget page is possible in the Guardian Multifactor Hosted Page by toggling Customize Guardian Page.

Theming Options

There are a few theming options for 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.

      theme: {
        icon: 'https://example.com/assets/logo.png'
      },

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.

      theme: {
        icon: 'https://example.com/assets/logo.png',
        primaryColor: 'blue'
      },

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 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.