---
url: "https://vueda.dev/v3/reference/theming/keys/ViewTwoFactorAuth.md"
title: "ViewTwoFactorAuth"
---

# ViewTwoFactorAuth

Source: `client/lib/theme/vueda-tailwind/views/index.js`

> Outer wrapper. Empty; the embedded [AuthorizingForm](/v3/reference/theming/keys/AuthorizingForm.md) owns the framed card and viewport-centred chrome, so this key is left open as the consumer-facing override surface.

Vue component: [ViewTwoFactorAuth](/v3/reference/api/vue/ViewTwoFactorAuth.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ViewTwoFactorAuth.md#theme-key-ViewTwoFactorAuth-root) |  | Outer wrapper. Empty; the embedded [AuthorizingForm](/v3/reference/theming/keys/AuthorizingForm.md) owns the framed card and viewport-centred chrome, so this key is left open as the consumer-facing override surface. |
| [buttons](/v3/reference/theming/keys/ViewTwoFactorAuth.md#theme-key-ViewTwoFactorAuth-buttons) | `flex flex-col gap-2 pt-4` | Vertical button stack inside the [AuthorizingForm](/v3/reference/theming/keys/AuthorizingForm.md)'s `action-bar` slot. Stacks the resend / verify / recovery-toggle trio in a single column with 8 px gaps and a 16 px top inset so the cluster reads as a footer beneath the method picker and OTP grid. |
| [recoveryToggle](/v3/reference/theming/keys/ViewTwoFactorAuth.md#theme-key-ViewTwoFactorAuth-recoveryToggle) | `self-start` | Ghost CTA that flips the form body between verified-method mode and recovery-code mode. `self-start` anchors the button to the start of the column so it reads as an escape hatch beside the primary verify CTA, not a peer of it. |
| [recoveryInput](/v3/reference/theming/keys/ViewTwoFactorAuth.md#theme-key-ViewTwoFactorAuth-recoveryInput) | `font-mono tracking-[0.04em]` | Class forwarded to the `WidgetTextInput` rendered for the recovery-code path. Mono with a small letter-spacing bump so the dashed code reads as machine-input alongside the OTP grid it replaces. |
| [cooldownChip](/v3/reference/theming/keys/ViewTwoFactorAuth.md#theme-key-ViewTwoFactorAuth-cooldownChip) | 3 classes | Inline cooldown pill beside the resend button while the 60-second send-code cooldown is active. Mono / 11 px / `tabular-nums` keeps the counting digits column-aligned as the seconds tick down; muted fill + muted-foreground keep the pill from competing with the disabled resend button it sits beside. The chip is announced via `aria-live="polite"` on the consumer side; this recipe handles visual chrome only. |

<a id="theme-key-ViewTwoFactorAuth-root"></a>

## root

> Outer wrapper. Empty; the embedded [AuthorizingForm](/v3/reference/theming/keys/AuthorizingForm.md) owns the framed card and viewport-centred chrome, so this key is left open as the consumer-facing override surface.

Source: `client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:17`

<a id="theme-key-ViewTwoFactorAuth-buttons"></a>

## buttons

> Vertical button stack inside the [AuthorizingForm](/v3/reference/theming/keys/AuthorizingForm.md)'s `action-bar` slot. Stacks the resend / verify / recovery-toggle trio in a single column with 8 px gaps and a 16 px top inset so the cluster reads as a footer beneath the method picker and OTP grid.

Default classes:

`flex flex-col gap-2 pt-4`

Source: `client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:21`

<a id="theme-key-ViewTwoFactorAuth-recoveryToggle"></a>

## recoveryToggle

> Ghost CTA that flips the form body between verified-method mode and recovery-code mode. `self-start` anchors the button to the start of the column so it reads as an escape hatch beside the primary verify CTA, not a peer of it.

Default classes:

`self-start`

Source: `client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:25`

<a id="theme-key-ViewTwoFactorAuth-recoveryInput"></a>

## recoveryInput

> Class forwarded to the `WidgetTextInput` rendered for the recovery-code path. Mono with a small letter-spacing bump so the dashed code reads as machine-input alongside the OTP grid it replaces.

Default classes:

`font-mono tracking-[0.04em]`

Source: `client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:29`

<a id="theme-key-ViewTwoFactorAuth-cooldownChip"></a>

## cooldownChip

> Inline cooldown pill beside the resend button while the 60-second send-code cooldown is active. Mono / 11 px / `tabular-nums` keeps the counting digits column-aligned as the seconds tick down; muted fill + muted-foreground keep the pill from competing with the disabled resend button it sits beside. The chip is announced via `aria-live="polite"` on the consumer side; this recipe handles visual chrome only.

Default classes:

```text
inline-flex items-center justify-center px-2 py-0.5 rounded-full
bg-muted/70 text-muted-foreground
font-mono text-[11px] font-medium leading-none tabular-nums
```

Source: `client/lib/theme/vueda-tailwind/views/ViewTwoFactorAuth.theme.js:33`