Skip to main content

Multi Factor Authentication in PnP React Native SDK

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

mfaSettings is a paid feature and the minimum pricing plan to use this SDK in a production environment is the SCALE Plan. You can use this feature in sapphire_devnet 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
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.

export const MFA_LEVELS = {
  DEFAULT: "default",
  OPTIONAL: "optional",
  MANDATORY: "mandatory",
  NONE: "none",
};

Using the mfaSettings to configure the MFA Order​

note

This is a paid feature and the minimum pricing plan 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, and
  • passwordFactor.
export declare const MFA_FACTOR: {
  readonly DEVICE: "deviceShareFactor";
  readonly BACKUP_SHARE: "backUpShareFactor";
  readonly SOCIAL_BACKUP: "socialBackupFactor";
  readonly PASSWORD: "passwordFactor";
};
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​

const state = await web3auth.login({
  loginProvider: LoginProvider.GOOGLE,
  redirectUrl: resolvedRedirectUrl,
  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
    },
  },
});
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.