@excom/web-authn 0.1.0

package/.rush/temp/chunked-rush-logs/web-authn.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/web-authn.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/web-authn.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 36.38584700000001
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 53.987307999999985
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 108.155575
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,4 @@
+{
+  "../../packages/web-authn": "../../packages/web-authn:17NeRWNV7ASUpQlpof8OGTmS5fiIo/Je4xCdP8FuMh0=:",
+  "@simplewebauthn/browser@13.2.2": "@simplewebauthn/browser@13.2.2:410ZPeyt1GhQ1ofae14PzU+ZB+gpNY5i7/CdhT/Fviw=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/index.ts

@@ -0,0 +1,17 @@
+import { WebAuthn } from "./web-authn";
+
+WebAuthn.define();
+
+export { WebAuthn };
+
+type T_HTMLWebAuthnElement = typeof WebAuthn.CustomElement;
+declare global {
+  interface HTMLWebAuthnElement extends T_HTMLWebAuthnElement {}
+  interface Window {
+    HTMLWebAuthnElement: HTMLWebAuthnElement;
+  }
+  interface HTMLElementTagNameMap {
+    "web-authn": HTMLWebAuthnElement;
+  }
+}
+export type { HTMLWebAuthnElement };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@excom/web-authn",
+  "version": "0.1.0",
+  "description": "<web-authn> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@simplewebauthn/browser": "^13.1.2",
+    "@excom/neutron": "^0.1.0",
+    "@excom/fetchable-element": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/web-authn"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/web-authn/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "web-authn",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/rush-logs/web-authn.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/web-authn.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/web-authn.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/web-authn.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/web-authn.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/web-authn.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/support/custom-elements.json

@@ -0,0 +1,156 @@
+{
+  "schemaVersion": "1.0.0",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "web-authn.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "WebAuthn",
+          "customElement": true,
+          "tagName": "web-authn",
+          "mixins": [
+            {
+              "name": "FetchableElement",
+              "package": "@excom/fetchable-element"
+            }
+          ],
+          "summary": "Passkey register / authenticate wired to a `<form>`.",
+          "description": "Native form `submit` this element intercepts, not a Neutron emit.",
+          "attributes": [
+            {
+              "name": "form-ref",
+              "type": {
+                "text": "string"
+              },
+              "description": "CSS selector for the `<form>` to intercept. Must be a descendant to be heard directly — point elsewhere and invoke the `--submit` command instead.",
+              "fieldName": "formRef",
+              "default": ":scope form",
+              "values": [
+                "<CSS Selector>"
+              ]
+            },
+            {
+              "name": "start-method",
+              "type": {
+                "text": "string"
+              },
+              "description": "Which WebAuthn ceremony to run.",
+              "fieldName": "startMethod",
+              "values": [
+                "register",
+                "authenticate"
+              ]
+            },
+            {
+              "name": "verify-url",
+              "type": {
+                "text": "string"
+              },
+              "description": "Endpoint that verifies the credential produced by the browser prompt (your server's `verifyRegistrationResponse` / `verifyAuthenticationResponse`). Receives the credential as the request body.",
+              "fieldName": "verifyUrl",
+              "values": [
+                "<URL>"
+              ]
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formRef",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "readonly": false,
+              "description": "CSS selector for the `<form>` to intercept. Must be a descendant to be heard directly — point elsewhere and invoke the `--submit` command instead.",
+              "default": ":scope form",
+              "_neutron": {
+                "surface": "option"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "startMethod",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "readonly": false,
+              "description": "Which WebAuthn ceremony to run.",
+              "_neutron": {
+                "surface": "option"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "verifyUrl",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "readonly": false,
+              "description": "Endpoint that verifies the credential produced by the browser prompt (your server's `verifyRegistrationResponse` / `verifyAuthenticationResponse`). Receives the credential as the request body.",
+              "_neutron": {
+                "surface": "option"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "web-authn-submit",
+              "description": "Internal — dispatched once the browser ceremony (register or authenticate) resolves, just before the verify-url fetch runs. The credential is the request body. Default action calls `doFetch()`.",
+              "type": {
+                "text": "WebAuthnSubmitEvent",
+                "expanded": "CustomEvent & { type: \"web-authn-submit\"; detail: [url: string, requestInit: RequestInit]; bubbles: true; cancelable: true; composed: true }"
+              }
+            }
+          ],
+          "_neutron": {
+            "listens": [
+              {
+                "name": "submit",
+                "description": "The default action of the `<form>` matched by `form-ref`; prevented, then starts the ceremony.",
+                "type": {
+                  "text": "WebAuthnNativeSubmitEvent",
+                  "expanded": "SubmitEvent & { type: \"submit\"; bubbles: true; cancelable: true; composed: false; }"
+                }
+              }
+            ],
+            "commands": [
+              {
+                "name": "--submit",
+                "description": "Starts the ceremony programmatically (`<button command=\"--submit\" commandfor=\"…\">`) — the only option when `form-ref` points to a form that isn't a descendant."
+              }
+            ],
+            "defaultActions": [
+              {
+                "name": "web-authn-submit",
+                "description": "Calls `doFetch(url, requestInit)` with the event's detail (the verify-url request)."
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WebAuthn",
+          "declaration": {
+            "name": "WebAuthn",
+            "module": "web-authn.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "web-authn",
+          "declaration": {
+            "name": "WebAuthn",
+            "module": "web-authn.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/support/demos/authenticate.html

@@ -0,0 +1,24 @@
+<section>
+  <web-authn options-url="/api/webauthn/authenticate/options" verify-url="/api/webauthn/authenticate/verify"
+    start-method="authenticate">
+    <form>
+      <label>
+        Username
+        <input name="username" required autocomplete="username webauthn">
+      </label>
+      <button type="submit">Sign in with passkey</button>
+    </form>
+    <output></output>
+  </web-authn>
+  <quark-sheet>
+    web-authn[is-success] {
+      $res: prop("provision").body;
+      output {
+        content: "verified: #{$res.verified}";
+      }
+    }
+    web-authn[is-error] output {
+      content: "Ceremony failed (this mock needs an authenticator).";
+    }
+  </quark-sheet>
+</section>

package/support/demos/register.html

@@ -0,0 +1,24 @@
+<section>
+  <web-authn options-url="/api/webauthn/register/options" verify-url="/api/webauthn/register/verify"
+    start-method="register">
+    <form>
+      <label>
+        Username
+        <input name="username" required autocomplete="username">
+      </label>
+      <button type="submit">Register passkey</button>
+    </form>
+    <output></output>
+  </web-authn>
+  <quark-sheet>
+    web-authn[is-success] {
+      $res: prop("provision").body;
+      output {
+        content: "verified: #{$res.verified}";
+      }
+    }
+    web-authn[is-error] output {
+      content: "Ceremony failed (this mock needs an authenticator).";
+    }
+  </quark-sheet>
+</section>

package/support/dist-docs/web-authn.md

@@ -0,0 +1,205 @@
+# web-authn
+
+Passkey register / authenticate with HTML. Pair it with Quark to render the result.
+
+
+```html
+<section>
+  <web-authn options-url="/api/webauthn/register/options" verify-url="/api/webauthn/register/verify"
+    start-method="register">
+    <form>
+      <label>
+        Username
+        <input name="username" required autocomplete="username">
+      </label>
+      <button type="submit">Register passkey</button>
+    </form>
+    <output></output>
+  </web-authn>
+  <quark-sheet>
+    web-authn[is-success] {
+      $res: prop("provision").body;
+      output {
+        content: "verified: #{$res.verified}";
+      }
+    }
+    web-authn[is-error] output {
+      content: "Ceremony failed (this mock needs an authenticator).";
+    }
+  </quark-sheet>
+</section>
+```
+ 
+
+```html
+<web-authn start-method="register" options-url="/api/registration-options" verify-url="/api/users">
+    <form>
+        <button type="submit">One click sign up!</button>
+    </form>
+</web-authn>
+```
+
+## Features
+
+- **Provides data** Use Quark to render the verify response
+- **Full ceremony** Fetches options, runs the browser's WebAuthn prompt, then verifies — one element
+- **Register or authenticate** `start-method` picks the ceremony
+- **Submit command** `--submit` starts the ceremony programmatically — for forms outside the DOM subtree, or buttons outside the `<form>`
+- **Chainable** `web-authn-success` fires like any `{tag}-success` event — chain a redirect or next step
+- **Highly configurable** Headers, credentials, redirect, etc
+
+## Installation
+
+
+`@excom/web-authn` v0.1.0
+
+```bash
+pnpm add @excom/web-authn
+```
+
+```bash
+npm install @excom/web-authn
+```
+
+```bash
+yarn add @excom/web-authn
+```
+
+### Import
+
+```ts
+import "@excom/web-authn";
+```
+
+
+
+Depends on [`@simplewebauthn/browser`](https://simplewebauthn.dev/) for the actual WebAuthn calls (`startRegistration` / `startAuthentication`). You can use any server-side library to handle the WebAuthn requests, but it is recommended to use the counterpart library, [`@simplewebauthn/server`](https://simplewebauthn.dev/), since they seamlessly understand the same contract.
+
+## Usage
+
+```html
+<web-authn options-url="/api/webauthn/register/options"
+  verify-url="/api/webauthn/register/verify" start-method="register">
+  <form>
+    <input name="username" required>
+    <button type="submit">Register passkey</button>
+  </form>
+</web-authn>
+```
+
+On submit: `options-url` is fetched for ceremony options, the browser's native passkey prompt runs (`@simplewebauthn/browser`), and the resulting credential is posted to `verify-url`. Use `start-method="authenticate"` for sign-in instead of registration.
+
+Hook the lifecycle state with CSS:
+
+```css
+web-authn[is-loading] { /* show loading spinner */ }
+web-authn[is-error]::before { content: "An error occurred." }
+```
+
+Or Quark:
+
+```quark
+web-authn[is-success] {
+  $res: prop("provision").body;
+  span { content: $res.verified; }
+}
+```
+
+Chain a next step off success the same way you would for any `<super-form>` or `<provider-fetch>`:
+
+```html
+<event-handler listen-for="web-authn-success" fire-event="onboarding-step-complete">
+  <web-authn options-url="/api/webauthn/register/options"
+    verify-url="/api/webauthn/register/verify" start-method="register">
+    <form><input name="username"><button type="submit">Register</button></form>
+  </web-authn>
+</event-handler>
+```
+
+### Examples
+
+#### Authenticate
+
+
+```html
+<section>
+  <web-authn options-url="/api/webauthn/authenticate/options" verify-url="/api/webauthn/authenticate/verify"
+    start-method="authenticate">
+    <form>
+      <label>
+        Username
+        <input name="username" required autocomplete="username webauthn">
+      </label>
+      <button type="submit">Sign in with passkey</button>
+    </form>
+    <output></output>
+  </web-authn>
+  <quark-sheet>
+    web-authn[is-success] {
+      $res: prop("provision").body;
+      output {
+        content: "verified: #{$res.verified}";
+      }
+    }
+    web-authn[is-error] output {
+      content: "Ceremony failed (this mock needs an authenticator).";
+    }
+  </quark-sheet>
+</section>
+```
+
+
+### API Reference
+
+
+#### Attributes
+
+| Name | Surface | Type | Default | Values | Description | Inherited from |
+| --- | --- | --- | --- | --- | --- | --- |
+| `form-ref` | option | `string` | `":scope form"` | `<CSS Selector>` | CSS selector for the `<form>` to intercept. Must be a descendant to be heard directly — point elsewhere and invoke the `--submit` command instead. |  |
+| `start-method` | option | `string` |  | `"register"` \| `"authenticate"` | Which WebAuthn ceremony to run. |  |
+| `verify-url` | option | `string` |  | `<URL>` | Endpoint that verifies the credential produced by the browser prompt (your server's `verifyRegistrationResponse` / `verifyAuthenticationResponse`). Receives the credential as the request body. |  |
+| `has-body` | option | `boolean` |  |  | Force a request body even for methods that don't imply one (`GET` / `HEAD`). Already implied for `POST` / `PUT` / `PATCH`. | `@excom/fetchable-element` |
+| `api-url` | option | `string` | `""` |  | Endpoint URL. When the request has no body, the JSON payload (from `form-ref` or custom `doFetch()` args) is merged in as query params instead. | `@excom/fetchable-element` |
+| `api-method` | option | `string` | `"GET"` |  | HTTP method. Always uppercased before the request is sent. | `@excom/fetchable-element` |
+| `header-accept` | option | `string` | `"application/json"` |  | `Accept` request header. | `@excom/fetchable-element` |
+| `header-content-type` | option | `string` | `"application/json"` |  | `Content-Type` request header. Dropped entirely when the request has no body. | `@excom/fetchable-element` |
+| `header-cache-control` | option | `string` |  |  | `Cache-Control` request header. Unset by default (browser default caching applies). | `@excom/fetchable-element` |
+| `fetch-redirect` | option | `string` |  | `"follow"` \| `"error"` \| `"manual"` | `RequestInit.redirect` mode. Unset defers to the browser default (`follow`). | `@excom/fetchable-element` |
+| `fetch-credentials` | option | `string` | `"include"` | `"omit"` \| `"same-origin"` \| `"include"` | `RequestInit.credentials` mode. | `@excom/fetchable-element` |
+| `is-loading` | state | `boolean` |  |  | A request is currently in flight. | `@excom/fetchable-element` |
+| `is-success` | state | `boolean` |  |  | The most recent request resolved successfully. Mutually exclusive with `is-error`. | `@excom/fetchable-element` |
+| `is-error` | state | `boolean` |  |  | The most recent request failed (non-2xx status, network error, or a thrown error other than `AbortError`). Fires with the `error` event. | `@excom/fetchable-element` |
+
+#### Provision
+
+| Name | Type | Description | Inherited from |
+| --- | --- | --- | --- |
+| `provision` | `FetchResponse` (`{ bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; }`) | Response payload on success, or error payload on failure. Success shape: `{ status, statusText, ok, headers, url, redirected, bodyUsed, type, body }`. Failure shape is either that same response shape (server responded with an error status) or `{ message, stack }` (request never completed). Not reflected as an attribute. | `@excom/fetchable-element` |
+
+#### Fires
+
+| Name | Type | Description | Inherited from |
+| --- | --- | --- | --- |
+| `web-authn-submit` | `WebAuthnSubmitEvent` (`CustomEvent & { type: "web-authn-submit"; detail: [url: string, requestInit: RequestInit]; bubbles: true; cancelable: true; composed: true }`) | Internal — dispatched once the browser ceremony (register or authenticate) resolves, just before the verify-url fetch runs. The credential is the request body. Default action calls `doFetch()`. |  |
+| `web-authn-loading` | `FetchableLoadingEvent` (`CustomEvent & { type: "{tag}-loading"; detail: void; bubbles: true; cancelable: true; composed: true }`) | Dispatched immediately before the request is sent. | `@excom/fetchable-element` |
+| `web-authn-success` | `FetchableSuccessEvent` (`CustomEvent & { type: "{tag}-success"; detail: { bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; }; bubbles: true; cancelable: true; composed: true }`) | Dispatched when the request resolves successfully. `event.detail` is the parsed response (see `provision`). | `@excom/fetchable-element` |
+| `web-authn-error` | `FetchableErrorEvent` (`CustomEvent & { type: "{tag}-error"; detail: { bodyUsed: boolean; headers: [string, string][]; ok: boolean; redirected: boolean; status: number; statusText: string; type: ResponseType; url: string; body: unknown; } \| { message: string; stack?: string }; bubbles: true; cancelable: true; composed: true }`) | Dispatched when the request fails — non-2xx status, network error, or a thrown error. `event.detail` is the error payload (see `provision`). Not dispatched for aborted requests. | `@excom/fetchable-element` |
+
+#### Listens for
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `submit` | `WebAuthnNativeSubmitEvent` (`SubmitEvent & { type: "submit"; bubbles: true; cancelable: true; composed: false; }`) | The default action of the `<form>` matched by `form-ref`; prevented, then starts the ceremony. |
+
+#### Commands
+
+| Command | Action |
+| --- | --- |
+| `--submit` | Starts the ceremony programmatically (`<button command="--submit" commandfor="…">`) — the only option when `form-ref` points to a form that isn't a descendant. |
+
+#### Default actions
+
+| Event | Default behavior (unless preventDefault() is called) |
+| --- | --- |
+| `web-authn-submit` | Calls `doFetch(url, requestInit)` with the event's detail (the verify-url request). |

package/support/docs/README.md

@@ -0,0 +1,81 @@
+# web-authn
+
+Passkey register / authenticate with HTML. Pair it with Quark to render the result.
+
+<include-content data-demo="register"></include-content> 
+
+```html
+<web-authn start-method="register" options-url="/api/registration-options" verify-url="/api/users">
+    <form>
+        <button type="submit">One click sign up!</button>
+    </form>
+</web-authn>
+```
+
+## Features
+
+- **Provides data** Use Quark to render the verify response
+- **Full ceremony** Fetches options, runs the browser's WebAuthn prompt, then verifies — one element
+- **Register or authenticate** `start-method` picks the ceremony
+- **Submit command** `--submit` starts the ceremony programmatically — for forms outside the DOM subtree, or buttons outside the `<form>`
+- **Chainable** `web-authn-success` fires like any `{tag}-success` event — chain a redirect or next step
+- **Highly configurable** Headers, credentials, redirect, etc
+
+## Installation
+
+<include-content is-active template-ref="/views/install-section/install-section.html"></include-content>
+
+Depends on [`@simplewebauthn/browser`](https://simplewebauthn.dev/) for the actual WebAuthn calls (`startRegistration` / `startAuthentication`). You can use any server-side library to handle the WebAuthn requests, but it is recommended to use the counterpart library, [`@simplewebauthn/server`](https://simplewebauthn.dev/), since they seamlessly understand the same contract.
+
+## Usage
+
+```html
+<web-authn options-url="/api/webauthn/register/options"
+  verify-url="/api/webauthn/register/verify" start-method="register">
+  <form>
+    <input name="username" required>
+    <button type="submit">Register passkey</button>
+  </form>
+</web-authn>
+```
+
+On submit: `options-url` is fetched for ceremony options, the browser's native passkey prompt runs (`@simplewebauthn/browser`), and the resulting credential is posted to `verify-url`. Use `start-method="authenticate"` for sign-in instead of registration.
+
+Hook the lifecycle state with CSS:
+
+```css
+web-authn[is-loading] { /* show loading spinner */ }
+web-authn[is-error]::before { content: "An error occurred." }
+```
+
+Or Quark:
+
+```quark
+web-authn[is-success] {
+  $res: prop("provision").body;
+  span { content: $res.verified; }
+}
+```
+
+Chain a next step off success the same way you would for any `<super-form>` or `<provider-fetch>`:
+
+```html
+<event-handler listen-for="web-authn-success" fire-event="onboarding-step-complete">
+  <web-authn options-url="/api/webauthn/register/options"
+    verify-url="/api/webauthn/register/verify" start-method="register">
+    <form><input name="username"><button type="submit">Register</button></form>
+  </web-authn>
+</event-handler>
+```
+
+### Examples
+
+#### Authenticate
+
+<include-content data-demo="authenticate"></include-content>
+
+### API Reference
+
+<include-content is-active template-ref="/views/api-reference/api-reference.html"></include-content>
+
+