@elvix.is/sdk 0.5.5 → 0.5.6

package/dist/react.d.ts

@@ -58,6 +58,8 @@ type ElvixCopy = {
     subtitle?: string;
     /** Google factor button. */
     googleButton?: string;
+    /** Passkey factor button. */
+    passkeyButton?: string;
     /** Email field placeholder. */
     emailPlaceholder?: string;
     /** Email submit button (identify step). */

package/dist/react.js

@@ -204,6 +204,7 @@ import { useState as useState2 } from "react";
 var DEFAULT_COPY = {
   subtitle: "Pick how you want to continue.",
   googleButton: "Continue with Google",
+  passkeyButton: "Continue with passkey",
   emailPlaceholder: "you@example.com",
   sendCodeButton: "Send code",
   sendingLabel: "Sending\u2026",
@@ -272,6 +273,97 @@ function isSameOrigin(baseUrl) {
   }
 }
 
+// src/react/passkey.ts
+function b64urlToBuf(b64url) {
+  const b64 = b64url.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = b64.length % 4 === 0 ? "" : "=".repeat(4 - b64.length % 4);
+  const bin = atob(b64 + pad);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes.buffer;
+}
+function bufToB64url(buf) {
+  const bytes = new Uint8Array(buf);
+  let bin = "";
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+async function runPasskeySignIn(baseUrl, clientId) {
+  if (!clientId) return { ok: false, error: "missing_client_id", message: "ElvixProvider needs a clientId." };
+  if (typeof window === "undefined" || !window.PublicKeyCredential || !navigator.credentials?.get) {
+    return { ok: false, error: "passkey_unsupported", message: "This browser can't use passkeys." };
+  }
+  const credentials = isSameOrigin(baseUrl) ? "include" : "omit";
+  let options;
+  try {
+    const res = await fetch(`${baseUrl}/api/auth/passkey/sign-in/start`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      credentials,
+      body: JSON.stringify({ intent: "app", clientId })
+    });
+    const body = await res.json();
+    if (!res.ok || !body.success || !body.data?.options) {
+      return { ok: false, error: body.errorMessage ?? "passkey_start_failed" };
+    }
+    options = body.data.options;
+  } catch (e) {
+    return { ok: false, error: "network", message: e instanceof Error ? e.message : void 0 };
+  }
+  let assertion;
+  try {
+    const publicKey = {
+      challenge: b64urlToBuf(options.challenge),
+      timeout: options.timeout,
+      rpId: options.rpId,
+      userVerification: options.userVerification,
+      allowCredentials: options.allowCredentials?.map((c) => ({
+        id: b64urlToBuf(c.id),
+        type: c.type,
+        transports: c.transports
+      }))
+    };
+    const cred = await navigator.credentials.get({ publicKey });
+    if (!cred) return { ok: false, error: "passkey_cancelled" };
+    const resp = cred.response;
+    assertion = {
+      id: cred.id,
+      rawId: bufToB64url(cred.rawId),
+      type: "public-key",
+      clientExtensionResults: cred.getClientExtensionResults(),
+      authenticatorAttachment: cred.authenticatorAttachment ?? void 0,
+      response: {
+        clientDataJSON: bufToB64url(resp.clientDataJSON),
+        authenticatorData: bufToB64url(resp.authenticatorData),
+        signature: bufToB64url(resp.signature),
+        userHandle: resp.userHandle ? bufToB64url(resp.userHandle) : void 0
+      }
+    };
+  } catch (e) {
+    const name = e?.name;
+    if (name === "NotAllowedError" || name === "AbortError") {
+      return { ok: false, error: "passkey_cancelled" };
+    }
+    return { ok: false, error: "passkey_failed", message: e instanceof Error ? e.message : void 0 };
+  }
+  try {
+    const res = await fetch(`${baseUrl}/api/auth/passkey/sign-in/finish`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      credentials,
+      body: JSON.stringify({ intent: "app", clientId, ...assertion })
+    });
+    const body = await res.json();
+    if (!res.ok || !body.success) {
+      return { ok: false, error: body.errorMessage ?? "passkey_verify_failed" };
+    }
+    if (body.data?.token) setElvixToken(body.data.token);
+    return { ok: true, redirect: body.data?.redirect, token: body.data?.token };
+  } catch (e) {
+    return { ok: false, error: "network", message: e instanceof Error ? e.message : void 0 };
+  }
+}
+
 // src/react/elvix-sign-in.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ElvixSignIn({
@@ -310,6 +402,29 @@ function ElvixSignIn({
       `${ctx.baseUrl}/api/auth/google/start?intent=app&clientId=${encodeURIComponent(ctx.clientId)}`
     );
   }
