@zitadel/config 0.1.0-alpha.17 → 0.1.0-alpha.19

package/README.md

@@ -0,0 +1,27 @@
+# @zitadel/config
+
+Versioned Zitadel local config schemas and defaults — the contract behind the
+`.zitadel/` directory that `zitadel setup` scaffolds into your project.
+
+## What's in here
+
+| Import                                             | What it carries                                                                                           |
+| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `@zitadel/config/schemas`                          | Zod schemas for the local config files (`schemaConfigSchema`, `flowConfigSchema`, `brandingConfigSchema`) |
+| `@zitadel/config/branding-url`                     | Canonical loopback HTTP URL predicate shared by config and browser render gates                           |
+| `@zitadel/config/validate`                         | Validation entry points the CLI runs on `plan`/`apply`                                                    |
+| `@zitadel/config/normalize`                        | Normalization used to compare local files against server state                                            |
+| `@zitadel/config/defaults`                         | The versioned default user schema, login flow, and branding designs                                       |
+| `@zitadel/config/meta-schemas`                     | The JSON meta-schemas the defaults pin                                                                    |
+| `@zitadel/config/template`                         | Liquid template helpers                                                                                   |
+| `@zitadel/config/defaults/default-login.json`      | The default login flow — the authority for flow step shape                                                |
+| `@zitadel/config/defaults/default-human-user.json` | The default user schema                                                                                   |
+
+## The customer-facing part
+
+`zitadel setup` copies the defaults into your repo as
+`.zitadel/{schemas,flows,branding}/`, each with a README explaining how to
+edit it (`defaults/README-schemas.md`, `README-flows.md`,
+`README-branding.md` in this package become those files). Those files are
+yours to edit; `zitadel plan` / `zitadel apply` reconcile them with the
+server, and edits publish new revisions rather than mutating state in place.

package/defaults/README-branding.md

