# Multi-factor authentication in PnP React Native SDK

> Web3Auth PnP React Native SDK - Multi Factor Authentication | Embedded Wallets

The Multi-Factor Authentication feature refers to the ability of the user to create a backup share (recovery phrase). This helps them log into a new device and also to recover their account if they lose their original device.

:::note

This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Scale Plan**. You can use this feature in Web3Auth Sapphire Devnet network for free.

:::

You can set the `mfaLevel` within the `web3auth.login()` to customize when the mfa screen should be shown to the user. It currently accepts 4 values:

- **`default`** - Setting the mfaLevel to default will present the MFA screen to the user on every third login. `mfaLevel = MFALevel.DEFAULT`
- **`optional`** - Setting mfaLevel to optional will present the MFA screen to the user on every login but the user will have the option to skip it. `mfaLevel = MFALevel.OPTIONAL`
- **`mandatory`** - Setting mfaLevel to mandatory will make it mandatory for the user to set up MFA after login. `mfaLevel = MFALevel.MANDATORY`
- **`none`** - Setting mfaLevel to none will skip the mfa setup screen totally. `mfaLevel = MFALevel.NONE`

:::caution Note

If you are using default verifiers, your users may have set up MFA on other dapps that also use default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has enabled MFA on other dapps. This is because MFA cannot be turned off once it is enabled.

:::

```tsx
export const MFA_LEVELS = {
  DEFAULT: 'default',
  OPTIONAL: 'optional',
  MANDATORY: 'mandatory',
  NONE: 'none',
}
```

## Using the `mfaSettings` to configure the Multi-Factor Authentication Order

:::note

This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **SCALE Plan**. You can use this feature in `sapphire_devnet` for free.

:::

You can configure the order of MFA or enable/disable MFA type by passing the `mfaSettings` object in `Web3AuthOptions`. We offer the following backup factors under `mfaSettings`:

- `deviceShareFactor`,
- `backUpShareFactor`,
- `socialBackupFactor`,
- `passwordFactor`,
- `passkeysFactor`, and
- `authenticatorFactor`.

```tsx
export declare const MFA_FACTOR: {
  readonly DEVICE: 'deviceShareFactor'
  readonly BACKUP_SHARE: 'backUpShareFactor'
  readonly SOCIAL_BACKUP: 'socialBackupFactor'
  readonly PASSWORD: 'passwordFactor'
  readonly PASSKEYS: 'passkeysFactor'
  readonly AUTHENTICATOR: 'authenticatorFactor'
}
export type MFA_FACTOR_TYPE = (typeof MFA_FACTOR)[keyof typeof MFA_FACTOR]
export type MFA_SETTINGS = {
  enable: boolean
  priority?: number
  mandatory?: boolean
}
export type MfaSettings = Partial<Record<MFA_FACTOR_TYPE, MFA_SETTINGS>>
```

## Example

```tsx
const state = await web3auth.login({
  loginProvider: LoginProvider.GOOGLE,
  redirectUrl: resolvedRedirectUrl,
  // focus-next-line
  mfaLevel: MFALevel.MANDATORY, // MFALevel.DEFAULT, MFALevel.OPTIONAL, MFALevel.MANDATORY, MFALevel.NONE
  // SCALE and above plan only feature
  mfaSettings: {
    deviceShareFactor: {
      enable: true,
      priority: 1,
      mandatory: true, // at least two factors are mandatory
    },
    backUpShareFactor: {
      enable: true,
      priority: 2,
      mandatory: true, // at least two factors are mandatory
    },
    socialBackupFactor: {
      enable: true,
      priority: 3,
      mandatory: true, // at least two factors are mandatory
    },
    passwordFactor: {
      enable: true,
      priority: 4,
      mandatory: true, // at least two factors are mandatory
    },
    passkeysFactor: {
      enable: true,
      priority: 5,
      mandatory: true, // at least two factors are mandatory
    },
    authenticatorFactor: {
      enable: true,
      priority: 6,
      mandatory: true, // at least two factors are mandatory
    },
  },
})
```

:::note Note

- At least two factors are mandatory when setting up the mfaSettings.
- If you set `mandatory: true` for all factors, the user must set up all four factors.
- If you set `mandatory: false` for all factors, the user can skip setting up MFA. But at least two factors are mandatory.
- If you set `mandatory: true` for some factors and `mandatory: false` for others, the user must set up the mandatory factors and can skip the optional factors. But, the user must set up at least two factors.
- The `priority` field is used to set the order of the factors. The factor with the lowest priority will be the first factor to be set up. The factor with the highest priority will be the last factor to be set up.

:::