Verify MFA For Login Component

PropelAuth's Verify MFA For Login component is to be used when a user needs to verify an MFA code during the login process. It is designed to be used when your user has a Login State of TWO_FACTOR_REQUIRED.

We highly recommend reviewing the Login and Signup Guide if using any of our login or signup components.

Two-Factor Authentication

Verify

Switch to Backup Code

Shadcn Installation

Install this component from our shadcn registry.

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

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

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

{
    "login_state": "Finished"
}

verifyMfaForLogin

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

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

{
    "login_state": "Finished"
}