InfoThis documentation is just forPropelAuth Components, an optional library for those who want deeper design control over their UIs. Click here to view our standard documentation

Close banner

Enable and Disable MFA Components

PropelAuth's MFA (or 2FA) components allow you to customize the MFA enrollment flow for your users. For more information on PropelAuth's MFA, check out our docs here.

Show PreviewShow Code

Enable MFA

Trouble scanning? Switch to a text code

Enable MFA

Shadcn Installation

Install this component from our shadcn registry.

npx shadcn@latest add https://components.propelauth.com/r/enable-disable-mfa.json

CopyCopied!

Reference APIs

These are the APIs that are used by the above component. You can use these APIs directly in your own code.

fetchMfaStatusWithNewSecret

Fetches the current user's MFA status. If they do not have MFA enabled, it will provide you with a QR code to help get your user enrolled.

Success Response

• NametypeTypestringDescription

The type of response depending on if the user has MFA enabled or disabled. Returns either Disabled or Enabled.

• Namemfa_enabledTypebooleanDescription

Returns true if the current user has MFA enabled. Otherwise, returns false.

• Namebackup_codesTypestring[]Description

Only returned if mfa_enabled equals true. Returns the current users MFA backup codes.

• Namenew_secretTypestringDescription

Only returned if mfa_enabled equals false.

• Namenew_qrTypestringDescription

Only returned if mfa_enabled equals false. The QR code the current user can scan to enable MFA.

• Namehas_passwordTypebooleanDescriptionIf the user has a password configured.

Response Functions

The response object has a handle function that you can use to handle the response. These functions can be async, and you can return values from them.

• NamesuccessDescriptionSuccessful request.
• NameemailNotConfirmedDescriptionUser has not yet confirmed their email address.
• NameunauthorizedDescriptionThe user is not logged in.
• NameunexpectedOrUnhandledDescriptionAn unexpected error occurred.

Request

const { fetchMfaStatusWithNewSecret } = useAuthFrontendApis()

const response = await fetchMfaStatusWithNewSecret()
await response.handle({
    success: (data) => {
        if (data.mfa_enabled) {
            console.log('MFA is enabled')
            console.log('Backup codes: ', data.backup_codes)
        } else {
            console.log('MFA is disabled')
            console.log('QR code to enable it: ', data.new_qr)
            console.log('Secret to enable it: ', data.new_secret)
        }
    },
    unexpectedOrUnhandled: (error) => {
        console.error(error)
    },
})

CopyCopied!

Successful Response

// if MFA disabled
{
    "type": "Disabled",
    "mfa_enabled": false,
    "new_secret": "2CPN3MORX7...",
    "new_qr": "iVBORw0KGgoAAAA...",
    "has_password": true
}
// if MFA enabled
{
    "type": "Enabled",
    "mfa_enabled": true,
    "backup_codes": [\
    "6GD3YU5AQE",\
    "P5NQ28DWR",\
    "ICQ036M4L8"\
    ],
    "has_password": true
}

CopyCopied!

enableMfa

Accepts the code provided by your authenticated user when setting up MFA. To set up MFA, use the QR Code (or secret) provided by fetchMfaStatusWithNewSecret.

Arguments

• Namecode *TypestringDescriptionThe code generated by your user's authenticator.

Response Functions

The response object has a handle function that you can use to handle the response. These functions can be async, and you can return values from them.

• NamesuccessDescriptionSuccessful request.
• NamealreadyEnabledDescriptionUser has MFA enabled already.
• NamebadRequestDescriptionIncorrect arguments provided. This is the error you will get if the code is incorrect.
• NameunauthorizedDescriptionThe user is not logged in.
• NameunexpectedOrUnhandledDescriptionAn unexpected error occurred.

Request

const { enableMfa } = useAuthFrontendApis()

const response = await enableMfa({ code: '123456' })
await response.handle({
    success: () => {
        console.log('MFA enabled')
    },
    badRequest: (error) => {
        console.log('Bad request error:', error.user_facing_errors.code)
    },
    unexpectedOrUnhandled: () => {
        console.log('An unexpected error occurred')
    },
})

CopyCopied!

Successful Response

{}

CopyCopied!

disableMfa

Disables MFA for the logged in user.

Response Functions

The response object has a handle function that you can use to handle the response. These functions can be async, and you can return values from them.

• NamesuccessDescriptionSuccessful request.
• NamealreadyDisabledDescriptionMFA not enabled for user.
• NameunauthorizedDescriptionThe user is not logged in.
• NameunexpectedOrUnhandledDescriptionAn unexpected error occurred.

Request

const { disableMfa } = useAuthFrontendApis()

const response = await disableMfa()
await response.handle({
    success: async () => {
        console.log('MFA successfully disabled.')
    },
    alreadyDisabled: () => {
        console.log('MFA is already disabled.')
    },
    unexpectedOrUnhandled() {
        console.error('An unexpected error occurred')
    },
})

CopyCopied!

Successful Response

{}

CopyCopied!