@glydi/passkey-svelte 0.1.0

package/README.md

@@ -0,0 +1,144 @@
+# @glydi/passkey-svelte
+
+Thin Svelte adapter for the Glide passkey Web Component.
+
+## Install
+
+Glide is not yet published to npm. Install from a packed tarball or via `pnpm link`.
+
+**Tarball (recommended):**
+
+```json
+{
+  "dependencies": {
+    "@glydi/passkey-svelte": "file:../glide/dist-packs/glydi-passkey-svelte-0.1.0.tgz",
+    "@glydi/passkey-core":   "file:../glide/dist-packs/glydi-passkey-core-0.1.0.tgz"
+  },
+  "pnpm": {
+    "overrides": {
+      "@glydi/passkey-core": "file:../glide/dist-packs/glydi-passkey-core-0.1.0.tgz"
+    }
+  }
+}
+```
+
+The `pnpm.overrides` entry for `@glydi/passkey-core` prevents pnpm from trying to fetch
+the transitive peer from the npm registry. See [docs/DISTRIBUTION.md](../../docs/DISTRIBUTION.md)
+for full tarball and `pnpm link` instructions, including how to produce the tarballs.
+
+> **Forthcoming:** `npm install @glydi/passkey-svelte` will be the public form once the
+> package is published. It is not yet available on npm.
+
+## Minimal Usage
+
+This package has **two entry points**:
+
+| Entry point | Import path | What you get |
+|---|---|---|
+| `"."` (main) | `@glydi/passkey-svelte` | `createPasskeyAuth` headless action + types |
+| `"./PasskeyButton.svelte"` | `@glydi/passkey-svelte/PasskeyButton.svelte` | Ready-made Svelte component |
+
+> **Note:** `PasskeyButton.svelte` is **not** exported from the `"."` entry — it lives at the
+> separate `./PasskeyButton.svelte` subpath and ships as source so your Svelte compiler handles it.
+
+### 1. Component: `PasskeyButton.svelte`
+
+Import from the `./PasskeyButton.svelte` subpath:
+
+```svelte
+<!-- Source: packages/svelte/src/PasskeyButton.svelte -->
+<script>
+  import PasskeyButton from "@glydi/passkey-svelte/PasskeyButton.svelte";
+</script>
+
+<PasskeyButton
+  mode="signup"
+  label="Register passkey"
+  onSuccess={(r) => console.log(r.user.id)}
+  onError={(e) => console.warn(e.code)}
+/>
+```
+
+### 2. Headless: `createPasskeyAuth` action
+
+For custom UI, use the headless `createPasskeyAuth` action from the main entry point.
+It returns a `PasskeyAuth` store with a Svelte action (`use:auth.attach`) and reactive
+state (`$auth`):
+
+```svelte
+<!-- Source: packages/svelte/src/usePasskeyAuth.ts -->
+<script>
+  import { createPasskeyAuth } from "@glydi/passkey-svelte";
+  const auth = createPasskeyAuth({ mode: "auto" });
+  $: ({ phase, isPending, error, user } = $auth);
+</script>
+
+<biometric-auth-button use:auth.attach mode="auto" />
+```
+
+## API
+
+### `PasskeyButton.svelte`
+
+A ready-made Svelte component wrapping `<biometric-auth-button>`. Import from
+`@glydi/passkey-svelte/PasskeyButton.svelte` (the `./PasskeyButton.svelte` subpath).
+The component ships as **Svelte source** — your project's Svelte compiler handles it.
+Any extra attributes are forwarded via `{...$$restProps}` to `<biometric-auth-button>`.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `"auto" \| "signin" \| "signup"` | `"auto"` | Auth mode. See AuthMode callout below. |
+| `username` | `string \| undefined` | `undefined` | Username hint for registration/conditional UI. |
+| `label` | `string \| undefined` | `undefined` | Button label text. |
+| `endpoints` | `GlideEndpoints \| undefined` | `undefined` | Override API endpoint paths. |
+| `fetchOptions` | `RequestInit \| undefined` | `undefined` | Merged into every `fetch` call. |
+| `onSuccess` | `(result: AuthResult) => void \| undefined` | `undefined` | Called after successful authentication. |
+| `onError` | `(error: GlideError) => void \| undefined` | `undefined` | Called when authentication fails. |
+| `onPhaseChange` | `(detail: { phase: AuthPhase }) => void \| undefined` | `undefined` | Called on every phase transition. |
+
+> **Valid `mode` values are `"auto"`, `"signin"`, and `"signup"` only.** Using `"register"`
+> or `"authenticate"` is invalid and will silently no-op.
+
+### `createPasskeyAuth(options?)`
+
+Headless action factory. Returns a `PasskeyAuth` object:
+
+| Member | Type | Description |
+|--------|------|-------------|
+| `subscribe` | `Readable<PasskeyAuthState>["subscribe"]` | Svelte store protocol — use `$auth` in markup. |
+| `attach(node)` | `(node: HTMLElement) => { destroy(): void }` | Svelte action — apply as `use:auth.attach`. |
+| `trigger()` | `() => void` | Imperatively start auth (same as clicking the button). |
+| `reset()` | `() => void` | Reset phase and error back to `"idle"`. |
+
+**`PasskeyAuthState`** (readable via `$auth`):
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `phase` | `AuthPhase` | Current auth phase (`"idle"`, `"loading"`, `"success"`, etc.). |
+| `isPending` | `boolean` | `true` during `"loading"` or `"authenticating"`. |
+| `isUnsupported` | `boolean` | `true` when `phase === "unsupported"`. |
+| `error` | `GlideError \| null` | Last error, or `null`. |
+| `user` | `GlideUser \| null` | Authenticated user after success, or `null`. |
+
+**`UsePasskeyAuthOptions`** (all optional):
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `mode` | `"auto" \| "signin" \| "signup"` | Auth mode. Default `"auto"`. |
+| `username` | `string` | Username hint. |
+| `endpoints` | `Partial<GlideEndpoints>` | Override API endpoint paths. |
+| `fetchOptions` | `RequestInit` | Merged into every `fetch` call. |
+| `onSuccess` | `(result: AuthResult) => void` | Success callback. |
+| `onError` | `(error: GlideError) => void` | Error callback. |
+
+### Re-exported types
+
+`AuthMode`, `AuthPhase`, `AuthResult`, `GlideEndpoints`, `GlideError`, `GlideUser`
+
+## Links
+
+- [Root README](../../README.md) — architecture overview
+- [Quickstart](../../docs/QUICKSTART.md) — full Next.js App Router integration walkthrough
+- [Distribution guide](../../docs/DISTRIBUTION.md) — tarball and pnpm link install details

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import { Readable } from 'svelte/store';
+import { AuthPhase, GlideError, GlideUser, GlideEndpoints, AuthResult } from '@glydi/passkey-core';
+export { AuthMode, AuthPhase, AuthResult, GlideEndpoints, GlideError, GlideUser } from '@glydi/passkey-core';
+
+interface UsePasskeyAuthOptions {
+    mode?: "auto" | "signin" | "signup";
+    username?: string;
+    endpoints?: Partial<GlideEndpoints>;
+    /** Forwarded to fetch (e.g. custom headers). credentials:"include" is default. */
+    fetchOptions?: RequestInit;
+    onSuccess?: (result: AuthResult) => void;
+    onError?: (error: GlideError) => void;
+}
+/** Reactive snapshot of the auth flow, exposed as a Svelte readable store. */
+interface PasskeyAuthState {
+    phase: AuthPhase;
+    /** True while the ceremony is in flight. */
+    isPending: boolean;
+    /** True once a feature-detect failure is reflected by the element. */
+    isUnsupported: boolean;
+    error: GlideError | null;
+    user: GlideUser | null;
+}
+/** Svelte action: cleanup contract returned from `attach`. */
+interface ActionReturn {
+    destroy(): void;
+}
+interface PasskeyAuth {
+    /**
+     * Subscribe to the reactive auth state. Use directly in markup with `$`:
+     *   const auth = createPasskeyAuth();
+     *   $: ({ phase, isPending, error, user } = $auth);
+     */
+    subscribe: Readable<PasskeyAuthState>["subscribe"];
+    /**
+     * Svelte action — attach to the element:
+     *   <biometric-auth-button use:auth.attach />
+     * Forwards object props and bridges the `glide:*` CustomEvents into the store.
+     */
+    attach(node: HTMLElement): ActionReturn;
+    /** Imperatively start auth (same as a user click). */
+    trigger(): void;
+    /** Clear the error/user without touching the element. */
+    reset(): void;
+}
+/**
+ * Headless Svelte helper wrapping the <biometric-auth-button> Web Component.
+ *
+ * It owns nothing about rendering — you bring the element (via <PasskeyButton>
+ * or a raw tag) and wire `use:auth.attach`. The helper subscribes to the
+ * element's `glide:*` CustomEvents and projects them into a Svelte store +
+ * callbacks. Mirrors the React `usePasskeyAuth` hook semantics.
+ */
+declare function createPasskeyAuth(options?: UsePasskeyAuthOptions): PasskeyAuth;
+
+export { type PasskeyAuth, type PasskeyAuthState, type UsePasskeyAuthOptions, createPasskeyAuth };

