<MultiFactorAuth>

<MultiFactorAuth> component enables first-class Multi-Factor Authentication experience. It allows you to explicitly set the number of steps and authentication factors available for each step.

The component is built on top of the <Form /> component, so it requires you to import the default styles.

Usage

import { MultiFactorAuth } from "@slashid/react"
import "@slashid/react/style.css"

function MFA() {
  return (
    <MultiFactorAuth
      steps={[
        // first step factor - email magic link
        { factors: [{ method: "email_link" }] },
        // second step factor - SMS  OTP CODE
        { factors: [{ method: "otp_via_sms" }] },
      ]}
    />
  )
}

The default styles must be imported:
import "@slashid/react/style.css"

Note: if using Parcel the CSS import line should be changed to:
import "@slashid/react/dist/style.css"

Props

Prop	Type	Default	Description
steps	StepConfig[]		A list of steps to be completed in the multi-factor authentication flow. See Interface: StepConfig.

Interface: StepConfig

interface StepConfig {
  factors: Factor[]
  text?: Record<string, string>
}

Property	Type	Description
factors	Factor[]	List of authentication factors available for this step. Keep in mind that each step should have a different set of factors.
text?	Record<string, string>	Overrides for the <Form> text shown in this step. See <ConfigurationProvider> default text key-value pairs.

Configuration

Since <MultiFactorAuth> uses <Form> under the hood, it will inherit all the <ConfigurationProvider> properties, except factors. You need to provide a list of allowed authentication factors and optional text overrides.

UI Customization

<MultiFactorAuth> component will also inherit all the <Form> styles and feel. See <Form> UI customization for reference.