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
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:
- 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
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"
}