@glydi/passkey-vue 0.1.0

package/README.md

@@ -0,0 +1,135 @@
+# @glydi/passkey-vue
+
+Thin Vue 3 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-vue": "file:../glide/dist-packs/glydi-passkey-vue-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-vue` will be the public form once the
+> package is published. It is not yet available on npm.
+
+## Minimal Usage
+
+### `<PasskeyButton>` component
+
+`PasskeyButton` is a `defineComponent` (not a `.vue` SFC). Import it from
+`@glydi/passkey-vue` and use it in your template.
+
+```vue
+<!-- Source: packages/vue/src/PasskeyButton.ts -->
+<script setup>
+import { PasskeyButton } from "@glydi/passkey-vue";
+</script>
+<template>
+  <PasskeyButton
+    mode="signup"
+    label="Register passkey"
+    @success="(r) => console.log(r.user.id)"
+    @error="(e) => console.warn(e.code)"
+  />
+</template>
+```
+
+### Headless `usePasskeyAuth` composable
+
+For custom UI, use the headless composable — it returns an `elRef` to bind to a
+`<biometric-auth-button>` alongside reactive state:
+
+```vue
+<script setup>
+import { usePasskeyAuth } from "@glydi/passkey-vue";
+
+const { elRef, phase, isPending, error, user, trigger } = usePasskeyAuth({
+  mode: "auto",
+  onSuccess: (r) => router.push("/app"),
+});
+</script>
+<template>
+  <biometric-auth-button :ref="elRef" :label="isPending ? '…' : 'Sign in'" />
+</template>
+```
+
+## API
+
+### `PasskeyButton`
+
+A Vue 3 component wrapping `<biometric-auth-button>`. Implemented via `defineComponent`
+and an `h()` render function — not a `.vue` SFC.
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mode` | `"auto" \| "signin" \| "signup"` | `"auto"` | Auth mode. See AuthMode callout below. |
+| `username` | `string` | — | Username hint for registration/conditional UI. |
+| `label` | `string` | — | Button label text. |
+| `endpoints` | `Partial<GlideEndpoints>` | — | Override one or more API endpoint paths. |
+| `fetchOptions` | `RequestInit` | — | Merged into every `fetch` call (e.g. custom headers). |
+
+**Emits:**
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `success` | `AuthResult` | Emitted after successful authentication. |
+| `error` | `GlideError` | Emitted when authentication fails. |
+| `phasechange` | `string` | Emitted on every phase transition. Value is the new `AuthPhase`. |
+
+> **Valid `mode` values are `"auto"`, `"signin"`, and `"signup"` only.** Using `"register"`
+> or `"authenticate"` is invalid and will silently no-op.
+
+### `usePasskeyAuth(options?)`
+
+Headless Vue 3 composable. Returns a `UsePasskeyAuth` object:
+
+| Return value | Type | Description |
+|---|---|---|
+| `elRef` | `Ref<GlideElement \| null>` | Bind to element with `:ref="elRef"`. |
+| `phase` | `Ref<AuthPhase>` | Current auth phase (`"idle"`, `"loading"`, `"success"`, etc.). |
+| `isPending` | `ComputedRef<boolean>` | `true` during `"loading"` or `"authenticating"`. |
+| `isUnsupported` | `ComputedRef<boolean>` | `true` when `phase === "unsupported"`. |
+| `error` | `Ref<GlideError \| null>` | Last error, or `null`. |
+| `user` | `Ref<GlideUser \| null>` | Authenticated user after success, or `null`. |
+| `trigger()` | `() => void` | Imperatively start auth (same as clicking the button). |
+| `reset()` | `() => void` | Reset phase and error back to `"idle"`. |
+
+**`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,113 @@
+import * as vue from 'vue';
+import { PropType, Ref, ComputedRef } from 'vue';
+import { AuthMode, GlideEndpoints, AuthResult, GlideError, AuthPhase, GlideUser } from '@glydi/passkey-core';
+export { AuthMode, AuthPhase, AuthResult, GlideEndpoints, GlideError, GlideUser } from '@glydi/passkey-core';
+
+/**
+ * Thin declarative wrapper. This is intentionally tiny: all real work lives in
+ * the Web Component. The wrapper only:
+ *   1. ensures the element is registered (client-side, in onMounted),
+ *   2. forwards object props the DOM can't express as attributes, and
+ *   3. bridges CustomEvents → Vue emits.
+ *
+ * For full state (phase/error/user) use `usePasskeyAuth` instead.
+ */
+declare const PasskeyButton: vue.DefineComponent<{
+    mode: {
+        type: PropType<AuthMode>;
+        default: string;
+    };
+    username: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    endpoints: {
+        type: PropType<Partial<GlideEndpoints>>;
+        default: undefined;
+    };
+    fetchOptions: {
+        type: PropType<RequestInit>;
+        default: undefined;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    success: (_result: AuthResult) => true;
+    error: (_error: GlideError) => true;
+    phasechange: (_phase: string) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    mode: {
+        type: PropType<AuthMode>;
+        default: string;
+    };
+    username: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    endpoints: {
+        type: PropType<Partial<GlideEndpoints>>;
+        default: undefined;
+    };
+    fetchOptions: {
+        type: PropType<RequestInit>;
+        default: undefined;
+    };
+}>> & {
+    onSuccess?: ((_result: AuthResult) => any) | undefined;
+    onError?: ((_error: GlideError) => any) | undefined;
+    onPhasechange?: ((_phase: string) => any) | undefined;
+}, {
+    mode: AuthMode;
+    username: string;
+    label: string;
+    endpoints: Partial<GlideEndpoints>;
+    fetchOptions: RequestInit;
+}, {}>;
+
+/** Element instance shape we rely on (subset of BiometricAuthButton). */
+interface GlideElement extends HTMLElement {
+    phase: AuthPhase;
+    endpoints: Partial<GlideEndpoints>;
+    fetchOptions: RequestInit;
+}
+interface UsePasskeyAuthOptions {
+    mode?: AuthMode;
+    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;
+}
+interface UsePasskeyAuth {
+    /** Bind to <biometric-auth-button :ref="elRef" /> (or <PasskeyButton :ref> ). */
+    elRef: Ref<GlideElement | null>;
+    phase: Ref<AuthPhase>;
+    /** True while the ceremony is in flight. */
+    isPending: ComputedRef<boolean>;
+    /** True once a feature-detect failure is reflected by the element. */
+    isUnsupported: ComputedRef<boolean>;
+    error: Ref<GlideError | null>;
+    user: Ref<GlideUser | null>;
+    /** Imperatively start auth (same as a user click). */
+    trigger: () => void;
+    reset: () => void;
+}
+/**
+ * Headless composable wrapping the <biometric-auth-button> Web Component.
+ *
+ * It owns nothing about rendering — you bring the element (via <PasskeyButton>
+ * or a raw tag) and bind `elRef`. The composable subscribes to the element's
+ * `glide:*` CustomEvents and projects them into reactive refs + callbacks.
+ */
+declare function usePasskeyAuth(options?: UsePasskeyAuthOptions): UsePasskeyAuth;
+
+export { PasskeyButton, type UsePasskeyAuth, type UsePasskeyAuthOptions, usePasskeyAuth };

package/dist/index.js

@@ -0,0 +1,147 @@
+import { defineComponent, ref, onMounted, watch, onBeforeUnmount, h, shallowRef, computed } from 'vue';
+
+// src/PasskeyButton.ts
+var PasskeyButton = defineComponent({
+  name: "PasskeyButton",
+  props: {
+    mode: {
+      type: String,
+      default: "auto"
+    },
+    username: { type: String, default: void 0 },
+    label: { type: String, default: void 0 },
+    endpoints: {
+      type: Object,
+      default: void 0
+    },
+    fetchOptions: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    success: (_result) => true,
+    error: (_error) => true,
+    phasechange: (_phase) => true
+  },
+  setup(props, { emit }) {
+    const elRef = ref(null);
+    const onSuccess = (e) => emit("success", e.detail);
+    const onError = (e) => emit("error", e.detail);
+    const onPhase = (e) => emit("phasechange", e.detail.phase);
+    onMounted(async () => {
+      await import('@glydi/passkey-core/define');
+      const el = elRef.value;
+      if (!el)
+        return;
+      if (props.endpoints)
+        el.endpoints = props.endpoints;
+      if (props.fetchOptions)
+        el.fetchOptions = props.fetchOptions;
+      el.addEventListener("glide:success", onSuccess);
+      el.addEventListener("glide:error", onError);
+      el.addEventListener("glide:phasechange", onPhase);
+    });
+    watch(
+      () => props.endpoints,
+      (v) => {
+        if (elRef.value && v)
+          elRef.value.endpoints = v;
+      }
+    );
+    watch(
+      () => props.fetchOptions,
+      (v) => {
+        if (elRef.value && v)
+          elRef.value.fetchOptions = v;
+      }
+    );
+    onBeforeUnmount(() => {
+      const el = elRef.value;
+      if (!el)
+        return;
+      el.removeEventListener("glide:success", onSuccess);
+      el.removeEventListener("glide:error", onError);
+      el.removeEventListener("glide:phasechange", onPhase);
+    });
+    return () => h("biometric-auth-button", {
+      ref: elRef,
+      mode: props.mode,
+      username: props.username,
+      label: props.label
+    });
+  }
+});
+function usePasskeyAuth(options = {}) {
+  const elRef = ref(null);
+  const phase = ref("idle");
+  const error = shallowRef(null);
+  const user = shallowRef(null);
+  const onSuccess = (e) => {
+    const detail = e.detail;
+    user.value = detail.user;
+    error.value = null;
+    options.onSuccess?.(detail);
+  };
+  const onError = (e) => {
+    const detail = e.detail;
+    error.value = detail;
+    options.onError?.(detail);
+  };
+  const onPhase = (e) => {
+    phase.value = e.detail.phase;
+  };
+  const attach = (el) => {
+    if (options.endpoints)
+      el.endpoints = options.endpoints;
+    if (options.fetchOptions)
+      el.fetchOptions = options.fetchOptions;
+    el.addEventListener("glide:success", onSuccess);
+    el.addEventListener("glide:error", onError);
+    el.addEventListener("glide:phasechange", onPhase);
+    phase.value = el.phase;
+  };
+  const detach = (el) => {
+    el.removeEventListener("glide:success", onSuccess);
+    el.removeEventListener("glide:error", onError);
+    el.removeEventListener("glide:phasechange", onPhase);
+  };
+  onMounted(async () => {
+    await import('@glydi/passkey-core/define');
+    if (elRef.value)
+      attach(elRef.value);
+  });
+  watch(elRef, (el, prev) => {
+    if (prev)
+      detach(prev);
+    if (el)
+      attach(el);
+  });
+  onBeforeUnmount(() => {
+    if (elRef.value)
+      detach(elRef.value);
+  });
+  const trigger = () => {
+    elRef.value?.click();
+  };
+  const reset = () => {
+    error.value = null;
+    user.value = null;
+  };
+  return {
+    elRef,
+    phase,
+    isPending: computed(
+      () => phase.value === "loading" || phase.value === "authenticating"
+    ),
+    isUnsupported: computed(() => phase.value === "unsupported"),
+    error,
+    user,
+    trigger,
+    reset
+  };
+}
+
+export { PasskeyButton, usePasskeyAuth };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PasskeyButton.ts","../src/usePasskeyAuth.ts"],"names":["onMounted","onBeforeUnmount","ref","watch"],"mappings":"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","sourcesContent":["import {\n  defineComponent,\n  h,\n  onMounted,\n  onBeforeUnmount,\n  ref,\n  watch,\n  type PropType,\n} from \"vue\";\nimport type {\n  AuthMode,\n  AuthResult,\n  GlideEndpoints,\n  GlideError,\n} from \"@glydi/passkey-core\";\n\n/** Element instance shape we rely on (subset of BiometricAuthButton). */\ninterface GlideElement extends HTMLElement {\n  endpoints: Partial<GlideEndpoints>;\n  fetchOptions: RequestInit;\n}\n\n/**\n * Thin declarative wrapper. This is intentionally tiny: all real work lives in\n * the Web Component. The wrapper only:\n *   1. ensures the element is registered (client-side, in onMounted),\n *   2. forwards object props the DOM can't express as attributes, and\n *   3. bridges CustomEvents → Vue emits.\n *\n * For full state (phase/error/user) use `usePasskeyAuth` instead.\n */\nexport const PasskeyButton = defineComponent({\n  name: \"PasskeyButton\",\n  props: {\n    mode: {\n      type: String as PropType<AuthMode>,\n      default: \"auto\",\n    },\n    username: { type: String, default: undefined },\n    label: { type: String, default: undefined },\n    endpoints: {\n      type: Object as PropType<Partial<GlideEndpoints>>,\n      default: undefined,\n    },\n    fetchOptions: {\n      type: Object as PropType<RequestInit>,\n      default: undefined,\n    },\n  },\n  emits: {\n    success: (_result: AuthResult) => true,\n    error: (_error: GlideError) => true,\n    phasechange: (_phase: string) => true,\n  },\n  setup(props, { emit }) {\n    const elRef = ref<GlideElement | null>(null);\n\n    const onSuccess = (e: Event) =>\n      emit(\"success\", (e as CustomEvent<AuthResult>).detail);\n    const onError = (e: Event) =>\n      emit(\"error\", (e as CustomEvent<GlideError>).detail);\n    const onPhase = (e: Event) =>\n      emit(\"phasechange\", (e as CustomEvent<{ phase: string }>).detail.phase);\n\n    onMounted(async () => {\n      // Register <biometric-auth-button> on the client only — the core class\n      // extends HTMLElement, so importing \"/define\" must not run during SSR.\n      await import(\"@glydi/passkey-core/define\");\n\n      const el = elRef.value;\n      if (!el) return;\n\n      // Forward non-serializable props (objects) imperatively.\n      if (props.endpoints) el.endpoints = props.endpoints;\n      if (props.fetchOptions) el.fetchOptions = props.fetchOptions;\n\n      el.addEventListener(\"glide:success\", onSuccess);\n      el.addEventListener(\"glide:error\", onError);\n      el.addEventListener(\"glide:phasechange\", onPhase);\n    });\n\n    // Keep imperative object props in sync after mount.\n    watch(\n      () => props.endpoints,\n      (v) => {\n        if (elRef.value && v) elRef.value.endpoints = v;\n      },\n    );\n    watch(\n      () => props.fetchOptions,\n      (v) => {\n        if (elRef.value && v) elRef.value.fetchOptions = v;\n      },\n    );\n\n    onBeforeUnmount(() => {\n      const el = elRef.value;\n      if (!el) return;\n      el.removeEventListener(\"glide:success\", onSuccess);\n      el.removeEventListener(\"glide:error\", onError);\n      el.removeEventListener(\"glide:phasechange\", onPhase);\n    });\n\n    return () =>\n      h(\"biometric-auth-button\", {\n        ref: elRef,\n        mode: props.mode,\n        username: props.username,\n        label: props.label,\n      });\n  },\n});\n","import {\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  watch,\n  type ComputedRef,\n  type Ref,\n} from \"vue\";\nimport type {\n  AuthMode,\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?: AuthMode;\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\nexport interface UsePasskeyAuth {\n  /** Bind to <biometric-auth-button :ref=\"elRef\" /> (or <PasskeyButton :ref> ). */\n  elRef: Ref<GlideElement | null>;\n  phase: Ref<AuthPhase>;\n  /** True while the ceremony is in flight. */\n  isPending: ComputedRef<boolean>;\n  /** True once a feature-detect failure is reflected by the element. */\n  isUnsupported: ComputedRef<boolean>;\n  error: Ref<GlideError | null>;\n  user: Ref<GlideUser | null>;\n  /** Imperatively start auth (same as a user click). */\n  trigger: () => void;\n  reset: () => void;\n}\n\n/**\n * Headless composable 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 bind `elRef`. The composable subscribes to the element's\n * `glide:*` CustomEvents and projects them into reactive refs + callbacks.\n */\nexport function usePasskeyAuth(\n  options: UsePasskeyAuthOptions = {},\n): UsePasskeyAuth {\n  const elRef = ref<GlideElement | null>(null);\n  const phase = ref<AuthPhase>(\"idle\");\n  const error = shallowRef<GlideError | null>(null);\n  const user = shallowRef<GlideUser | null>(null);\n\n  const onSuccess = (e: Event) => {\n    const detail = (e as CustomEvent<AuthResult>).detail;\n    user.value = detail.user;\n    error.value = null;\n    options.onSuccess?.(detail);\n  };\n  const onError = (e: Event) => {\n    const detail = (e as CustomEvent<GlideError>).detail;\n    error.value = detail;\n    options.onError?.(detail);\n  };\n  const onPhase = (e: Event) => {\n    phase.value = (e as CustomEvent<{ phase: AuthPhase }>).detail.phase;\n  };\n\n  const attach = (el: GlideElement) => {\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    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    phase.value = el.phase;\n  };\n\n  const detach = (el: GlideElement) => {\n    el.removeEventListener(\"glide:success\", onSuccess);\n    el.removeEventListener(\"glide:error\", onError);\n    el.removeEventListener(\"glide:phasechange\", onPhase);\n  };\n\n  onMounted(async () => {\n    // Register the element on the client only (the core extends HTMLElement).\n    await import(\"@glydi/passkey-core/define\");\n    if (elRef.value) attach(elRef.value);\n  });\n\n  // Re-bind if the underlying element instance changes.\n  watch(elRef, (el, prev) => {\n    if (prev) detach(prev);\n    if (el) attach(el);\n  });\n\n  onBeforeUnmount(() => {\n    if (elRef.value) detach(elRef.value);\n  });\n\n  const trigger = () => {\n    elRef.value?.click();\n  };\n\n  const reset = () => {\n    error.value = null;\n    user.value = null;\n  };\n\n  return {\n    elRef,\n    phase,\n    isPending: computed(\n      () => phase.value === \"loading\" || phase.value === \"authenticating\",\n    ),\n    isUnsupported: computed(() => phase.value === \"unsupported\"),\n    error,\n    user,\n    trigger,\n    reset,\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@glydi/passkey-vue",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Thin Vue 3 adapter for the Glide passkey Web Component.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.3"
+  },
+  "dependencies": {
+    "@glydi/passkey-core": "0.1.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vue": "^3.4.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  }
+}