From 9cf12f4c3d2f91ca3cec9a9e86713f1e8ff434c7 Mon Sep 17 00:00:00 2001 From: kushalshit27 <43465488+kushalshit27@users.noreply.github.com> Date: Thu, 5 Mar 2026 11:15:31 +0530 Subject: [PATCH] feat: Add custom partials for login and signup prompts - examples/yaml/tenant.yaml: Introduce partials for login and signup with custom HTML content. - examples/directory/prompts/partials.json: Create manifest for partials mapping. - examples/directory/prompts/partials/login/login/form-content-start.liquid: Add custom HTML for login form start. - examples/directory/prompts/partials/signup/signup/form-content-start.liquid: Add custom HTML for signup form start. - examples/directory/prompts/partials/signup/signup/form-content-end.liquid: Add custom HTML for signup form end. --- docs/resource-specific-documentation.md | 97 ++++++++++++++++++- examples/directory/prompts/partials.json | 26 +++++ .../login/login/form-content-start.liquid | 4 + .../signup/signup/form-content-end.liquid | 4 + .../signup/signup/form-content-start.liquid | 4 + examples/yaml/tenant.yaml | 24 ++++- 6 files changed, 152 insertions(+), 7 deletions(-) create mode 100644 examples/directory/prompts/partials.json create mode 100644 examples/directory/prompts/partials/login/login/form-content-start.liquid create mode 100644 examples/directory/prompts/partials/signup/signup/form-content-end.liquid create mode 100644 examples/directory/prompts/partials/signup/signup/form-content-start.liquid diff --git a/docs/resource-specific-documentation.md b/docs/resource-specific-documentation.md index 3a48987bf..e9fd43281 100644 --- a/docs/resource-specific-documentation.md +++ b/docs/resource-specific-documentation.md @@ -14,18 +14,27 @@ Multilingual custom text prompts follow a particular hierarchy. Under the root-l RenderSettings of a prompt-screen follow a particular hierarchy. Under the root-level `prompts` we store `screenRenderers` property that is used to configure the rendering settings of a given prompt & screen. Thirdly is the prompt Name, followed by the screen Name mapped to the respective renderer configs file. Refer [more](https://auth0.com/docs/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens) on this. +Custom partials allow you to inject custom HTML (via Liquid templates) into specific insertion points of a prompt screen. Under `partials` is the prompt type, then the screen type, then the insertion point name mapped to the Liquid HTML content. + **Hierarchy** ```yaml prompts: + identifier_first: true|false + universal_login_experience: new|classic + webauthn_platform_first_factor: true|false customText: : # two character language code : # prompt ID : # prompt screen ID : 'Some text' - screenRenderers: - - : - : ./prompts/screenRenderSettings/promptName_screenName.json #Add the renderer configs for a given prompt & a given screen + partials: + : # e.g. login, signup + : # e.g. login, signup + : 'Liquid HTML content' # e.g. form-content-start, form-content-end + screenRenderers: + - : + : ./prompts/screenRenderSettings/promptName_screenName.json #Add the renderer configs for a given prompt & a given screen ``` **YAML Example** @@ -44,11 +53,14 @@ Folder structure when in YAML mode. ./tenant.yaml ``` +In YAML mode, partial Liquid content is inlined directly in `tenant.yaml`: + ```yaml # Contents of ./tenant.yaml prompts: - identifier_first: true - universal_login_experience: classic + identifier_first: false + universal_login_experience: new + webauthn_platform_first_factor: false customText: en: login: @@ -63,6 +75,23 @@ prompts: mfa-login-options: pageTitle: 'Log in to ${clientName}' authenticatorNamesSMS: 'SMS' + partials: + login: + login: + form-content-start: | + + signup: + signup: + form-content-start: | + + form-content-end: | + screenRenderers: - signup-id: signup-id: ./prompts/screenRenderSettings/signup-id_signup-id.json @@ -77,6 +106,14 @@ prompts: Folder structure when in directory mode. ./prompts/ + /partials + /login + /login + /form-content-start.liquid + /signup + /signup + /form-content-start.liquid + /form-content-end.liquid /screenRenderSettings /signup-id_signup-id.json /login-id_login-id.json @@ -85,9 +122,59 @@ Folder structure when in directory mode. /login-password_login-password.json /signup-password_signup-password.json /custom-text.json + /partials.json /prompts.json ``` +In directory mode, `partials.json` is a manifest that maps each insertion point to its `.liquid` file (paths are relative to the `prompts/` directory): + +Contents of `partials.json`: + +```json +{ + "login": [ + { + "login": [ + { + "name": "form-content-start", + "template": "partials/login/login/form-content-start.liquid" + } + ] + } + ], + "signup": [ + { + "signup": [ + { + "name": "form-content-start", + "template": "partials/signup/signup/form-content-start.liquid" + }, + { + "name": "form-content-end", + "template": "partials/signup/signup/form-content-end.liquid" + } + ] + } + ] +} +``` + +Contents of `partials/login/login/form-content-start.liquid`: + +```liquid + +``` + +Contents of `partials/signup/signup/form-content-end.liquid`: + +```liquid + +``` + Contents of `promptName_screenName.json` ```json diff --git a/examples/directory/prompts/partials.json b/examples/directory/prompts/partials.json new file mode 100644 index 000000000..872c9aa4a --- /dev/null +++ b/examples/directory/prompts/partials.json @@ -0,0 +1,26 @@ +{ + "login": [ + { + "login": [ + { + "name": "form-content-start", + "template": "partials/login/login/form-content-start.liquid" + } + ] + } + ], + "signup": [ + { + "signup": [ + { + "name": "form-content-start", + "template": "partials/signup/signup/form-content-start.liquid" + }, + { + "name": "form-content-end", + "template": "partials/signup/signup/form-content-end.liquid" + } + ] + } + ] +} diff --git a/examples/directory/prompts/partials/login/login/form-content-start.liquid b/examples/directory/prompts/partials/login/login/form-content-start.liquid new file mode 100644 index 000000000..f77a10b39 --- /dev/null +++ b/examples/directory/prompts/partials/login/login/form-content-start.liquid @@ -0,0 +1,4 @@ + + diff --git a/examples/directory/prompts/partials/signup/signup/form-content-end.liquid b/examples/directory/prompts/partials/signup/signup/form-content-end.liquid new file mode 100644 index 000000000..d9c320a56 --- /dev/null +++ b/examples/directory/prompts/partials/signup/signup/form-content-end.liquid @@ -0,0 +1,4 @@ + + diff --git a/examples/directory/prompts/partials/signup/signup/form-content-start.liquid b/examples/directory/prompts/partials/signup/signup/form-content-start.liquid new file mode 100644 index 000000000..10eefb417 --- /dev/null +++ b/examples/directory/prompts/partials/signup/signup/form-content-start.liquid @@ -0,0 +1,4 @@ + + diff --git a/examples/yaml/tenant.yaml b/examples/yaml/tenant.yaml index c8207ca45..61cd56fc8 100644 --- a/examples/yaml/tenant.yaml +++ b/examples/yaml/tenant.yaml @@ -361,9 +361,29 @@ prompts: continueButtonText: Continue without a new passkey passkeyBenefit1Title: Sign in quickly with this device passkeyBenefit2Title: No need to remember a password - enable_ulp_wcag_compliance: false identifier_first: false - partials: {} + universal_login_experience: new + webauthn_platform_first_factor: false + partials: + login: + login: + form-content-start: | + + + signup: + signup: + form-content-start: | + + + form-content-end: | + + screenRenderers: - signup-id: signup-id: ./prompts/screenRenderSettings/signup-id_signup-id.json