Skip to main content


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


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

function MFA() {
return (
// 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"


stepsStepConfig[]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>
factorsFactor[]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.


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.