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

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

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

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