@glydi/passkey-react 0.1.0

package/README.md

@@ -0,0 +1,139 @@
+# @glydi/passkey-react
+
+Thin React/Next.js 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-react": "file:../glide/dist-packs/glydi-passkey-react-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-react` will be the public form once the
+> package is published. It is not yet available on npm.
+
+## Minimal Usage
+
+### Declarative `<PasskeyButton>`
+
+`PasskeyButton` declares `"use client"` — it is a **Client Component** and must not be
+imported from server-only code.
+
+```tsx
+// Source: apps/example/app/page.tsx
+"use client";
+import { PasskeyButton } from "@glydi/passkey-react";
+
+<PasskeyButton
+  mode="signup"
+  label="Register passkey"
+  onSuccess={(result) => console.log("registered", result.user.id)}
+  onError={(e) => console.warn(e.code, e.message)}
+/>
+```
+
+### Headless `usePasskeyAuth`
+
+For custom UI, use the headless hook — it returns a `ref` to attach to a
+`<biometric-auth-button>` element alongside reactive state:
+
+```tsx
+// Source: packages/react/src/usePasskeyAuth.ts
+"use client";
+import { usePasskeyAuth } from "@glydi/passkey-react";
+import "@glydi/passkey-core/define";
+
+export default function MyPage() {
+  const { ref, phase, isPending, error, user } = usePasskeyAuth({
+    mode: "auto",
+    onSuccess: (r) => router.push("/app"),
+  });
+  return (
+    <biometric-auth-button ref={ref} label={isPending ? "…" : "Sign in"} />
+  );
+}
+```
+
+## API
+
+### `PasskeyButton`
+
+A React wrapper around `<biometric-auth-button>`. Declares **`"use client"`** — import
+only in Client Components or pages marked `"use client"`.
+
+**`PasskeyButtonProps`:**
+
+| 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). |
+| `onSuccess` | `(result: AuthResult) => void` | — | Called after successful authentication. |
+| `onError` | `(error: GlideError) => void` | — | Called when authentication fails. |
+| `prime` | `boolean` | — | Show a pre-prompt explainer before the OS biometric sheet. |
+| `primeTitle` | `string` | — | Title for the priming panel. |
+| `primeBody` | `string` | — | Body text for the priming panel. |
+| `primeContinue` | `string` | — | Continue button label in the priming panel. |
+| `primeCancel` | `string` | — | Cancel button label in the priming panel. |
+| `fallbackHref` | `string` | — | URL of a recovery page (e.g. magic-link). Shown on unsupported/error. |
+| `fallbackLabel` | `string` | — | Label for the fallback link. |
+| `className` | `string` | — | CSS class forwarded to the host element. |
+| `style` | `React.CSSProperties` | — | Inline style forwarded to the host element. |
+
+> **Valid `mode` values are `"auto"`, `"signin"`, and `"signup"` only.** Using `"register"`
+> or `"authenticate"` is invalid and will silently no-op.
+
+### `usePasskeyAuth(options?)`
+
+Headless hook. Returns a `UsePasskeyAuth` object:
+
+| Return value | Type | Description |
+|---|---|---|
+| `ref` | `RefObject<GlideElement \| null>` | Attach to `<biometric-auth-button ref={ref}>`. |
+| `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`. |
+| `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,105 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import { GlideEndpoints, AuthResult, GlideError, AuthPhase, GlideUser } from '@glydi/passkey-core';
+export { AuthMode, AuthPhase, AuthResult, GlideEndpoints, GlideError, GlideUser } from '@glydi/passkey-core';
+
+/**
+ * Ambient typing so TSX authors get autocomplete + type-checking on the
+ * underlying custom element, both for the modern `React.JSX` namespace (React 19)
+ * and the legacy global `JSX` namespace (React 18).
+ */
+
+interface BiometricAuthButtonAttributes extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+    mode?: "auto" | "signin" | "signup";
+    username?: string;
+    label?: string;
+    "register-begin"?: string;
+    "register-finish"?: string;
+    "authenticate-begin"?: string;
+    "authenticate-finish"?: string;
+    prime?: boolean | "";
+    "prime-title"?: string;
+    "prime-body"?: string;
+    "prime-continue"?: string;
+    "prime-cancel"?: string;
+    "fallback-href"?: string;
+    "fallback-label"?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "biometric-auth-button": BiometricAuthButtonAttributes;
+        }
+    }
+}
+
+interface PasskeyButtonProps {
+    mode?: "auto" | "signin" | "signup";
+    username?: string;
+    label?: string;
+    endpoints?: Partial<GlideEndpoints>;
+    fetchOptions?: RequestInit;
+    onSuccess?: (result: AuthResult) => void;
+    onError?: (error: GlideError) => void;
+    /** Show the priming explainer before the native OS prompt. */
+    prime?: boolean;
+    primeTitle?: string;
+    primeBody?: string;
+    primeContinue?: string;
+    primeCancel?: string;
+    /** Recovery escape hatch (e.g. your magic-link page) shown on failure/unsupported. */
+    fallbackHref?: string;
+    fallbackLabel?: string;
+    /** Forwarded to the host element for ::part() theming hooks if needed. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Thin declarative wrapper. This is intentionally ~50 lines: all real work
+ * lives in the Web Component. The wrapper only:
+ *   1. ensures the element is registered (client-side import),
+ *   2. forwards object props the DOM can't express as attributes, and
+ *   3. bridges CustomEvents → React callbacks.
+ *
+ * For full state (phase/error/user) use `usePasskeyAuth` instead.
+ */
+declare function PasskeyButton({ mode, username, label, endpoints, fetchOptions, onSuccess, onError, prime, primeTitle, primeBody, primeContinue, primeCancel, fallbackHref, fallbackLabel, className, style, }: PasskeyButtonProps): JSX.Element;
+
+/** Element instance shape we rely on (subset of BiometricAuthButton). */
+interface GlideElement extends HTMLElement {
+    phase: AuthPhase;
+    endpoints: Partial<GlideEndpoints>;
+    fetchOptions: RequestInit;
+}
+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;
+}
+interface UsePasskeyAuth {
+    /** Attach to <biometric-auth-button ref={ref} />. */
+    ref: React.RefObject<GlideElement | null>;
+    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;
+    /** Imperatively start auth (same as a user click). */
+    trigger: () => void;
+    reset: () => void;
+}
+/**
+ * Headless hook wrapping the <biometric-auth-button> Web Component.
+ *
+ * It owns nothing about rendering — you bring the element (via <PasskeyButton>
+ * or a raw tag) and spread `ref`. The hook subscribes to the element's
+ * `glide:*` CustomEvents and projects them into React state + callbacks.
+ */
+declare function usePasskeyAuth(options?: UsePasskeyAuthOptions): UsePasskeyAuth;
+
+export { PasskeyButton, type PasskeyButtonProps, type UsePasskeyAuth, type UsePasskeyAuthOptions, usePasskeyAuth };

