> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Portal Components Library Reference

> Reference for the components that Universal Portals support: type identifiers, resource servers, scopes, and configuration limits.

> [!WARNING]
>
> **The Auth0 Universal Portals feature is in .**

Universal Portals use the [Universal Components](https://auth0.com/docs/get-started/universal-components/universal-components-overview.md) library, and add components of their own, such as [Auth0 Forms](https://auth0.com/docs/customize/forms.md) and content and structure components.

Each component has a type identifier. To add a component to a Portal page, put an object with the `type` and, where the component has options, a `config` in the page's `components` array. To learn more, read [Configure Universal Portals](https://auth0.com/docs/customize/portals/customize-portals.md).

## Components at a glance

| Component | Group | Calls |
| - | - | - |
| [User MFA Management](#user-mfa-management) | Universal Components | [My Account API](https://auth0.com/docs/manage-users/my-account-api.md) |
| [Passkey Management](#passkey-management) | Universal Components | My Account API |
| [Organization Details Edit](#organization-details-edit) | Universal Components | [My Organization API](https://auth0.com/docs/manage-users/my-organization-api.md) |
| [Domain Table](#domain-table) | Universal Components | My Organization API |
| [Form](#form) | Auth0 Forms | Forms backend |

Portals also provide [content and structure components](#content-and-structure-components): Heading, Rich Text, Image, Section, and Separator.

## Universal Components

Universal Components call a resource server on the user's behalf. The portal application needs a client grant and a refresh token policy for each resource server, with the scopes listed for each component. To learn more, read [Configure Application](https://auth0.com/docs/customize/portals/configure-portal-application.md).

### User MFA Management

Type: `page:component:auth0:my_account:mfa_management`

| Calls | Configuration | Scopes |
| - | - | - |
| My Account API | None | `read:me:factors` `read:me:authentication_methods` `create:me:authentication_methods` `delete:me:authentication_methods` |

### Passkey Management

Type: `page:component:auth0:my_account:passkey_management`

| Calls | Configuration | Scopes |
| - | - | - |
| My Account API | None | `read:me:authentication_methods` `create:me:authentication_methods` `delete:me:authentication_methods` |

### Organization Details Edit

Type: `page:component:auth0:my_organization:details_edit`

| Calls | Configuration | Scopes |
| - | - | - |
| My Organization API | None | `read:my_org:details` `update:my_org:details` `read:my_org:configuration` |

### Domain Table

Type: `page:component:auth0:my_organization:domain_table`

| Calls | Configuration | Scopes |
| - | - | - |
| My Organization API | None | `read:my_org:domains` `create:my_org:domains` `update:my_org:domains` `delete:my_org:domains` `read:my_org:identity_providers` `create:my_org:identity_providers_domains` `delete:my_org:identity_providers_domains` |

The My Organization components (Organization Details Edit and Domain Table) show or hide actions based on the user's permissions in the ID token. In a Portal, a user without write permission sees an error after they submit a change instead of a disabled button.

## Auth0 Forms

### Form

Type: `page:component:auth0:form`

| Property | Type | Required | Description |
| - | - | - | - |
| `form_id` | String, 1 to 50 characters | Yes | The ID of the Form to render. |
| `completion_message` | String, 1 to 200 characters | Yes | The message that appears after the user submits the Form. |

### Forms context variables

A Form in a Portal gets its [context](https://auth0.com/docs/customize/forms/variables.md#context-variables) from the user's [ID token](https://auth0.com/docs/secure/tokens/id-tokens.md) when the Portal loads. The full transaction context that Forms receive during login is not available.

Always available:

```text theme={null}
{{context.user.user_id}}
```

The other `{{context.user.*}}` variables depend on the claims in the user's ID token, which depend on the scopes requested at sign-in and on the claims that your [Actions](https://auth0.com/docs/customize/actions/actions-overview.md) add. For example, the standard claims of the `openid`, `profile`, and `email` scopes:

```text theme={null}
{{context.user.name}}
{{context.user.given_name}}
{{context.user.family_name}}
{{context.user.nickname}}
{{context.user.email}}
{{context.user.email_verified}}
{{context.user.picture}}
```

The Portal sets context variables on the server, so a browser cannot change them. To learn more about the variables that Forms support, read [Variables](https://auth0.com/docs/customize/forms/variables.md).

## Content and structure components

Content and structure components determine the layout of your Portal pages and keep your branding consistent.

### Heading

Type: `page:component:auth0:typography:heading`

| Property | Type | Required | Description |
| - | - | - | - |
| `title` | String, 1 to 50 characters | Yes | The heading text. |
| `description` | String, 1 to 200 characters | No | Text below the heading. Supports links, bold, italic, and underline. |

### Rich text

Type: `page:component:auth0:typography:rich_text`

| Property | Type | Required | Description |
| - | - | - | - |
| `content` | String, 1 to 10,000 characters | Yes | HTML content. Supports headings, bold, italic, underline, links, text alignment, and lists. |

### Section

Type: `page:component:auth0:structure:section`

| Property | Type | Required | Description |
| - | - | - | - |
| `variant` | `card` or `none` | Yes | The container style. |
| `children` | Array of up to 20 components | Yes | The components inside the section. A section cannot contain another section. |
| `title` | String, 1 to 50 characters | No | A title at the top of the section. |
| `description` | String, 1 to 200 characters | No | Text below the title. |

### Separator

Type: `page:component:auth0:structure:separator`

| Property | Type | Required | Description |
| - | - | - | - |
| `variant` | `solid`, `dashed`, or `none` | No | The line style. The default is `solid`. |
| `text` | String, 1 to 50 characters | No | A label in the center of the line. Ignored when `variant` is `none`. |

### Image

Type: `page:component:auth0:media:image`

| Property | Type | Required | Description |
| - | - | - | - |
| `src` | URL, up to 500 characters | Yes | The image URL. |
| `position` | `left`, `center`, or `right` | No | The horizontal alignment. |
| `height` | Integer, 1 to 500 | No | The height in pixels. The width scales to keep the aspect ratio. |

## Sidebar components

Sidebar components define the links in the Portal's navigation. Add them to `navigation.sidebar.components`, not to the `components` array of a page.

| Type | Required properties | Optional properties |
| - | - | - |
| `sidebar:component:auth0:internal_link:v2` | `label` (1 to 50 characters), `page_slug` (1 to 50 characters) | `icon` |
| `sidebar:component:auth0:external_link:v2` | `label` (1 to 50 characters), `href` (URL, up to 200 characters) | `icon` |

The `icon` is the name of a [Lucide icon](https://lucide.dev/icons) in kebab-case, up to 50 characters.

## Limits

Review the following limits for Universal Portals.

| Item | Limit |
| - | - |
| Portal `name` | 1 to 150 characters |
| Portal and page `slug` | Lowercase letters, numbers, and hyphens; starts with a letter; up to 100 characters |
| Page `title` | 1 to 150 characters |
| Custom code in `custom_code.head` | 1 to 10,000 characters |

## Next steps

> **[Configure Universal Portals](https://auth0.com/docs/customize/portals/customize-portals.md)**
>
> Add these components to your Portal's pages and navigation.