---
url: "https://vueda.dev/v3/reference/api/vue/ViewTwoFactorAuth.md"
title: "ViewTwoFactorAuth"
---

# ViewTwoFactorAuth

## Overview

Two-factor authentication challenge view. Lets the user select an available verification method (TOTP, SMS,
email), request a code to be sent for applicable methods (with a 60-second resend cooldown), and submit the
code. A separate ghost CTA reveals a recovery-code path that swaps the form body to a single mono text input.

By default the code completes sign-in through `storeUser.twoFactorAuthenticate`. The `header`, `subTitle`,
and `runAction` set here are defaults: an attribute passed in with the same name falls through to the root
AuthorizingForm and replaces it. `ViewReauthenticate` passes `runAction` that way to confirm a signed-in
user's second factor through `storeUser.twoFactorReauthenticate`. The server lists methods and sends codes
for the user in the pending login stage or, failing that, the signed-in user, so one fetch serves both.

Once a who-is request has succeeded, an anonymous user with no second-factor flow pending has no sign-in to
finish here, for example because the pending sign-in expired. The view sends that user to the `sign-in` route,
keeping the `redirect` query, and shows a warning toast that explains why. A signed-out user whose methods
request is refused with an `UnauthorizedError` goes there too. Both paths share one redirect, so the user sees
one toast and one navigation when both react to the same refused request.

Theme entry: [ViewTwoFactorAuth](/v3/reference/theming/keys/ViewTwoFactorAuth.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-iconOverride">iconOverride</span> | `Object` |  | `null` | A partial icon registry (`{ [componentName]: { [iconName]: { component, props } } }`) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. |

## Slots

### `action-form-inner` {#slot-action-form-inner}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-action-form-inner-param-options">options</span> |  |
| <span id="slot-action-form-inner-param-method">method</span> |  |
| <span id="slot-action-form-inner-param-useRecoveryCode">useRecoveryCode</span> |  |

### `default` {#slot-default}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-default-param-sendCodeMethods">sendCodeMethods</span> |  |
| <span id="slot-default-param-method">method</span> |  |
| <span id="slot-default-param-code">code</span> |  |
| <span id="slot-default-param-handleSendCode">handleSendCode</span> |  |
| <span id="slot-default-param-cooldownSeconds">cooldownSeconds</span> |  |
| <span id="slot-default-param-timer">timer</span> |  |
| <span id="slot-default-param-loading">loading</span> |  |
| <span id="slot-default-param-useRecoveryCode">useRecoveryCode</span> |  |
| <span id="slot-default-param-toggleRecovery">toggleRecovery</span> |  |

## Source

`client/lib/views/ViewTwoFactorAuth.vue`