+  async function startPasskey() {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await runPasskeySignIn(ctx.baseUrl, ctx.clientId);
+      if (!result.ok) {
+        if (result.error === "passkey_cancelled") {
+          onResult?.({ ok: false, error: result.error });
+          return;
+        }
+        return fail(result.error, result.message);
+      }
+      setStep("done");
+      onResult?.({
+        ok: true,
+        method: "passkey",
+        redirect: result.redirect ?? redirectAfterSignIn,
+        token: result.token
+      });
+    } finally {
+      setBusy(false);
+    }
+  }
   async function startOtp(e) {
     e.preventDefault();
     if (!email.trim()) return fail("invalid_input", copy.errorEnterEmail);
@@ -388,6 +503,17 @@ function ElvixSignIn({
           children: copy.googleButton
         }
       ),
+      app?.methodPasskey && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: startPasskey,
+          disabled: busy,
+          className: "elvix-btn elvix-btn-passkey",
+          "data-elvix-method": "passkey",
+          children: copy.passkeyButton
+        }
+      ),
       app?.methodEmailOtp && /* @__PURE__ */ jsxs2("form", { onSubmit: startOtp, "data-elvix-method": "email_otp", className: "elvix-otp-form", children: [
         /* @__PURE__ */ jsx3(
           "input",
@@ -529,6 +655,28 @@ function ElvixSecuredBadge({
 
 // src/react/elvix-sign-in-form.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function PasskeyIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.8,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsx6("circle", { cx: "9", cy: "8", r: "4" }),
+        /* @__PURE__ */ jsx6("path", { d: "M4 20c0-3 2.5-5 5-5 1 0 1.9.3 2.7.8" }),
+        /* @__PURE__ */ jsx6("path", { d: "M17 12.5a2.5 2.5 0 1 0-2.5 2.5v5l1.2-1.2 1.3 1.2v-5a2.5 2.5 0 0 0 0-2.5Z" })
+      ]
+    }
+  );
+}
 function GoogleG({ size = 18 }) {
   return /* @__PURE__ */ jsxs5("svg", { width: size, height: size, viewBox: "0 0 18 18", "aria-hidden": true, style: { display: "block" }, children: [
     /* @__PURE__ */ jsx6(
@@ -590,8 +738,9 @@ function ElvixSignInForm({
   const title = copy.title ? fillCopy(copy.title, { app: app?.appName ?? "" }) : defaultTitle;
   const submitLabel = copy.submitButton ?? verb;
   const showGoogle = Boolean(app?.methodGoogle);
+  const showPasskey = Boolean(app?.methodPasskey);
   const showEmail = Boolean(app?.methodEmailOtp);
-  const showDivider = showGoogle && showEmail;
+  const showDivider = (showGoogle || showPasskey) && showEmail;
   const logoSrc = app?.iconUrl || app?.logoUrl || null;
   const privacyUrl = app?.privacyPolicyUrl || null;
   const termsUrl = app?.termsOfServiceUrl || null;
@@ -629,6 +778,29 @@ function ElvixSignInForm({
       `${ctx.baseUrl}/api/auth/google/start?intent=app&clientId=${encodeURIComponent(ctx.clientId)}`
     );
   }
+  async function startPasskey() {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await runPasskeySignIn(ctx.baseUrl, ctx.clientId);
+      if (!result.ok) {
+        if (result.error === "passkey_cancelled") {
+          onResult?.({ ok: false, error: result.error });
+          return;
+        }
+        return fail(result.error, result.message);
+      }
+      setStep("done");
+      onResult?.({
+        ok: true,
+        method: "passkey",
+        redirect: result.redirect ?? redirectAfterSignIn,
+        token: result.token
+      });
+    } finally {
+      setBusy(false);
+    }
+  }
   async function startOtp(e) {
     e.preventDefault();
     if (!email.trim()) return fail("invalid_input", copy.errorEnterEmail);
@@ -792,6 +964,20 @@ function ElvixSignInForm({
           ]
         }
       ),
+      showPasskey && /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: startPasskey,
+          disabled: busy,
+          style: googleBtnStyle,
+          "data-elvix-method": "passkey",
+          children: [
+            /* @__PURE__ */ jsx6(PasskeyIcon, {}),
+            /* @__PURE__ */ jsx6("span", { children: copy.passkeyButton })
+          ]
+        }
+      ),
       showDivider && /* @__PURE__ */ jsxs5(
         "div",
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elvix.is/sdk",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Official elvix SDK. Drop-in React components, server helpers, and an MCP server so AI coding agents integrate elvix on the first try.",
   "license": "MIT",
   "homepage": "https://elvix.is",