@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):

{
  "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 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:

<!-- 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):

<!-- 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 — architecture overview
• Quickstart — full Next.js App Router integration walkthrough
• Distribution guide — tarball and pnpm link install details