package/dist/index.js

@@ -0,0 +1,137 @@
+"use client";
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import '@glydi/passkey-core/define';
+import { jsx } from 'react/jsx-runtime';
+
+// src/PasskeyButton.tsx
+function PasskeyButton({
+  mode = "auto",
+  username,
+  label,
+  endpoints,
+  fetchOptions,
+  onSuccess,
+  onError,
+  prime,
+  primeTitle,
+  primeBody,
+  primeContinue,
+  primeCancel,
+  fallbackHref,
+  fallbackLabel,
+  className,
+  style
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el)
+      return;
+    if (endpoints)
+      el.endpoints = endpoints;
+    if (fetchOptions)
+      el.fetchOptions = fetchOptions;
+  }, [endpoints, fetchOptions]);
+  const handlers = useRef({ onSuccess, onError });
+  handlers.current = { onSuccess, onError };
+  useEffect(() => {
+    const el = ref.current;
+    if (!el)
+      return;
+    const s = (e) => handlers.current.onSuccess?.(e.detail);
+    const f = (e) => handlers.current.onError?.(e.detail);
+    el.addEventListener("glide:success", s);
+    el.addEventListener("glide:error", f);
+    return () => {
+      el.removeEventListener("glide:success", s);
+      el.removeEventListener("glide:error", f);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "biometric-auth-button",
+    {
+      ref,
+      mode,
+      username,
+      label,
+      ...prime ? { prime: "" } : {},
+      ...primeTitle ? { "prime-title": primeTitle } : {},
+      ...primeBody ? { "prime-body": primeBody } : {},
+      ...primeContinue ? { "prime-continue": primeContinue } : {},
+      ...primeCancel ? { "prime-cancel": primeCancel } : {},
+      ...fallbackHref ? { "fallback-href": fallbackHref } : {},
+      ...fallbackLabel ? { "fallback-label": fallbackLabel } : {},
+      className,
+      style
+    }
+  );
+}
+function usePasskeyAuth(options = {}) {
+  const ref = useRef(null);
+  const [phase, setPhase] = useState("idle");
+  const [error, setError] = useState(null);
+  const [user, setUser] = useState(null);
+  const cbs = useRef(options);
+  cbs.current = options;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el)
+      return;
+    if (options.endpoints)
+      el.endpoints = options.endpoints;
+    if (options.fetchOptions)
+      el.fetchOptions = options.fetchOptions;
+  }, [options.endpoints, options.fetchOptions]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el)
+      return;
+    const onSuccess = (e) => {
+      const detail = e.detail;
+      setUser(detail.user);
+      setError(null);
+      cbs.current.onSuccess?.(detail);
+    };
+    const onError = (e) => {
+      const detail = e.detail;
+      setError(detail);
+      cbs.current.onError?.(detail);
+    };
+    const onPhase = (e) => {
+      setPhase(e.detail.phase);
+    };
+    el.addEventListener("glide:success", onSuccess);
+    el.addEventListener("glide:error", onError);
+    el.addEventListener("glide:phasechange", onPhase);
+    setPhase(el.phase);
+    return () => {
+      el.removeEventListener("glide:success", onSuccess);
+      el.removeEventListener("glide:error", onError);
+      el.removeEventListener("glide:phasechange", onPhase);
+    };
+  }, []);
+  const trigger = useCallback(() => {
+    ref.current?.click();
+  }, []);
+  const reset = useCallback(() => {
+    setError(null);
+    setUser(null);
+  }, []);
+  return useMemo(
+    () => ({
+      ref,
+      phase,
+      isPending: phase === "loading" || phase === "authenticating",
+      isUnsupported: phase === "unsupported",
+      error,
+      user,
+      trigger,
+      reset
+    }),
+    [phase, 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.tsx","../src/usePasskeyAuth.ts"],"names":["useEffect","useRef"],"mappings":"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","sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport \"@glydi/passkey-core/define\"; // registers <biometric-auth-button> (client-only)\nimport type {\n  AuthResult,\n  GlideEndpoints,\n  GlideError,\n} from \"@glydi/passkey-core\";\n\nexport interface PasskeyButtonProps {\n  mode?: \"auto\" | \"signin\" | \"signup\";\n  username?: string;\n  label?: string;\n  endpoints?: Partial<GlideEndpoints>;\n  fetchOptions?: RequestInit;\n  onSuccess?: (result: AuthResult) => void;\n  onError?: (error: GlideError) => void;\n  /** Show the priming explainer before the native OS prompt. */\n  prime?: boolean;\n  primeTitle?: string;\n  primeBody?: string;\n  primeContinue?: string;\n  primeCancel?: string;\n  /** Recovery escape hatch (e.g. your magic-link page) shown on failure/unsupported. */\n  fallbackHref?: string;\n  fallbackLabel?: string;\n  /** Forwarded to the host element for ::part() theming hooks if needed. */\n  className?: string;\n  style?: React.CSSProperties;\n}\n\ninterface GlideElement extends HTMLElement {\n  endpoints: Partial<GlideEndpoints>;\n  fetchOptions: RequestInit;\n}\n\n/**\n * Thin declarative wrapper. This is intentionally ~50 lines: all real work\n * lives in the Web Component. The wrapper only:\n *   1. ensures the element is registered (client-side import),\n *   2. forwards object props the DOM can't express as attributes, and\n *   3. bridges CustomEvents → React callbacks.\n *\n * For full state (phase/error/user) use `usePasskeyAuth` instead.\n */\nexport function PasskeyButton({\n  mode = \"auto\",\n  username,\n  label,\n  endpoints,\n  fetchOptions,\n  onSuccess,\n  onError,\n  prime,\n  primeTitle,\n  primeBody,\n  primeContinue,\n  primeCancel,\n  fallbackHref,\n  fallbackLabel,\n  className,\n  style,\n}: PasskeyButtonProps) {\n  const ref = useRef<GlideElement | null>(null);\n\n  // Forward non-serializable props (objects) imperatively.\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (endpoints) el.endpoints = endpoints;\n    if (fetchOptions) el.fetchOptions = fetchOptions;\n  }, [endpoints, fetchOptions]);\n\n  // Bridge events → callbacks. Callbacks kept in refs to avoid re-binding.\n  const handlers = useRef({ onSuccess, onError });\n  handlers.current = { onSuccess, onError };\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const s = (e: Event) =>\n      handlers.current.onSuccess?.((e as CustomEvent<AuthResult>).detail);\n    const f = (e: Event) =>\n      handlers.current.onError?.((e as CustomEvent<GlideError>).detail);\n    el.addEventListener(\"glide:success\", s);\n    el.addEventListener(\"glide:error\", f);\n    return () => {\n      el.removeEventListener(\"glide:success\", s);\n      el.removeEventListener(\"glide:error\", f);\n    };\n  }, []);\n\n  return (\n    <biometric-auth-button\n      ref={ref}\n      mode={mode}\n      username={username}\n      label={label}\n      {...(prime ? { prime: \"\" } : {})}\n      {...(primeTitle ? { \"prime-title\": primeTitle } : {})}\n      {...(primeBody ? { \"prime-body\": primeBody } : {})}\n      {...(primeContinue ? { \"prime-continue\": primeContinue } : {})}\n      {...(primeCancel ? { \"prime-cancel\": primeCancel } : {})}\n      {...(fallbackHref ? { \"fallback-href\": fallbackHref } : {})}\n      {...(fallbackLabel ? { \"fallback-label\": fallbackLabel } : {})}\n      className={className}\n      style={style}\n    />\n  );\n}\n","\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\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\nexport interface UsePasskeyAuth {\n  /** Attach to <biometric-auth-button ref={ref} />. */\n  ref: React.RefObject<GlideElement | null>;\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  /** Imperatively start auth (same as a user click). */\n  trigger: () => void;\n  reset: () => void;\n}\n\n/**\n * Headless hook 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 spread `ref`. The hook subscribes to the element's\n * `glide:*` CustomEvents and projects them into React state + callbacks.\n */\nexport function usePasskeyAuth(\n  options: UsePasskeyAuthOptions = {},\n): UsePasskeyAuth {\n  const ref = useRef<GlideElement | null>(null);\n  const [phase, setPhase] = useState<AuthPhase>(\"idle\");\n  const [error, setError] = useState<GlideError | null>(null);\n  const [user, setUser] = useState<GlideUser | null>(null);\n\n  // Keep callbacks fresh without re-subscribing listeners every render.\n  const cbs = useRef(options);\n  cbs.current = options;\n\n  // Push imperative config (objects can't be set as attributes) onto the element.\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    if (options.endpoints) el.endpoints = options.endpoints;\n    if (options.fetchOptions) el.fetchOptions = options.fetchOptions;\n  }, [options.endpoints, options.fetchOptions]);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const onSuccess = (e: Event) => {\n      const detail = (e as CustomEvent<AuthResult>).detail;\n      setUser(detail.user);\n      setError(null);\n      cbs.current.onSuccess?.(detail);\n    };\n    const onError = (e: Event) => {\n      const detail = (e as CustomEvent<GlideError>).detail;\n      setError(detail);\n      cbs.current.onError?.(detail);\n    };\n    const onPhase = (e: Event) => {\n      setPhase((e as CustomEvent<{ phase: AuthPhase }>).detail.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    setPhase(el.phase);\n\n    return () => {\n      el.removeEventListener(\"glide:success\", onSuccess);\n      el.removeEventListener(\"glide:error\", onError);\n      el.removeEventListener(\"glide:phasechange\", onPhase);\n    };\n  }, []);\n\n  const trigger = useCallback(() => {\n    ref.current?.click();\n  }, []);\n\n  const reset = useCallback(() => {\n    setError(null);\n    setUser(null);\n  }, []);\n\n  return useMemo(\n    () => ({\n      ref,\n      phase,\n      isPending: phase === \"loading\" || phase === \"authenticating\",\n      isUnsupported: phase === \"unsupported\",\n      error,\n      user,\n      trigger,\n      reset,\n    }),\n    [phase, error, user, trigger, reset],\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@glydi/passkey-react",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Thin React/Next.js 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": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@glydi/passkey-core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  }
+}