nuxt-x-auth-stack
Form
Base form wrapper that provides the shared card and layout shell for Stack Auth page components.
Form
The XAuthForm component is the base form wrapper used internally by all Stack Auth page components. It renders the card, applies the configured layout, shows branding, and provides a consistent visual shell. Use it when building a custom auth page.
Components
<XAuthForm />
Wrap custom form content inside XAuthForm to inherit the shared auth layout. It renders provider buttons, a Zod-validated UForm from the fields definition, and a submit button.
<XAuthForm
title="Verify Email"
description="Check your inbox for a code"
:fields="[{ name: 'code', label: 'Code', type: 'text', required: true }]"
:submit="{ label: 'Verify' }"
@submit="onSubmit"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | string | undefined | Iconify icon shown above the title |
title | string | undefined | Heading displayed above the form |
description | string | undefined | Subheading below the title (overridden by the description slot) |
fields | array | [] | Field definitions (name, label, type, placeholder, required) rendered as UFormField/UInput |
providers | array | undefined | OAuth buttons above the form (label, icon, onClick) |
separator | string | undefined | Label of the divider between provider buttons and the form |
submit | object | { label: 'Continue' } | Submit button configuration |
schema | object | undefined | Zod schema passed to UForm for validation |
Emits
| Event | Description |
|---|---|
submit | Emitted with the UForm submit event payload when the form validates |
Slots
| Slot | Description |
|---|---|
description | Custom content below the title (overrides the description prop) |
leading | Content between the provider buttons and the form fields |
password-hint | Hint shown on password fields (e.g. a "Forgot password?" link) |
submit | Custom submit button content |
footer | Content below the form (e.g. links to other auth pages) |
AI Context
component: XAuthForm
package: "@xenterprises/nuxt-x-auth-stack"
use-when: Building a custom auth page for Stack Auth that needs the shared card/layout shell