@@ -0,0 +1,96 @@
+# Branding
+
+This directory owns how your login UI looks: `branding.json` (layout preset
+and asset URLs) plus `login.liquid`, the LiquidJS template the
+`<zitadel-login>` component renders for every step.
+
+## Workflow
+
+1. Edit `login.liquid` (and `branding.json` for logo/hero URLs).
+2. `zitadel plan` — validates the template (LiquidJS parse, banned patterns,
+   the required `{% mandatory_gates %}` tag) and shows the pending revision.
+3. `zitadel apply` — publishes an immutable branding revision. The login UI
+   picks up the newest revision on the next step response.
+
+Every edit publishes a new revision; there is no in-place update. Roll back
+by re-applying an earlier template.
+
+## Rules of the template
+
+- Compose `<zl-*>` atoms and plain structural HTML. No `<script>`, no
+  `<style>`, no inline event handlers — theming happens through design
+  tokens, not template CSS.
+- User-facing copy goes through translation keys: `{{ "key" | t }}`.
+- Keep the trailing `{% mandatory_gates %}` tag: it appends any required
+  field, gate, or submit action your template forgot, so a broken template
+  still yields a submittable step.
+
+## Make it yours
+
+- Brand asset URLs go in `branding.json` and must use `https://`. Each template
+  decides which fields it renders: `centered` and `hero` use `logo_url`; `split`
+  and `split-right` use both `logo_url` and `hero_url`; `minimal` uses neither
+  until you add them to `login.liquid`. The `hero` design's brand pane is
+  editable markup rather than a `hero_url` background. Custom fonts are not
+  configurable here yet; load them from the embedding page.
+
+  ```json
+  {
+    "$schema": "../meta/branding.json",
+    "layout": "split",
+    "liquid_template_file": "./login.liquid",
+    "logo_url": "https://example.com/logo.svg",
+    "hero_url": "https://example.com/hero.jpg"
+  }
+  ```
+
+  A well-formed URL that serves nothing is the one branding mistake nothing
+  else catches — it passes validation, publishes a revision, and then renders
+  as an invisible image. So `zitadel plan` probes each asset URL and warns
+  (never fails) when it is unreachable, bodyless, or not an image, and the
+  login UI hides an asset that fails to load, restoring the shipped design's
+  no-asset content rather than leaving a gap. If the host is only
+  reachable from where the login page renders — or you are offline — set
+  `ZITADEL_SKIP_ASSET_PROBE=1` to skip the check. The probe contacts public
+  HTTPS destinations only and re-checks redirects; loopback/private/internal
+  targets are left to the browser-side fallback instead of being requested by
+  the machine running `plan`.
+
+  `layout` is the degrade preset (`centered` or `split`), **not** the complete
+  design catalog. All named designs (`centered`, `split`, `split-right`, `hero`,
+  `minimal`) are delivered as templates and map onto those two values. Switch
+  designs with `zitadel branding eject --design <name>`, don't edit `layout`.
+
+- In the split-family designs (`split`, `split-right`, `hero`) the
+  `.zl-split__brand` pane is yours: structural HTML plus inline `style=""`
+  attributes are allowed; `button`, `input`, and `form` tags are stripped —
+  use `<a>` for landing CTAs. The `hero` design ships a full landing-page
+  starting point on token-styled `zl-hero__*` classes.
+- On narrow viewports the brand pane collapses and the `.zl-split__compact`
+  node inside the form pane takes over (logo or brand line) — keep one so
+  your identity survives on phones.
+- The split chrome is tunable from your template root's `style` attribute
+  (`--zl-split-columns`, `--zl-split-align`, `--zl-split-brand-mobile`), and
+  `zl-split--right` on the wrapper mirrors the panes. Knob reference:
+  [`docs/design/branding/templates.md`](https://github.com/zitadel/nextgen/blob/main/docs/design/branding/templates.md).
+- The "Secured with Zitadel" attribution is licence-gated and on by default.
+- Back-navigation: the engine injects a `kind: "back"` action on steps
+  that can return to their predecessor, and the browser's back gesture
+  submits it automatically — the shipped designs deliberately render **no
+  visible back control**. Your template may render one if you want it;
+  select the action by kind (never by name) and submit it like any other
+  action:
+
+  ```liquid
+  {% assign back = actions | where: "kind", "back" | first %}
+  {% if back %}
+    <a href="#" class="zl-card-nav__link" data-action="{{ back.name }}">{{ back.text_key | t }}</a>
+  {% endif %}
+  ```
+
+  If you list actions generically, exclude `a.kind == 'back'` from button
+  loops so the injected action doesn't render as a stray secondary button.
+
+Start over anytime with `zitadel branding eject --design <name>` (designs:
+`centered`, `split`, `split-right`, `hero`, `minimal`; add `--force` to
+overwrite).

package/defaults/README-flows.md

@@ -37,8 +37,25 @@ Typical edits:
   tokens).
 - **Add or remove a step** — extend `steps[]`.
 - **Rewire transitions** — edit `steps[].transitions` to point at a
