> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-quickstart-revamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> How to configure and modify screens in Advanced Customizations for Universal Login
# Configure ACUL Screens
Advanced rendering mode is configured on a per-screen basis. You can configure advanced rendering mode and manage your ACUL screens in your Dashboard at [Branding > Universal Login > Customizations](https://manage.auth0.com/#/universal-login/customizations-new) or you can [use the command line](/docs/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens#example-calls).
## Configuration options
Screens that use advanced rendering mode have the following configuration options:
* Reference bundled assets for HTML tags that should be included in the `` tag
* Filter your configurations based on defined conditions
* Provide context to your template
* Customize the [Universal Login](/docs/authenticate/login/auth0-universal-login) context object by specifying the optional transaction and configuration data
Each configuration option is described below.
### Reference your bundled assets
Advanced rendering mode allows you to add meta information, replace default page titles and favicons, and reference your bundled assets by defining HTML tags that are included in the `` of the page template. You can define up to 25 tags per screen, all of which are defined as an array of JSON objects.
```json lines
"head_tags": [
{
"tag": "",
"content": "",
"attributes": {}
}
]
```
##### Tag
Any HTML element valid for use in the `` tag. Review [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head#see_also) for more details.
##### Content (optional)
The content between the opening and closing tags.Content is limited to 250 characters.
When using a custom `` tag:
```js lines
My Company Login | {{client.name}}
```
When using a custom font:
```css wrap lines
'@font-face { font-family: "custom-font"; src: url("https://cdn.sass.app/{{client.metadata.custom_font}}");}body { font-family: custom-font;}'
```
The `content` attribute allows access to the variables below; they are resolved on the server before the page template is returned to the browser.
```http lines
branding.settings
branding.themes.default
client.id
client.name
client.metadata.[key_name]
organization.id
organization.name
organization.branding
organization.metadata.[key_name]
screen.name
prompt.name
locale
user.id
user.metadata.[key_name]
user.app_metadata.[key_name]
```
#### Attributes
Up to 10 valid HTML attributes can be included in a given tag.
#### Dynamic segments for URL type attributes
URL attributes like `src` and `href` include dynamic segments that allow you to segment bundles into packages based on attributes like client, organization, or locale.
Dynamic segments have access to the following context data:
```http lines
screen.name
prompt.name
client.id
client.name
client.metadata.[key_name]
organization.id
organization.name
organization.metadata.[key_name]
transaction.locale
```
<Warning>
Always provide integrity SHAs when referencing Javascript assets for your ACUL setup; review the [MDN documentation on SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) for details on setting up subresource integrity support for your assets. Dynamic segments allow you to design an array of SHAs for up to ten possible permutations of the resolved URL.
</Warning>
### Filter your ACUL customizations by Client or Organization information
By default, your ACUL customizations display whenever a screen is rendered for your tenant. The `filter` object allows you to define specific conditions under which your custom UI should be used.
To use the filter object, specify the `match_type` in conjunction with `includes_any` or `excludes_any`:
* `match_type` (Required): This tells the system how to interpret your rules.
* `includes_any`: Use your custom UI if any of the conditions you define are met.
* `excludes_any`: Do not use your custom UI if any of the conditions you define are met.
When you use filter, you must specify whether clients or organizations (or both) will see your customizations. For more information about application clients and organizations, read [Applications in Auth0](/docs/get-started/applications) and [Auth0 Organizations](/docs/manage-users/organizations).
Which clients and organizations will use your ACUL customizations are identified by id or metadata:
* `id`: A specific client or organization ID.
* `metadata`: A key-value pair from the client's or organization's metadata. For example, you can use `metadata: { region: "APAC" }` to target all clients in the APAC region.
#### Example
If you only want your advanced customizations to be used for clients with the ID `app_123` or for clients that have `premium: true` in their metadata, insert the code below:
```json lines
{
// ... other configurations
"filter": {
"match_type": "includes_any",
"clients": [
{
"id": "app_123"
},
{
"metadata": {
"premium": true
}
}
]
}
}
```
### Template context
The `use_page_template` configuration is optional and defaults to `false`. If you set a [custom page template](/docs/customize/login-pages/universal-login/customize-templates) for your tenant, changing the setting to `true` activates it.
Because the default Auth0 UI is not being used, the `{%- auth0:head -%}` liquid tag is replaced by your custom defined head tags when set to `true` and the `{%- auth0:widget -%}` renders nothing. Everything else in the page template is rendered, including any JS or CSS used to customize the default widget.
Go to [Branding > Universal Login > Customizations](https://manage.auth0.com/#/universal-login/customizations-new) to use custom template contexts.
#### Remove the default head tags
The following HTML tags are added by default to the advanced rendering mode page template and can be disabled by setting the value of `default_head_tags_disabled` to true.
```html lines
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<link rel="shortcut icon" href="https://cdn.sass.app/favicon.ico">
<title>My App | Login
```
Always include replacements for the `` tag and robots `<meta>` tag when removing the default head tags by including them in `head_tags`.
### Customize the Universal Login context object
Optional data can be included the <Tooltip tip="Universal Login: Your application redirects to Universal Login, hosted on Auth0's Authorization Server, to verify a user's identity." cta="View Glossary" href="/docs/glossary?term=Universal+Login">Universal Login</Tooltip> Context by adding it to the `context_configuration` array. Not all optional data is available on every screen; if the requested data is not available, the API returns an error. Refer to the [individual screen pages](/docs/customize/login-pages/advanced-customizations/reference) for information about what data is available for each screen.
Referencing `entity.metadata` or `authorization_parameters` without a specific key throws an error. For security reasons, full authorization parameters or metadata objects are not exposed.
Below are the available optional context data:
```json lines
"context-configuration": [
"branding.settings",
"branding.themes.default",
"client.logo_uri",
"client.description",
"client.metadata",
"organization.display_name",
"organization.branding",
"organization.metadata",
"screen.texts",
"tenant.name",
"tenant.friendly_name",
"tenant.enabled_locales",
"untrusted_data.submitted_form_data",
"untrusted_data.authorization_params.login_hint",
"untrusted_data.authorization_params.screen_hint",
"untrusted_data.authorization_params.ui_locales",
"untrusted_data.authorization_params.ext-"
],
```
#### Manage untrusted data with the untrustedData screen property
The `untrustedData` screen property is available to handle potentially unsafe information submitted by an end user, as well as if certain parameters and custom query parameters are passed to the `/authorize` call.
Below are the `unstrustedData` properties and parameters:
<Tabs>
<Tab title="untrustedData parameters">
<table class="table">
<thead>
<tr>
<th><strong>Interface</strong></th>
<th><strong>Type</strong></th>
<th><strong>Required</strong></th>
<th><strong>Description</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>untrustedData.submittedFormData</td>
<td>object</td>
<td>No</td>
<td>• Data is available on a case-by-case basis.<br /> • Sensitive data like password is not included.<br /> • Data from custom form fields like custom prompts is included.<br /> • This does not appear on every screen.</td>
</tr>
<tr>
<td>untrustedData.authorizationParams\[keyName]</td>
<td>object</td>
<td>No</td>
<td>The entire object cannot be exposed; each key must be explicitly added to the context.<br />The following keys are available:<br />•<code>authorizationParams.login\_hint</code> (string)<br /> •<code>authorizationParams.screen\_hint</code> (string)<br />•<code>authorizationParams.ui\_locales</code> (string)<br />•<code>authorization\_params.ext-someParam</code> (string)</td>
</tr>
</tbody>
</table>
</Tab>
<Tab title="untrustedData properties">
```ts lines
interface untrustedData {
authorizationParams: null | {
login_hint?: string;
screen_hint?: string;
ui_locales?: string;
[key: `ext-${string}`]: string;
};
submittedFormData: null | {
[key: string]:
| string
| number
| boolean
| undefined;
};
}
```
</Tab>
</Tabs>
To learn more, read [ACUL JS SDK screen references](/docs/customize/login-pages/advanced-customizations/reference).
## Example calls
Below are examples of how to use the <Tooltip tip="Management API: A product to allow customers to perform administrative tasks." cta="View Glossary" href="/docs/glossary?term=Management+API">Management API</Tooltip> and Auth0 Terraform Provider to configure ACUL screens.
### Management API example
Below is an example of a direct call to the Management API to configure the Login ID screen.
To disable advanced rendering mode, send a `PATCH` call to the same endpoint, replacing `"rendering_mode": "advanced"` with `"rendering_mode": "standard".` This will revert to the default rendering behavior, removing any previously set `context_configuration` and `head_tags`.
<Accordion title="Call the Management API">
```json lines expandable
# PATCH to /api/v2/prompts/login-id/screen/login-id/rendering
{
"rendering_mode": "advanced",
"context_configuration": [
"branding.themes.default",
"client.logo_uri",
"client.description",
"client.metadata.google_tracking_id",
"screen.texts",
"tenant.enabled_locales",
"untrusted_data.submitted_form_data",
"untrusted_data.authorization_params.ext-my_param"
],
"head_tags": [
{
"tag": "script",
"attributes": {
"src": "https://cdn.sass.app/auth-screens/{{client.name}}.js",
"defer": true,
"integrity": [
"sha256-someHash/Abc+123",
"sha256-someHash/cDe+456"
]
}
},
{
"tag": "link",
"attributes": {
"rel": "stylesheet",
"href": "https://cdn.sass.app/auth-screens/{{client.name}}.css"
}
}
]
}
```
</Accordion>
### Auth0 Terraform provider example
Below is an example of an Auth0 Terraform call to configure the Login ID screen.
<Accordion title="Call a Terraform Provider">
```terraform lines expandable
resource "auth0_prompt_screen_renderer" "apsr" {
prompt_type = "login-id"
screen_name = "login-id"
rendering_mode = "advanced"
context_configuration = [
"branding.settings",
"branding.themes.default",
"client.logo_uri",
"client.description",
"organization.display_name",
"organization.branding",
"screen.texts",
"tenant.name",
"tenant.friendly_name",
"tenant.enabled_locales",
"untrusted_data.submitted_form_data",
"untrusted_data.authorization_params.ui_locales",
"untrusted_data.authorization_params.login_hint",
"untrusted_data.authorization_params.screen_hint",
"user.organizations"
]
head_tags = jsonencode([
{
attributes: {
"async": true,
"defer": true,
"integrity": [
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
],
"src": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
},
tag: "script"
}
])
}
```
</Accordion>
### Deploy CLI example
For a Deploy CLI example, check out the [Deploy CLI GitHub repo](https://github.com/auth0/auth0-deploy-cli/releases/tag/v8.10.0).
### Auth0 CLI example
For an Auth0 CLI example, check out the [Auth0 CLI GitHub repo](https://github.com/auth0/auth0-deploy-cli/releases/tag/v8.10.0).