MfaBanner Component

MFA registration banner for the CMS dashboard. Nudges admins without two-factor authentication to register. Has two visual variants — prominent (image + heading + register button) and alert (compact warning notification) — driven by the /init response.

Interactive Preview

Live component with different configuration options. Switch between variants and toggle code view.

Component Examples

Select different variants to see how props affect the component behavior

Preview
Two-factor authentication illustration

Get started with two-factor authentication!

Secure your account now with two-factor authentication!

Two-factor authentication is a method of providing two different pieces of information to help you to login more safely and securely. Learn more about two-factor authentication.

Props

Component accepts the following props for configuration and behavior.

PropTypeRequiredDefaultDescription
isVisiblebooleanRequired—Controls banner visibility — maps to banners.mfa.visible from /init response
variant"prominent" | "alert"Required—Visual variant — prominent shows full banner with image, alert shows compact notification bar

Type Definitions

MfaBannerProps

Configuration interface for MfaBanner component

interface MfaBannerProps {
  isVisible: boolean
  variant: 'prominent' | 'alert'
}

Usage Examples

Common patterns and implementation examples.

CMS Dashboard Usage

import { MfaBanner } from '@/components/cms/dashboard'

// Props driven by /init response
<MfaBanner
  isVisible={initData.banners.mfa.visible}
  variant={initData.banners.mfa.variant}
/>