-  different next step, or use `action: switch` / `pivot` to jump to
-  another flow.
+  different next step. Cross-flow jumps (`action: switch` / `pivot`)
+  validate in a definition but are **not yet executed by the runtime** —
+  submitting through one fails with a 400 (`code: "flow.unsupported"`);
+  keep transitions within one flow, using a purpose switch (next bullet)
+  for login ↔ register navigation.
+- **Offer a purpose switch in the card** — pair a `kind: navigate`
+  action with a transition that declares a local `purpose`. The default
+  login flow ships this in both directions:
+
+  ```json
+  "register": { "target": "register", "purpose": "register" }
+  ```
+
+  Navigation skips field validation (an empty email box can't block the
+  link), and the declared purpose is what makes the landing leg run with
+  the right semantics — register creates the user instead of trying to
+  verify one. Rules: the purpose must be one this flow's `purposes`
+  serves, the target must be that purpose's entry step, and `purpose`
+  never combines with `action` (which targets another flow instead).
 - **Add another flow** — drop a new JSON file with its own `purposes`
   and a distinct `name` (e.g. a per-team login). See
   [Multiple flows](#multiple-flows) for how it gets selected at runtime.
@@ -70,8 +87,8 @@ experiment can't silently take over `/login` — scope it or pin
 
 ## Presets
 
-`zitadel setup` scaffolds this folder from a preset (`--preset
-password-first` or `--preset passkey-first`). The passkey-first flow
+`zitadel setup` scaffolds this folder from a preset: `password-first` (the
+default root files) or `--preset passkey-first`. The passkey-first flow
 enters login on a fields-less passkey step with an email → password
 fallback path. The preset only decides the starting point — edit
 anything here afterwards.

package/defaults/README-schemas.md

@@ -28,8 +28,8 @@ Here's a simplified example:
     "firstName"
   ],
   "x-auth-methods": {
-    "password": { "enabled": true, "position": 1 },
-    "passkey": { "enabled": true, "position": 2 }
+    "password": { "enabled": true },
+    "passkey": { "enabled": true }
   }
 }
 ```

package/defaults/branding/centered/login.liquid

@@ -0,0 +1,164 @@
+<zl-page-shell data-zl-template-root>
+  {% if branding.logo_url %}
+    <img slot="header" class="zl-card-logo" src="{{ branding.logo_url }}" alt="" />
+  {% endif %}
+  <zl-card>
+    <h1 slot="header" class="zl-card-title">{{ step.texts.title_key | t: identity.display_name }}</h1>
+    {% if step.texts.description_key %}
+      {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}
+      {% if card_subtitle != "" %}
+        <p slot="header" class="zl-card-subtitle">{{ card_subtitle }}</p>
+      {% endif %}
+    {% endif %}
+
+    {% if errors and errors.size > 0 %}
+      {% for err in errors %}
+        {% if err | formLevelError %}
+          {% assign alert_heading = err.text_key | alertHeading %}
+          {% assign alert_body = err.text_key | alertBody %}
+          <zl-alert severity="error" dismissible data-zl-step-error{% if alert_heading != "" %} heading="{{ alert_heading | t }}"{% endif %}>
+            {% if alert_body != "" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}
+          </zl-alert>
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+
+    {% for f in fields %}
+      {% assign field_placeholder = f.text_key | fieldPlaceholder %}
+      {% assign field_help = f.text_key | fieldHelp %}
+      {% assign field_err = f.name | fieldError: errors %}
+      {% case f.type %}
+      {% when 'checkbox' %}
+        <zl-checkbox
+          name="{{ f.name }}"
+          data-testid="zitadel-field-{{ f.name | testid }}"
+          label="{{ f.text_key | t }}"
+          value="true"
+          {% if f.value %}checked{% endif %}
+          {% if field_err != "" %}invalid error="{{ field_err }}"{% endif %}
+        ></zl-checkbox>
+      {% when 'select' %}
+        <zl-select
+          name="{{ f.name }}"
+          data-testid="zitadel-field-{{ f.name | testid }}"
+          label="{{ f.text_key | t }}"
+          value="{{ f.value }}"
+          options='{{ f.validation.enum | selectOptions | json }}'
+          {% if f.required %}required{% endif %}
+          {% if field_placeholder != "" %}placeholder="{{ field_placeholder }}"{% endif %}
+          {% if field_err != "" %}invalid error="{{ field_err }}"{% endif %}
+        ></zl-select>
+      {% else %}
+        {% assign autocomplete_val = '' %}
+        {% if f.name == 'email' %}
+          {% assign autocomplete_val = 'email' %}
+        {% elsif f.type == 'password' and step.name contains 'register' %}
+          {% assign autocomplete_val = 'new-password' %}
+        {% elsif f.type == 'password' %}
+          {% assign autocomplete_val = 'current-password' %}
+        {% endif %}
+        <zl-field
+          name="{{ f.name }}"
+          data-testid="zitadel-field-{{ f.name | testid }}"
+          label="{{ f.text_key | t }}"
+          type="{{ f.type }}"
+          value="{{ f.value }}"
+          {% if autocomplete_val != '' %}autocomplete="{{ autocomplete_val }}"{% endif %}
+          {% if f.required %}required{% endif %}
+          {% if field_placeholder != "" %}placeholder="{{ field_placeholder }}"{% endif %}
+          {% if field_err != "" %}invalid error="{{ field_err }}"{% endif %}
+        >
+          {% if field_help != "" %}
+            <span slot="help">{{ field_help }}</span>
+          {% endif %}
+        </zl-field>
+      {% endcase %}
+    {% endfor %}
+
+    {% assign recover = actions | where: "name", "recover" | first %}
+    {% if recover %}
+      <p class="zl-card-forgot">
+        <a href="#" class="zl-card-forgot__link" data-action="recover">{{ recover.text_key | t }}</a>
+      </p>
+    {% endif %}
+
+    {% for a in actions %}
+      {% if a.primary %}
+        <zl-button
+          hierarchy="primary"
+          size="medium"
+          type="submit"
+          block
+          action="{{ a.name }}"
+          data-testid="zitadel-action-{{ a.name }}"
+          label="{{ a.text_key | t }}"
+          {% if loading %}loading{% endif %}
+        ></zl-button>
+      {% endif %}
+    {% endfor %}
+
+    {% for a in actions %}
+      {% unless a.primary or a.kind == 'back' or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}
+        <zl-button
+          hierarchy="secondary"
+          size="medium"
+          type="button"
+          block
+          action="{{ a.name }}"
+          data-testid="zitadel-action-{{ a.name }}"
+          label="{{ a.text_key | t }}"
+        ></zl-button>
+      {% endunless %}
+    {% endfor %}
+
+    {% assign passkey = actions | where: "name", "passkey" | first %}
+    {% if passkey %}
+      {% unless passkey.primary %}
+        <zl-button
+          hierarchy="secondary"
+          size="medium"
+          block
+          action="passkey"
+          data-testid="zitadel-action-passkey"
+          label="{{ passkey.text_key | t }}"
+        ></zl-button>
+      {% endunless %}
+    {% endif %}
+
+
+    {% assign register = actions | where: "name", "register" | first %}
+    {% if register %}
+      <p class="zl-card-nav">
+        {{ 'identifier.action.register.lead' | t }}<a href="#" class="zl-card-nav__link" data-action="register" data-testid="zitadel-action-register-link">{{ 'identifier.action.register.link' | t }}</a>
+      </p>
+    {% endif %}
+
+    {% assign sign_in = actions | where: "name", "sign_in" | first %}
+    {% if sign_in %}
+      <p class="zl-card-nav">
+        {{ 'register.action.sign_in.lead' | t }}<a href="#" class="zl-card-nav__link" data-action="sign_in" data-testid="zitadel-action-sign_in-link">{{ 'register.action.sign_in.link' | t }}</a>
+      </p>
+    {% endif %}
+
+    {% if challenge %}
+      {% if challenge.method == "passkey" or challenge.method == "passkey_register" %}
+        {% assign ceremony = "authenticate" %}
+        {% assign submit_method = challenge.method %}
+        {% if challenge.method == "passkey_register" or challenge.options.user %}
+          {% assign ceremony = "register" %}
+          {% assign submit_method = "passkey_register" %}
+        {% endif %}
+        <zl-passkey
+          ceremony="{{ ceremony }}"
+          method="{{ submit_method }}"
+          challenge-id="{{ challenge.challenge_id }}"
+          options='{{ challenge.options | json }}'
+          pending-label="{{ 'passkey.pending.status' | t }}"
+          cancel-label="{{ 'action.cancel' | t }}"
+        ></zl-passkey>
+      {% endif %}
+    {% endif %}
+
+    {% mandatory_gates %}
+  </zl-card>
+</zl-page-shell>

package/defaults/branding/hero/login.liquid

@@ -0,0 +1,224 @@
+<zl-page-shell data-zl-template-root>
+  <div class="zl-split">
+    <aside class="zl-split__brand">
+      {% comment %} ──────────────────────────────────────────────────────────
+        YOUR LANDING CONTENT — everything inside this aside is yours.
+        Edit the copy and structure freely: structural HTML (div, section,
+        nav, h1–h6, ul, li, a, img, …) plus inline style="" attributes are
+        allowed; button, input, form, script, and style tags are stripped —
+        use plain anchors for landing CTAs. The zl-hero__* classes keep
+        this pane on design tokens so palettes and theme mode apply.
+
+        The login card in the section below is fully wired to the flow
+        engine; leave its zl-* atoms intact. Layout knobs (set on the root
+        element's style attribute): --zl-split-columns, --zl-split-align,
+        --zl-split-brand-mobile. Add zl-split--right to the wrapper div to
+        mirror the panes. More in .zitadel/branding/README.md.
+      ────────────────────────────────────────────────────────────── {% endcomment %}
+      <div class="zl-hero">
+        <nav class="zl-hero__nav">
+          <span class="zl-hero__brand">
+            {% if branding.logo_url %}
+              <img class="zl-hero__brand-logo" src="{{ branding.logo_url }}" alt="" data-zl-asset-fallback />
+              <span class="zl-hero__brand-mark" aria-hidden="true" hidden data-zl-asset-fallback-content></span>
+            {% else %}
+              <span class="zl-hero__brand-mark" aria-hidden="true"></span>
+            {% endif %}
+            Your brand
+          </span>
+          <span class="zl-hero__nav-links">
+            <a href="#">Product</a>
+            <a href="#">Pricing</a>
+            <a href="#">Docs</a>
+          </span>
+        </nav>
+
+        <p class="zl-hero__eyebrow">Your product category</p>
+        <h2 class="zl-hero__headline">A headline about what you ship.</h2>
+        <p class="zl-hero__sub">
+          Use this pane to tell visitors why they sign up: what your product
+          does, who it is for, and what happens after they sign in. Replace
+          every line here before you publish.
+        </p>
+
+        <ul class="zl-hero__bullets">
+          <li>Your first selling point</li>
+          <li>Your second selling point</li>
+          <li>Your third selling point</li>
+        </ul>
+
+        <p class="zl-hero__footnote">
+          Replace this line with real social proof, such as customer logos or
+          a certification you actually hold.
+        </p>
+      </div>
+    </aside>
+    <section class="zl-split__form">
+    {% if branding.logo_url %}
+      <img class="zl-split__compact" src="{{ branding.logo_url }}" alt="" data-zl-asset-fallback />
+      <p class="zl-split__compact zl-hero__compact-brand" hidden data-zl-asset-fallback-content>Your brand</p>
+    {% else %}
+      <p class="zl-split__compact zl-hero__compact-brand">Your brand</p>
+    {% endif %}
+    <zl-card>
+      <h1 slot="header" class="zl-card-title">{{ step.texts.title_key | t: identity.display_name }}</h1>
+      {% if step.texts.description_key %}
+        {% assign card_subtitle = step.texts.description_key | t: identity.display_name %}
+        {% if card_subtitle != "" %}
+          <p slot="header" class="zl-card-subtitle">{{ card_subtitle }}</p>
+        {% endif %}
+      {% endif %}
+
+      {% if errors and errors.size > 0 %}
+        {% for err in errors %}
+          {% if err | formLevelError %}
+            {% assign alert_heading = err.text_key | alertHeading %}
+            {% assign alert_body = err.text_key | alertBody %}
+            <zl-alert severity="error" dismissible data-zl-step-error{% if alert_heading != "" %} heading="{{ alert_heading | t }}"{% endif %}>
+              {% if alert_body != "" %}{{ alert_body | t }}{% elsif err.text_key %}{{ err.text_key | t }}{% else %}{{ err.message }}{% endif %}
+            </zl-alert>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+
+      {% for f in fields %}
+        {% assign field_placeholder = f.text_key | fieldPlaceholder %}
+        {% assign field_help = f.text_key | fieldHelp %}
+        {% assign field_err = f.name | fieldError: errors %}
+        {% case f.type %}
+        {% when 'checkbox' %}
+          <zl-checkbox
+            name="{{ f.name }}"
+            data-testid="zitadel-field-{{ f.name | testid }}"
+            label="{{ f.text_key | t }}"
+            value="true"
+            {% if f.value %}checked{% endif %}
+            {% if field_err != "" %}invalid error="{{ field_err }}"{% endif %}
+          ></zl-checkbox>
+        {% when 'select' %}
+          <zl-select
+            name="{{ f.name }}"
+            data-testid="zitadel-field-{{ f.name | testid }}"
+            label="{{ f.text_key | t }}"
+            value="{{ f.value }}"
+            options='{{ f.validation.enum | selectOptions | json }}'
+            {% if f.required %}required{% endif %}
+            {% if field_placeholder != "" %}placeholder="{{ field_placeholder }}"{% endif %}
+          {% if field_err != "" %}invalid error="{{ field_err }}"{% endif %}
+          ></zl-select>
+        {% else %}
+          {% assign autocomplete_val = '' %}
+          {% if f.name == 'email' %}
+            {% assign autocomplete_val = 'email' %}
+          {% elsif f.type == 'password' and step.name contains 'register' %}
+            {% assign autocomplete_val = 'new-password' %}
+          {% elsif f.type == 'password' %}
+            {% assign autocomplete_val = 'current-password' %}
+          {% endif %}
+          <zl-field
+            name="{{ f.name }}"
+            data-testid="zitadel-field-{{ f.name | testid }}"
+            label="{{ f.text_key | t }}"
+            type="{{ f.type }}"
+            value="{{ f.value }}"
+            {% if autocomplete_val != '' %}autocomplete="{{ autocomplete_val }}"{% endif %}
+            {% if f.required %}required{% endif %}
+            {% if field_placeholder != "" %}placeholder="{{ field_placeholder }}"{% endif %}
+            {% if field_err != "" %}invalid error="{{ field_err }}"{% endif %}
+          >
+            {% if field_help != "" %}
+              <span slot="help">{{ field_help }}</span>
+            {% endif %}
+          </zl-field>
+        {% endcase %}
+      {% endfor %}
+
+      {% assign recover = actions | where: "name", "recover" | first %}
+      {% if recover %}
+        <p class="zl-card-forgot">
+          <a href="#" class="zl-card-forgot__link" data-action="recover">{{ recover.text_key | t }}</a>
+        </p>
+      {% endif %}
+
+      {% for a in actions %}
+        {% if a.primary %}
+          <zl-button
+            hierarchy="primary"
+            size="medium"
+            type="submit"
+            block
+            action="{{ a.name }}"
+            data-testid="zitadel-action-{{ a.name }}"
+            label="{{ a.text_key | t }}"
+            {% if loading %}loading{% endif %}
+          ></zl-button>
+        {% endif %}
+      {% endfor %}
+
+      {% for a in actions %}
+        {% unless a.primary or a.kind == 'back' or a.name == 'passkey' or a.name == 'register' or a.name == 'sign_in' or a.name == 'recover' %}
+          <zl-button
+            hierarchy="secondary"
+            size="medium"
+            type="button"
+            block
+            action="{{ a.name }}"
+            data-testid="zitadel-action-{{ a.name }}"
+            label="{{ a.text_key | t }}"
+          ></zl-button>
+        {% endunless %}
+      {% endfor %}
+
+      {% assign passkey = actions | where: "name", "passkey" | first %}
+      {% if passkey %}
+        {% unless passkey.primary %}
+          <zl-button
+            hierarchy="secondary"
+            size="medium"
+            block
+            action="passkey"
+            data-testid="zitadel-action-passkey"
+            label="{{ passkey.text_key | t }}"
+          ></zl-button>
+        {% endunless %}
+      {% endif %}
+
+
+      {% assign register = actions | where: "name", "register" | first %}
+      {% if register %}
+        <p class="zl-card-nav">
+          {{ 'identifier.action.register.lead' | t }}<a href="#" class="zl-card-nav__link" data-action="register" data-testid="zitadel-action-register-link">{{ 'identifier.action.register.link' | t }}</a>
+        </p>
+      {% endif %}
+
+      {% assign sign_in = actions | where: "name", "sign_in" | first %}
+      {% if sign_in %}
+        <p class="zl-card-nav">
+          {{ 'register.action.sign_in.lead' | t }}<a href="#" class="zl-card-nav__link" data-action="sign_in" data-testid="zitadel-action-sign_in-link">{{ 'register.action.sign_in.link' | t }}</a>
+        </p>
+      {% endif %}
+
+      {% if challenge %}
+        {% if challenge.method == "passkey" or challenge.method == "passkey_register" %}
+          {% assign ceremony = "authenticate" %}
+          {% assign submit_method = challenge.method %}
+          {% if challenge.method == "passkey_register" or challenge.options.user %}
+            {% assign ceremony = "register" %}
+            {% assign submit_method = "passkey_register" %}
+          {% endif %}
+          <zl-passkey
+            ceremony="{{ ceremony }}"
+            method="{{ submit_method }}"
+            challenge-id="{{ challenge.challenge_id }}"
+            options='{{ challenge.options | json }}'
+            pending-label="{{ 'passkey.pending.status' | t }}"
+            cancel-label="{{ 'action.cancel' | t }}"
+          ></zl-passkey>
+        {% endif %}
+      {% endif %}
+
+      {% mandatory_gates %}
+    </zl-card>
+    </section>
+  </div>
+</zl-page-shell>