Pre-built UI Integration of MFA

The UI component handles MFA enrollment and authentication automatically, honoring both the Organization's MFA Policy and any optional Member enrollment.

You can adjust the defaults for which MFA options are shown and the order they are presented to the end user through the mfaProductInclude and the mfaProductOrder arrays in the UI config.

var organizationConfig = {
    authFlowType: "Organization",
    mfaProductInclude: ['totp', 'smsOtp'],
    mfaProductOrder: ['totp', 'smsOtp'],
    ...,
  };

However, it is important to note that the Organization's allowed_mfa_methods and the Member's current MFA enrollment options will take precedent over the UI config.

The below sequence outlines the flow that will occur after primary authentication, when an Organization's MFA Policy is REQUIRED_FOR_ALL but the Member is not currently enrolled in MFA.

If neither the Organization or UI config restrict the MFA methods available, the user will be presented with options, ordered according to the mfaProductOrder array.

Both TOTP and SMS OTP allowed by Organization and UI config

If the Organization restricts MFA methods, the UI will surface that option -- even if it is not explicitly included in the UI config.

Only TOTP allowed

If the Organization does not restrict MFA methods and mfaProductInclude is explicitly passed in the UI config, the user will only be shown the options allowed by the config.

Only SMS OTP allowed

Stytch will enforce MFA for members who are enrolled in MFA, either as a requirement for the Organization or optionally.

Sequence of enforcing MFA when Member is already enrolled

On returning authentication when a user is already enrolled in MFA, Stytch will render the component for the Member's default MFA method. If the Member has multiple MFA Options, they will see an option to switch to their non-default instead.

UI when Member's default MFA method is TOTP, but has SMS OTP as backup