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

Props

Name	Type	Required	Default	Description
themeOverride	Object		null	A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
redirect	string		""	Route path to redirect to after a successful authentication action.
header	string		""	Heading text displayed above the form.
subTitle	string		""	Secondary text displayed below the heading.
runAction	func		undefined	Async function that performs the form submission action.
onSubmissionErrorHandler	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.
formProps	object		{}	Additional props forwarded to the underlying form composable.
requireRecentAuth	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.
permitted	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

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

Source

client/lib/views/AuthForm.vue