Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Enhance UL customize and switch commands #1142

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 91 additions & 0 deletions CUSTOMIZATION_GUIDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# 🚀 Universal Login Customization Guide

Welcome to the **Universal Login Customization Guide**! 🎨
This document provides essential information on **configuring the rendering mode** and **customizing head tags** for Universal Login.

---

## ✨ Key Points to Remember

### 🔹 1. Rendering Mode Options
- `rendering_mode` can be set to **either** `"advanced"` or `"standard"`.
- The **default value** is `"standard"`.

### 🔹 2. Default Head Tags
- `default_head_tags_disabled` is a **toggle** to enable/disable **Universal Login's default head tags**.

### 🔹 3. Context Configuration
- `context_configuration` contains a list of **context values** made available.
- Refer to the [official documentation](https://auth0.com/docs/customize/#-pages/advanced-customizations/getting-started/configure-acul-screens) for possible values.

### 🔹 4. Head Tags Customization
- `head_tags` is an **array of custom head tags** (e.g., scripts, stylesheets).
- **⚠️ At least one** `<script>` tag **must be included**.

### 🔹 5. Updating Rendering Mode
- **Switching to `"standard"` only updates `rendering_mode`**.
- **All other fields remain unchanged**.

### 🔹 6. Partial Updates
- Only **explicitly declared fields** are updated.
- **Unspecified fields remain as they are**.

---

## 📄 Sample Configuration (`settings.json`)

```json
{
"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"
}
}
]
}
```


## ✅ Best Practices

- **Use `"advanced"` mode** for full customization/granular control of the login experience and to integrate your own component design system
- **Use `"standard"` mode for creating a consistent, branded experience for users. Choosing Standard mode will open a webpage
within your browser where you can edit and preview your branding changes.For a comprehensive list of editable parameters and their values
- **Ensure `head_tags` includes at least one `<script>` tag** for proper functionality.
- **When switching to `"standard"`, only update `rendering_mode`**—all other fields should remain unchanged.
- **Use `context_configuration` values carefully** to avoid exposing sensitive data.
- **Always validate your JSON** before applying changes to prevent syntax errors and unexpected behavior.

---

## 📚 Additional Resources

📖 [Auth0 Universal Login Documentation](https://auth0.com/docs/customize/#-pages)
📖 [Advanced Customization Guide](https://auth0.com/docs/customize/#-pages/advanced-customizations/getting-started/configure-acul-screens)

---
1 change: 1 addition & 0 deletions docs/auth0_universal-login.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ Manage a consistent, branded Universal Login experience that can handle all of y
- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience for the standard or advanced mode
- [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
- [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
- [auth0 universal-login switch](auth0_universal-login_switch.md) - Switch the rendering mode for Universal Login
- [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates
- [auth0 universal-login update](auth0_universal-login_update.md) - Update the custom branding settings for Universal Login

5 changes: 3 additions & 2 deletions docs/auth0_universal-login_customize.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ auth0 universal-login customize [flags]
## Flags

```
-p, --prompt string Name of the prompt to customize.
-p, --prompt string Name of the prompt to to switch or customize.
-r, --rendering-mode string standardMode is recommended for customizating consistent, branded experience for users.
Alternatively, advancedMode is recommended for full customization/granular control of the login experience and to integrate own component design system

-s, --screen string Name of the screen to customize.
-s, --screen string Name of the screen to to switch or customize.
-f, --settings-file string File to save the rendering configs to.
```

Expand All @@ -64,6 +64,7 @@ auth0 universal-login customize [flags]
- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience for the standard or advanced mode
- [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
- [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
- [auth0 universal-login switch](auth0_universal-login_switch.md) - Switch the rendering mode for Universal Login
- [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates
- [auth0 universal-login update](auth0_universal-login_update.md) - Update the custom branding settings for Universal Login

Expand Down
1 change: 1 addition & 0 deletions docs/auth0_universal-login_show.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ auth0 universal-login show [flags]
- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience for the standard or advanced mode
- [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
- [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
- [auth0 universal-login switch](auth0_universal-login_switch.md) - Switch the rendering mode for Universal Login
- [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates
- [auth0 universal-login update](auth0_universal-login_update.md) - Update the custom branding settings for Universal Login

Expand Down
55 changes: 55 additions & 0 deletions docs/auth0_universal-login_switch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
layout: default
parent: auth0 universal-login
has_toc: false
---
# auth0 universal-login switch

Switch the rendering mode for Universal Login. Note that this requires a custom domain to be configured for the tenant.

## Usage
```
auth0 universal-login switch [flags]
```

## Examples

```
auth0 universal-login switch
auth0 universal-login switch --prompt login-id --screen login-id --rendering-mode standard
auth0 ul switch --prompt login-id --screen login-id --rendering-mode advanced
auth0 ul switch -p login-id -s login-id -r standard
```


## Flags

```
-p, --prompt string Name of the prompt to to switch or customize.
-r, --rendering-mode string standardMode is recommended for customizating consistent, branded experience for users.
Alternatively, advancedMode is recommended for full customization/granular control of the login experience and to integrate own component design system

-s, --screen string Name of the screen to to switch or customize.
```


## Inherited Flags

```
--debug Enable debug mode.
--no-color Disable colors.
--no-input Disable interactivity.
--tenant string Specific tenant to use.
```


## Related Commands

- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience for the standard or advanced mode
- [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
- [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
- [auth0 universal-login switch](auth0_universal-login_switch.md) - Switch the rendering mode for Universal Login
- [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates
- [auth0 universal-login update](auth0_universal-login_update.md) - Update the custom branding settings for Universal Login


1 change: 1 addition & 0 deletions docs/auth0_universal-login_update.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ auth0 universal-login update [flags]
- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience for the standard or advanced mode
- [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
- [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
- [auth0 universal-login switch](auth0_universal-login_switch.md) - Switch the rendering mode for Universal Login
- [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates
- [auth0 universal-login update](auth0_universal-login_update.md) - Update the custom branding settings for Universal Login

Expand Down
1 change: 1 addition & 0 deletions internal/cli/universal_login.go
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ func universalLoginCmd(cli *cli) *cobra.Command {
cmd.SetUsageTemplate(resourceUsageTemplate())

cmd.AddCommand(customizeUniversalLoginCmd(cli))
cmd.AddCommand(switchUniversalLoginRendererModeCmd(cli))
cmd.AddCommand(showUniversalLoginCmd(cli))
cmd.AddCommand(updateUniversalLoginCmd(cli))
cmd.AddCommand(universalLoginTemplatesCmd(cli))
Expand Down
Loading