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](https://docs.propelauth.com/)

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](https://docs.propelauth.com/overview/authentication/mfa).

Show PreviewShow Code

## Enable MFA

Trouble scanning? Switch to a text code

Enable MFA

* * *

## [Shadcn Installation](https://ui.propelauth.com/account-page-components/mfa\#shadcn-installation)

Install this component from our [shadcn registry](https://ui.propelauth.com/getting-started/component-registry).

```bash
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](https://ui.propelauth.com/account-page-components/mfa\#fetch-mfa-status-with-new-secret)

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

- Name`type`TypestringDescription

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

- Name`mfa_enabled`TypebooleanDescription

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

- Name`backup_codes`Typestring\[\]Description

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

- Name`new_secret`TypestringDescription

Only returned if `mfa_enabled` equals `false`.

- Name`new_qr`TypestringDescription

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

- Name`has_password`TypebooleanDescriptionIf 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.

- Name`success`DescriptionSuccessful request.
- Name`emailNotConfirmed`DescriptionUser has not yet confirmed their email address.
- Name`unauthorized`DescriptionThe user is not logged in.
- Name`unexpectedOrUnhandled`DescriptionAn 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](https://ui.propelauth.com/account-page-components/mfa\#enable-mfa)

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](https://ui.propelauth.com/reference-docs#fetch-mfa-status-with-new-secret).

## Arguments

- Name`code` \*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.

- Name`success`DescriptionSuccessful request.
- Name`alreadyEnabled`DescriptionUser has MFA enabled already.
- Name`badRequest`DescriptionIncorrect arguments provided. This is the error you will get if the code is incorrect.
- Name`unauthorized`DescriptionThe user is not logged in.
- Name`unexpectedOrUnhandled`DescriptionAn 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](https://ui.propelauth.com/account-page-components/mfa\#disable-mfa)

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.

- Name`success`DescriptionSuccessful request.
- Name`alreadyDisabled`DescriptionMFA not enabled for user.
- Name`unauthorized`DescriptionThe user is not logged in.
- Name`unexpectedOrUnhandled`DescriptionAn 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!