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

# AuthorizingForm

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

> Outer wrapper that fills the viewport and centers the framed card both axes. Uses `min-h-svh` rather than `min-h-full` so the fill works regardless of whether an integrator's shell gives this component's ancestors an explicit height; it never depends on a height cascade it does not control. Differs from [AuthForm.root](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-root) which flows top-aligned; the consent step is short enough that a vertically centered card reads as a focused decision surface.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-root) | `flex min-h-svh justify-center items-center` | Outer wrapper that fills the viewport and centers the framed card both axes. Uses `min-h-svh` rather than `min-h-full` so the fill works regardless of whether an integrator's shell gives this component's ancestors an explicit height; it never depends on a height cascade it does not control. Differs from [AuthForm.root](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-root) which flows top-aligned; the consent step is short enough that a vertically centered card reads as a focused decision surface. |
| [outer](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-outer) | `flex flex-col max-w-full` | Column around the framed card. No max-width cap (uses `max-w-full`) since the inner card already caps itself; the column exists only to anchor the inner card to its content. |
| [inner](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-inner) | 3 classes | Framed card surrounding the consent form. Mirrors [AuthForm.inner](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-inner) so sign-in and authorize flows share the same surface shape; 32 px padding, soft radius, capped at 35 rem on `sm+`. |
| [contentContainer](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-contentContainer) | `min-w-min` | Inner content column inside the card. `min-w-min` keeps the column from collapsing below its longest unbreakable word. |
| [title](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-title) | `mt-5` | Title region above the form body; spacing only, see `header` and `subTitle` for the text recipes. |
| [header](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-header) | `text-title` | The card's `<h1>`. AuthorizingForm has no separate PageTitle above it ("the card is the whole page"), so its heading carries the page-title role. |
| [subTitle](/v3/reference/theming/keys/AuthorizingForm.md#theme-key-AuthorizingForm-subTitle) | `mt-1 text-muted-foreground text-[length:var(--vueda-text-supporting)] leading-[1.4] font-normal` | The card's subtitle paragraph beneath the heading. Supporting-text recipe, matching [FieldDescription.root](/v3/reference/theming/keys/FieldDescription.md#theme-key-FieldDescription-root). |

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

## root

> Outer wrapper that fills the viewport and centers the framed card both axes. Uses `min-h-svh` rather than `min-h-full` so the fill works regardless of whether an integrator's shell gives this component's ancestors an explicit height; it never depends on a height cascade it does not control. Differs from [AuthForm.root](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-root) which flows top-aligned; the consent step is short enough that a vertically centered card reads as a focused decision surface.

Default classes:

`flex min-h-svh justify-center items-center`

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

<a id="theme-key-AuthorizingForm-outer"></a>

## outer

> Column around the framed card. No max-width cap (uses `max-w-full`) since the inner card already caps itself; the column exists only to anchor the inner card to its content.

Default classes:

`flex flex-col max-w-full`

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

<a id="theme-key-AuthorizingForm-inner"></a>

## inner

> Framed card surrounding the consent form. Mirrors [AuthForm.inner](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-inner) so sign-in and authorize flows share the same surface shape; 32 px padding, soft radius, capped at 35 rem on `sm+`.

Default classes:

```text
p-8 rounded hairline hairline-border bg-background
flex flex-col items-stretch gap-3 overflow-y-auto
max-w-full sm:w-[35rem]
```

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

<a id="theme-key-AuthorizingForm-contentContainer"></a>

## contentContainer

> Inner content column inside the card. `min-w-min` keeps the column from collapsing below its longest unbreakable word.

Default classes:

`min-w-min`

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

<a id="theme-key-AuthorizingForm-title"></a>

## title

> Title region above the form body; spacing only, see `header` and `subTitle` for the text recipes.

Default classes:

`mt-5`

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

<a id="theme-key-AuthorizingForm-header"></a>

## header

> The card's `<h1>`. AuthorizingForm has no separate PageTitle above it ("the card is the whole page"), so its heading carries the page-title role.

Default classes:

`text-title`

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

<a id="theme-key-AuthorizingForm-subTitle"></a>

## subTitle

> The card's subtitle paragraph beneath the heading. Supporting-text recipe, matching [FieldDescription.root](/v3/reference/theming/keys/FieldDescription.md#theme-key-FieldDescription-root).

Default classes:

`mt-1 text-muted-foreground text-[length:var(--vueda-text-supporting)] leading-[1.4] font-normal`

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