# Verify MFA For Login Component

PropelAuth's Verify MFA For Login component is to be used when a user needs to verify an [MFA](https://docs.propelauth.com/overview/authentication/mfa) code during the login process. It is designed to be used when your user has a [Login State](https://ui.propelauth.com/login-signup-apis#login-state) of `TWO_FACTOR_REQUIRED`.

We highly recommend reviewing the [Login and Signup Guide](https://ui.propelauth.com/login-signup-apis) if using any of our login or signup components.

## Two-Factor Authentication

Verify

Switch to Backup Code

---

## [Shadcn Installation](https://ui.propelauth.com/login-signup-apis/verify-mfa-for-login#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/verify-mfa-for-login.json
```

---

# Reference APIs

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

## [verifyMfaBackupCodeForLogin](https://ui.propelauth.com/login-signup-apis/verify-mfa-for-login#verify-mfa-backup-code-for-login)

Verifies the user's MFA code for login.

## Arguments

- Name `code` *Type string Description The user's MFA backup code

## Success Response

- Name `login_state` Type LoginState Description

Returns one of the following:

- LOGIN_REQUIRED
  - TWO_FACTOR_REQUIRED
  - EMAIL_NOT_CONFIRMED_YET
  - USER_MISSING_REQUIRED_PROPERTIES
  - USER_MUST_BE_IN_AT_LEAST_ONE_ORG
  - UPDATE_PASSWORD_REQUIRED
  - TWO_FACTOR_ENROLLMENT_REQUIRED
  - LOGGED_IN

## 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` Description Successful request.
- Name `invalidCode` Description Invalid code provided.
- Name `mfaCookieTimeout` Description The user's MFA session has timed out. They must log in again to continue.
- Name `userAccountDisabled` Description User cannot login due to their account being disabled.
- Name `userAccountLocked` Description User cannot login due to their account being locked.
- Name `unexpectedOrUnhandled` Description An unexpected error occurred.

### Request

```javascript
const { verifyMfaBackupCodeForLogin } = useAuthFrontendApis()

const response = await verifyMfaBackupCodeForLogin({
    code: "123456",
})
response.handle({
    success() {
        // handle login state
    },
    invalidCode(error) {
        console.error('Invalid code provided', error)
    },
    userAccountDisabled(error) {
        console.error('User account disabled', error)
    },
    userAccountLocked(error) {
        console.error('User account locked', error)
    },
    mfaCookieTimeout(error) {
        console.error('Session timeout', error)
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled', error.user_facing_error)
    },
})
```

### Successful Response

```json
{
    "login_state": "Finished"
}
```

---

## [verifyMfaForLogin](https://ui.propelauth.com/login-signup-apis/verify-mfa-for-login#verify-mfa-for-login)

Verifies the user's MFA code for login.

## Arguments

- Name `code` *Type string Description The MFA code generated by your user's authenticator.

## Success Response

- Name `login_state` Type LoginState Description

Returns one of the following:

## 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` Description Successful request.
- Name `mfaCookieTimeout` Description The user's MFA session has timed out. They must log in again to continue.
- Name `userAccountDisabled` Description User cannot login due to their account being disabled.
- Name `userAccountLocked` Description User cannot login due to their account being locked.
- Name `badRequest` Description Incorrect arguments provided or incorrect code provided.
- Name `unexpectedOrUnhandled` Description An unexpected error occurred.

### Request

```javascript
const { verifyMfaForLogin } = useAuthFrontendApis()

const response = await verifyMfaForLogin({
    code: "123456",
})
response.handle({
    success() {
        // handle login state
    },
    userAccountDisabled(error) {
        console.error('User account disabled', error)
    },
    userAccountLocked(error) {
        console.error('User account locked', error)
    },
    mfaCookieTimeout(error) {
        console.error('Session timeout', error)
    },
    badRequest(error) {
        console.error('Bad request', error)
    },
    unexpectedOrUnhandled(error) {
        console.error('Unexpected or unhandled', error.user_facing_error)
    },
})
```

### Successful Response

```json
{
    "login_state": "Finished"
}
```