package/dist/index.js

@@ -0,0 +1,67 @@
+import { writable } from 'svelte/store';
+
+// src/usePasskeyAuth.ts
+var INITIAL = {
+  phase: "idle",
+  isPending: false,
+  isUnsupported: false,
+  error: null,
+  user: null
+};
+function derive(phase) {
+  return {
+    isPending: phase === "loading" || phase === "authenticating",
+    isUnsupported: phase === "unsupported"
+  };
+}
+function createPasskeyAuth(options = {}) {
+  const store = writable(INITIAL);
+  let current = null;
+  function attach(node) {
+    const el = node;
+    current = el;
+    if (options.endpoints)
+      el.endpoints = options.endpoints;
+    if (options.fetchOptions)
+      el.fetchOptions = options.fetchOptions;
+    const onSuccess = (e) => {
+      const detail = e.detail;
+      store.update((s) => ({ ...s, user: detail.user, error: null }));
+      options.onSuccess?.(detail);
+    };
+    const onError = (e) => {
+      const detail = e.detail;
+      store.update((s) => ({ ...s, error: detail }));
+      options.onError?.(detail);
+    };
+    const onPhase = (e) => {
+      const phase2 = e.detail.phase;
+      store.update((s) => ({ ...s, phase: phase2, ...derive(phase2) }));
+    };
+    el.addEventListener("glide:success", onSuccess);
+    el.addEventListener("glide:error", onError);
+    el.addEventListener("glide:phasechange", onPhase);
+    const phase = el.phase;
+    store.update((s) => ({ ...s, phase, ...derive(phase) }));
+    return {
+      destroy() {
+        el.removeEventListener("glide:success", onSuccess);
+        el.removeEventListener("glide:error", onError);
+        el.removeEventListener("glide:phasechange", onPhase);
+        if (current === el)
+          current = null;
+      }
+    };
+  }
+  function trigger() {
+    current?.click();
+  }
+  function reset() {
+    store.update((s) => ({ ...s, error: null, user: null }));
+  }
+  return { subscribe: store.subscribe, attach, trigger, reset };
+}
+
+export { createPasskeyAuth };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/usePasskeyAuth.ts"],"names":["phase"],"mappings":";AAAA,SAAS,gBAA+B;AA6DxC,IAAM,UAA4B;AAAA,EAChC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,eAAe;AAAA,EACf,OAAO;AAAA,EACP,MAAM;AACR;AAEA,SAAS,OAAO,OAGd;AACA,SAAO;AAAA,IACL,WAAW,UAAU,aAAa,UAAU;AAAA,IAC5C,eAAe,UAAU;AAAA,EAC3B;AACF;AAUO,SAAS,kBACd,UAAiC,CAAC,GACrB;AACb,QAAM,QAAQ,SAA2B,OAAO;AAChD,MAAI,UAA+B;AAEnC,WAAS,OAAO,MAAiC;AAC/C,UAAM,KAAK;AACX,cAAU;AAGV,QAAI,QAAQ;AAAW,SAAG,YAAY,QAAQ;AAC9C,QAAI,QAAQ;AAAc,SAAG,eAAe,QAAQ;AAEpD,UAAM,YAAY,CAAC,MAAa;AAC9B,YAAM,SAAU,EAA8B;AAC9C,YAAM,OAAO,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,OAAO,MAAM,OAAO,KAAK,EAAE;AAC9D,cAAQ,YAAY,MAAM;AAAA,IAC5B;AACA,UAAM,UAAU,CAAC,MAAa;AAC5B,YAAM,SAAU,EAA8B;AAC9C,YAAM,OAAO,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,OAAO,EAAE;AAC7C,cAAQ,UAAU,MAAM;AAAA,IAC1B;AACA,UAAM,UAAU,CAAC,MAAa;AAC5B,YAAMA,SAAS,EAAwC,OAAO;AAC9D,YAAM,OAAO,CAAC,OAAO,EAAE,GAAG,GAAG,OAAAA,QAAO,GAAG,OAAOA,MAAK,EAAE,EAAE;AAAA,IACzD;AAEA,OAAG,iBAAiB,iBAAiB,SAAS;AAC9C,OAAG,iBAAiB,eAAe,OAAO;AAC1C,OAAG,iBAAiB,qBAAqB,OAAO;AAEhD,UAAM,QAAQ,GAAG;AACjB,UAAM,OAAO,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,GAAG,OAAO,KAAK,EAAE,EAAE;AAEvD,WAAO;AAAA,MACL,UAAU;AACR,WAAG,oBAAoB,iBAAiB,SAAS;AACjD,WAAG,oBAAoB,eAAe,OAAO;AAC7C,WAAG,oBAAoB,qBAAqB,OAAO;AACnD,YAAI,YAAY;AAAI,oBAAU;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAEA,WAAS,UAAgB;AACvB,aAAS,MAAM;AAAA,EACjB;AAEA,WAAS,QAAc;AACrB,UAAM,OAAO,CAAC,OAAO,EAAE,GAAG,GAAG,OAAO,MAAM,MAAM,KAAK,EAAE;AAAA,EACzD;AAEA,SAAO,EAAE,WAAW,MAAM,WAAW,QAAQ,SAAS,MAAM;AAC9D","sourcesContent":["import { writable, type Readable } from \"svelte/store\";\nimport type {\n  AuthPhase,\n  AuthResult,\n  GlideEndpoints,\n  GlideError,\n  GlideUser,\n} from \"@glydi/passkey-core\";\n\n/** Element instance shape we rely on (subset of BiometricAuthButton). */\ninterface GlideElement extends HTMLElement {\n  phase: AuthPhase;\n  endpoints: Partial<GlideEndpoints>;\n  fetchOptions: RequestInit;\n}\n\nexport interface UsePasskeyAuthOptions {\n  mode?: \"auto\" | \"signin\" | \"signup\";\n  username?: string;\n  endpoints?: Partial<GlideEndpoints>;\n  /** Forwarded to fetch (e.g. custom headers). credentials:\"include\" is default. */\n  fetchOptions?: RequestInit;\n  onSuccess?: (result: AuthResult) => void;\n  onError?: (error: GlideError) => void;\n}\n\n/** Reactive snapshot of the auth flow, exposed as a Svelte readable store. */\nexport interface PasskeyAuthState {\n  phase: AuthPhase;\n  /** True while the ceremony is in flight. */\n  isPending: boolean;\n  /** True once a feature-detect failure is reflected by the element. */\n  isUnsupported: boolean;\n  error: GlideError | null;\n  user: GlideUser | null;\n}\n\n/** Svelte action: cleanup contract returned from `attach`. */\ninterface ActionReturn {\n  destroy(): void;\n}\n\nexport interface PasskeyAuth {\n  /**\n   * Subscribe to the reactive auth state. Use directly in markup with `$`:\n   *   const auth = createPasskeyAuth();\n   *   $: ({ phase, isPending, error, user } = $auth);\n   */\n  subscribe: Readable<PasskeyAuthState>[\"subscribe\"];\n  /**\n   * Svelte action — attach to the element:\n   *   <biometric-auth-button use:auth.attach />\n   * Forwards object props and bridges the `glide:*` CustomEvents into the store.\n   */\n  attach(node: HTMLElement): ActionReturn;\n  /** Imperatively start auth (same as a user click). */\n  trigger(): void;\n  /** Clear the error/user without touching the element. */\n  reset(): void;\n}\n\nconst INITIAL: PasskeyAuthState = {\n  phase: \"idle\",\n  isPending: false,\n  isUnsupported: false,\n  error: null,\n  user: null,\n};\n\nfunction derive(phase: AuthPhase): Pick<\n  PasskeyAuthState,\n  \"isPending\" | \"isUnsupported\"\n> {\n  return {\n    isPending: phase === \"loading\" || phase === \"authenticating\",\n    isUnsupported: phase === \"unsupported\",\n  };\n}\n\n/**\n * Headless Svelte helper wrapping the <biometric-auth-button> Web Component.\n *\n * It owns nothing about rendering — you bring the element (via <PasskeyButton>\n * or a raw tag) and wire `use:auth.attach`. The helper subscribes to the\n * element's `glide:*` CustomEvents and projects them into a Svelte store +\n * callbacks. Mirrors the React `usePasskeyAuth` hook semantics.\n */\nexport function createPasskeyAuth(\n  options: UsePasskeyAuthOptions = {},\n): PasskeyAuth {\n  const store = writable<PasskeyAuthState>(INITIAL);\n  let current: GlideElement | null = null;\n\n  function attach(node: HTMLElement): ActionReturn {\n    const el = node as GlideElement;\n    current = el;\n\n    // Push imperative config (objects can't be set as attributes).\n    if (options.endpoints) el.endpoints = options.endpoints;\n    if (options.fetchOptions) el.fetchOptions = options.fetchOptions;\n\n    const onSuccess = (e: Event) => {\n      const detail = (e as CustomEvent<AuthResult>).detail;\n      store.update((s) => ({ ...s, user: detail.user, error: null }));\n      options.onSuccess?.(detail);\n    };\n    const onError = (e: Event) => {\n      const detail = (e as CustomEvent<GlideError>).detail;\n      store.update((s) => ({ ...s, error: detail }));\n      options.onError?.(detail);\n    };\n    const onPhase = (e: Event) => {\n      const phase = (e as CustomEvent<{ phase: AuthPhase }>).detail.phase;\n      store.update((s) => ({ ...s, phase, ...derive(phase) }));\n    };\n\n    el.addEventListener(\"glide:success\", onSuccess);\n    el.addEventListener(\"glide:error\", onError);\n    el.addEventListener(\"glide:phasechange\", onPhase);\n    // Sync any phase already reflected before listeners attached.\n    const phase = el.phase;\n    store.update((s) => ({ ...s, phase, ...derive(phase) }));\n\n    return {\n      destroy() {\n        el.removeEventListener(\"glide:success\", onSuccess);\n        el.removeEventListener(\"glide:error\", onError);\n        el.removeEventListener(\"glide:phasechange\", onPhase);\n        if (current === el) current = null;\n      },\n    };\n  }\n\n  function trigger(): void {\n    current?.click();\n  }\n\n  function reset(): void {\n    store.update((s) => ({ ...s, error: null, user: null }));\n  }\n\n  return { subscribe: store.subscribe, attach, trigger, reset };\n}\n"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@glydi/passkey-svelte",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Thin Svelte adapter for the Glide passkey Web Component.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./PasskeyButton.svelte": {
+      "svelte": "./src/PasskeyButton.svelte"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "files": [
+    "dist",
+    "src/PasskeyButton.svelte"
+  ],
+  "peerDependencies": {
+    "svelte": ">=4"
+  },
+  "dependencies": {
+    "@glydi/passkey-core": "0.1.0"
+  },
+  "devDependencies": {
+    "svelte": "^4.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "keywords": [
+    "passkey",
+    "webauthn",
+    "svelte",
+    "authentication",
+    "biometric",
+    "fido2"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  }
+}

