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

# AuthForm

## Overview

Renders a page-level authentication form with a title, subtitle, and action slot.
Delegates the form submission to an inner ActionForm.

By default the form's action needs a recent session, so a pending reauthentication flow sends the user to the
reauthenticate route. That flow belongs to the whole session, not to this form. Set `requireRecentAuth` to `false`
for a form whose action the server accepts without a recent session.

Theme entry: [AuthForm](/v3/reference/theming/keys/AuthForm.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-redirect">redirect</span> | `string` |  | `""` | Route path to redirect to after a successful authentication action. |
| <span id="prop-header">header</span> | `string` |  | `""` | Heading text displayed above the form. |
| <span id="prop-subTitle">subTitle</span> | `string` |  | `""` | Secondary text displayed below the heading. |
| <span id="prop-runAction">runAction</span> | `func` |  | `undefined` | Async function that performs the form submission action. |
| <span id="prop-onSubmissionErrorHandler">onSubmissionErrorHandler</span> | `func` |  | `undefined` | Handles a failed submission in place of `defaultOnSubmissionError`. Reauthentication stays with `AuthForm`: an `UnauthorizedError` that sends the user to the sign-in or reauthenticate route does not reach this handler. `ActionForm` keeps server field feedback: it shows a `ServerFeedbackError` on the form's fields, and that error does not reach this handler. An error from a dry run does not reach this handler either. Every other error reaches this handler once. Return `true`, or a promise that resolves `true`, when the handler dealt with the error. Return `false` to let `ActionForm` record the error and show its error toast. |
| <span id="prop-formProps">formProps</span> | `object` |  | `{}` | Additional props forwarded to the underlying form composable. |
| <span id="prop-requireRecentAuth">requireRecentAuth</span> | `boolean` |  | `true` | Whether the server requires a recent session for the form's action. When `true`, a pending reauthentication flow sends the user to the reauthenticate route, including when the form opens. Set it to `false` for a form whose action the server accepts without a recent session, such as change-password. The user then stays on the form while the flow is pending. |
| <span id="prop-permitted">permitted</span> | `boolean` |  | `true` | Whether the current user is permitted to access this form. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `action-bar` | yes |  |
| `confirm-button` | yes |  |
| `cancel-button` | yes |  |
| `actions-hint` |  |  |
| `validation-summary` | yes | Override the structured per-field validation alert shown when `formContext.state.anyError` is set and at least one field error has no rendered field showing it; receives `entries` (each `{ field, label, messages }`, limited to those errors), `count`, and `title`. |
| `action-form-inner` | yes |  |
| `form-confirm-dialog-warnings` | yes |  |
| `form-content` | yes | Override the entire form content area; receives run-action, on-submission-error-handler, and redirect-to bindings. |

[Full slot reference](/v3/reference/api/vue/AuthForm/slots.md)

## Events

| Name | Description |
| --- | --- |
| `form-object` | Emitted on mount with a readonly ref to the reactive form values object. |
| `form-context` | Emitted on mount with the form context. Use its methods for programmatic form updates. |

[Full event reference](/v3/reference/api/vue/AuthForm/events.md)

## Source

`client/lib/views/AuthForm.vue`