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

# AuthorizingForm

## Overview

Authentication wrapper that monitors login state and redirects the user after a successful sign-in, rendering a header, subtitle, and delegating to ActionForm for the actual credential form.

Theme entry: [AuthorizingForm](/v3/reference/theming/keys/AuthorizingForm.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\|object` |  | `undefined` | Vue Router location to push to after a successful login; falls back to `{ name: "welcome" }` or the `?redirect` query param. |
| <span id="prop-header">header</span> | `string` |  | `""` | Heading text rendered above the form. |
| <span id="prop-subTitle">subTitle</span> | `string` |  | `""` | Subtitle text rendered below the heading. |
| <span id="prop-runAction">runAction</span> | `func` |  | `undefined` | Action function forwarded to the inner ActionForm. |
| <span id="prop-formProps">formProps</span> | `object` |  | `{}` | Props passed to `useForm` to configure the form context. |
| <span id="prop-permitted">permitted</span> | `boolean` |  | `true` | When `false`, the form is hidden and the `invalid-message` slot is shown instead. |
| <span id="prop-requireRecentLogin">requireRecentLogin</span> | `boolean` |  | `false` | When `true`, the post-login redirect only triggers if the user has also recently authenticated (re-auth guard). |
| <span id="prop-toasts">toasts</span> | `object` |  | `undefined` | Toast text for the post-login redirect: `success` once it arrives, `redirectFailed` when it does not. Each entry is `{ title, description }` and replaces the matching sign-in default, field by field. |
| <span id="prop-onSubmissionSuccessHandler">onSubmissionSuccessHandler</span> | `func` |  | `undefined` | Called with the response after a successful submission, in place of the default, which shows nothing because the sign-in redirect announces itself. |

## 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 |  |
| `auth-form-prefix-header` |  |  |
| `auth-form-inner` | yes |  |
| `header` | yes |  |
| `content` | yes |  |
| `suffix` |  |  |
| `invalid-message` |  |  |

[Full slot reference](/v3/reference/api/vue/AuthorizingForm/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/AuthorizingForm/events.md)

## Source

`client/lib/views/AuthorizingForm.vue`