package/src/PasskeyButton.svelte

@@ -0,0 +1,81 @@
+<!--
+  PasskeyButton.svelte — thin Svelte wrapper around <biometric-auth-button>.
+
+  This is intentionally minimal: all real WebAuthn work lives in the core Web
+  Component. The wrapper only:
+    1. ensures the element is registered (client-only import in onMount),
+    2. forwards object props (endpoints, fetchOptions) imperatively, and
+    3. bridges the element's CustomEvents → Svelte callback props.
+
+  Svelte natively renders custom elements in markup, so attribute props
+  (mode/username/label) pass straight through. For full reactive state
+  (phase/error/user) use `createPasskeyAuth` instead.
+-->
+<script>
+  import { onMount, tick } from "svelte";
+
+  /** @type {"auto" | "signin" | "signup"} */
+  export let mode = "auto";
+  /** @type {string | undefined} */
+  export let username = undefined;
+  /** @type {string | undefined} */
+  export let label = undefined;
+  /** @type {import("@glydi/passkey-core").GlideEndpoints | undefined} */
+  export let endpoints = undefined;
+  /** @type {RequestInit | undefined} */
+  export let fetchOptions = undefined;
+  /** @type {((result: import("@glydi/passkey-core").AuthResult) => void) | undefined} */
+  export let onSuccess = undefined;
+  /** @type {((error: import("@glydi/passkey-core").GlideError) => void) | undefined} */
+  export let onError = undefined;
+  /** @type {((detail: { phase: import("@glydi/passkey-core").AuthPhase }) => void) | undefined} */
+  export let onPhaseChange = undefined;
+
+  /** @type {HTMLElement | undefined} */
+  let el;
+
+  // Forward non-serializable object props imperatively whenever they change
+  // (and once the element is bound).
+  $: if (el && endpoints) /** @type {any} */ (el).endpoints = endpoints;
+  $: if (el && fetchOptions) /** @type {any} */ (el).fetchOptions = fetchOptions;
+
+  onMount(() => {
+    let disposed = false;
+
+    /** @param {Event} e */
+    const handleSuccess = (e) =>
+      onSuccess?.(/** @type {CustomEvent} */ (e).detail);
+    /** @param {Event} e */
+    const handleError = (e) => onError?.(/** @type {CustomEvent} */ (e).detail);
+    /** @param {Event} e */
+    const handlePhase = (e) =>
+      onPhaseChange?.(/** @type {CustomEvent} */ (e).detail);
+
+    // Register the element client-side, then bind listeners + object props.
+    import("@glydi/passkey-core/define").then(async () => {
+      await tick();
+      if (disposed || !el) return;
+      if (endpoints) /** @type {any} */ (el).endpoints = endpoints;
+      if (fetchOptions) /** @type {any} */ (el).fetchOptions = fetchOptions;
+      el.addEventListener("glide:success", handleSuccess);
+      el.addEventListener("glide:error", handleError);
+      el.addEventListener("glide:phasechange", handlePhase);
+    });
+
+    return () => {
+      disposed = true;
+      if (!el) return;
+      el.removeEventListener("glide:success", handleSuccess);
+      el.removeEventListener("glide:error", handleError);
+      el.removeEventListener("glide:phasechange", handlePhase);
+    };
+  });
+</script>
+
+<biometric-auth-button
+  bind:this={el}
+  {mode}
+  {username}
+  {label}
+  {...$$restProps}
+/>