@elvix.is/sdk 0.1.1 → 0.2.0

package/README.md

@@ -186,6 +186,10 @@ See [CONTRIBUTING.md](./CONTRIBUTING.md). PRs welcome — we run CI on every pus
 
 ## Maintained by
 
-**[edvone](https://edvone.dev)** · Aachen, Germany · [hi@edvone.dev](mailto:hi@edvone.dev)
+**[edvone](https://edvone.dev)** · Aachen, Germany
 
 elvix is an edvone product.
+
+- General enquiries: [edvone.dev/contact](https://edvone.dev/contact)
+- Sales / integration call: [edvone.dev/book](https://edvone.dev/book)
+- Security disclosure: [security@elvix.is](mailto:security@elvix.is) (see [SECURITY.md](./SECURITY.md))

package/dist/react.d.ts

@@ -1 +1,104 @@
-export { ElvixActionResult, ElvixUser, ElvixVerifyErr, ElvixVerifyOk, ElvixVerifyResult } from './index.js';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Public types for the React surface. Mirrors the elvix.is bootstrap
+ * envelope so customers can type their host code without importing
+ * private elvix internals.
+ */
+type ElvixBrand = {
+    light: {
+        primary: string;
+        on: string;
+    };
+    dark: {
+        primary: string;
+        on: string;
+    };
+};
+type ElvixSignInMethod = "google" | "email_otp" | "passkey" | "username";
+type ElvixBootstrapEnvelope = {
+    applicationId: string;
+    clientId: string;
+    urlSlug: string;
+    appName: string;
+    logoUrl: string | null;
+    logoUrlDark: string | null;
+    iconUrl: string | null;
+    iconUrlDark: string | null;
+    brand: ElvixBrand;
+    methods: {
+        google: boolean;
+        emailOtp: boolean;
+        passkey: boolean;
+        username: boolean;
+    };
+    legal: {
+        privacyPolicyUrl: string;
+        termsOfServiceUrl: string;
+        supportEmail: string;
+        supportUrl: string | null;
+    };
+    signInVerb: "signin" | "login";
+    signinGate: "public" | "private_beta" | "closed";
+};
+type ElvixSignInResultOk = {
+    ok: true;
+    /** Where the host should send the user (if anywhere). */
+    redirect?: string;
+    /** Sign-in factor that succeeded. */
+    method: ElvixSignInMethod;
+};
+type ElvixSignInResultErr = {
+    ok: false;
+    error: string;
+    message?: string;
+};
+type ElvixSignInResult = ElvixSignInResultOk | ElvixSignInResultErr;
+/** Theme override. Omit to inherit the Console-configured pair. */
+type ElvixTheme = "light" | "dark" | "system";
+
+type ElvixContextValue = {
+    clientId: string | undefined;
+    baseUrl: string;
+    app: ElvixBootstrapEnvelope | null;
+    appError: string | null;
+    resolvedTheme: "light" | "dark";
+};
+declare function useElvixApp(): ElvixBootstrapEnvelope | null;
+declare function useElvixContext(): ElvixContextValue;
+declare function ElvixProvider({ clientId, theme, brand, baseUrl, children, className, }: {
+    clientId?: string;
+    theme?: ElvixTheme;
+    brand?: ElvixBrand;
+    /** Override the elvix origin (testing, proxy setups). */
+    baseUrl?: string;
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
+/**
+ * `<ElvixSignIn>` — drop-in sign-in surface.
+ *
+ * Reads enabled methods from the Console-configured bootstrap envelope
+ * (`<ElvixProvider clientId>` must be in scope). Renders the methods
+ * the customer turned on; never invents UI the Console denied.
+ *
+ * MVP supports:
+ *   - Email OTP (the most common path)
+ *   - Google redirect ("Continue with Google")
+ *
+ * Passkey + username-OTP follow in 0.2.x point releases.
+ *
+ * `onResult({ ok, ... })` is the only post-success hook the SDK
+ * exposes. Hosts navigate from the callback; this component never
+ * calls `router.push` itself.
+ */
+declare function ElvixSignIn({ onResult, redirectAfterSignIn, className, }: {
+    onResult?: (r: ElvixSignInResult) => void;
+    /** Default redirect target on success when the server doesn't echo one. */
+    redirectAfterSignIn?: string;
+    className?: string;
+}): react.JSX.Element;
+
+export { type ElvixBootstrapEnvelope, type ElvixBrand, ElvixProvider, ElvixSignIn, type ElvixSignInMethod, type ElvixSignInResult, type ElvixSignInResultErr, type ElvixSignInResultOk, type ElvixTheme, useElvixApp, useElvixContext };

package/dist/react.js

@@ -0,0 +1,245 @@
+// src/react/elvix-provider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+var ELVIX_DEFAULT_BRAND = {
+  light: { primary: "#5d4dff", on: "#ffffff" },
+  dark: { primary: "#8e7dff", on: "#0a0a0b" }
+};
+var DEFAULT_BASE_URL = "https://elvix.is";
+var BOOTSTRAP_URL = (baseUrl, clientId) => `${baseUrl}/api/v1/bootstrap/${encodeURIComponent(clientId)}`;
+var ElvixContext = createContext(null);
+function useElvixApp() {
+  const ctx = useContext(ElvixContext);
+  return ctx?.app ?? null;
+}
+function useElvixContext() {
+  const ctx = useContext(ElvixContext);
+  if (!ctx) {
+    throw new Error("Elvix components must be wrapped in <ElvixProvider>.");
+  }
+  return ctx;
+}
+function ElvixProvider({
+  clientId,
+  theme,
+  brand,
+  baseUrl,
+  children,
+  className = ""
+}) {
+  const resolvedBaseUrl = baseUrl ?? DEFAULT_BASE_URL;
+  const [app, setApp] = useState(null);
+  const [appError, setAppError] = useState(null);
+  const [systemDark, setSystemDark] = useState(false);
+  useEffect(() => {
+    if (!clientId) {
+      setApp(null);
+      setAppError(null);
+      return;
+    }
+    const ctrl = new AbortController();
+    fetch(BOOTSTRAP_URL(resolvedBaseUrl, clientId), { signal: ctrl.signal }).then((r) => r.json()).then((body) => {
+      if (body?.success && body?.data) {
+        setApp(body.data);
+        setAppError(null);
+      } else {
+        setAppError(body?.errorMessage ?? "bootstrap_failed");
+      }
+    }).catch((e) => {
+      if (e?.name === "AbortError") return;
+      setAppError(e instanceof Error ? e.message : "bootstrap_failed");
+    });
+    return () => ctrl.abort();
+  }, [clientId, resolvedBaseUrl]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setSystemDark(mq.matches);
+    const sync = (e) => setSystemDark(e.matches);
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
+  const effectiveTheme = useMemo(() => {
+    if (theme === "light") return "light";
+    if (theme === "dark") return "dark";
+    return systemDark ? "dark" : "light";
+  }, [theme, systemDark]);
+  const effectiveBrand = brand ?? appBrand(app) ?? ELVIX_DEFAULT_BRAND;
+  const pair = effectiveBrand[effectiveTheme];
+  const cssVars = useMemo(
+    () => ({
+      "--elvix-primary": pair.primary,
+      "--elvix-on-primary": pair.on,
+      "--elvix-primary-12": withAlpha(pair.primary, 0.12),
+      "--elvix-primary-35": withAlpha(pair.primary, 0.35),
+      "--elvix-primary-55": withAlpha(pair.primary, 0.55),
+      "--elvix-primary-strong": pair.primary
+    }),
+    [pair.primary, pair.on]
+  );
+  const value = {
+    clientId,
+    baseUrl: resolvedBaseUrl,
+    app,
+    appError,
+    resolvedTheme: effectiveTheme
+  };
+  return /* @__PURE__ */ React.createElement(ElvixContext.Provider, { value }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-elvix-theme": effectiveTheme,
+      style: cssVars,
+      className: (effectiveTheme === "dark" ? "dark " : "") + "elvix-sdk-root " + className
+    },
+    children
+  ));
+}
+function appBrand(app) {
+  if (!app?.brand) return null;
+  return app.brand;
+}
+function withAlpha(hex, a) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return hex;
+  const n = Number.parseInt(m[1], 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+// src/react/elvix-sign-in.tsx
+import { useState as useState2 } from "react";
+function ElvixSignIn({
+  onResult,
+  redirectAfterSignIn,
+  className = ""
+}) {
+  const ctx = useElvixContext();
+  const app = useElvixApp();
+  const [step, setStep] = useState2("identify");
+  const [email, setEmail] = useState2("");
+  const [code, setCode] = useState2("");
+  const [challengeId, setChallengeId] = useState2(null);
+  const [busy, setBusy] = useState2(false);
+  const [error, setError] = useState2(null);
+  const verb = app?.signInVerb === "login" ? "Log in" : "Sign in";
+  function fail(error2, message) {
+    setError(message ?? error2);
+    onResult?.({ ok: false, error: error2, message });
+  }
+  async function startGoogle() {
+    if (!ctx.clientId) return fail("missing_client_id", "ElvixProvider needs a clientId.");
+    window.location.assign(
+      `${ctx.baseUrl}/api/auth/google/start?intent=app&clientId=${encodeURIComponent(ctx.clientId)}`
+    );
+  }
+  async function startOtp(e) {
+    e.preventDefault();
+    if (!email.trim()) return fail("invalid_input", "Enter an email.");
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch(`${ctx.baseUrl}/api/auth/otp/start`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({
+          email: email.trim(),
+          intent: "app",
+          clientId: ctx.clientId
+        })
+      });
+      const body = await res.json();
+      if (!res.ok || !body.success || !body.data?.challengeId) {
+        return fail(body.errorMessage ?? "otp_start_failed");
+      }
+      setChallengeId(body.data.challengeId);
+      setStep("code");
+    } catch (e2) {
+      fail("network", e2 instanceof Error ? e2.message : void 0);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function verifyOtp(e) {
+    e.preventDefault();
+    if (!challengeId) return;
+    if (code.trim().length !== 6) return fail("invalid_input", "Enter the 6-digit code.");
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch(`${ctx.baseUrl}/api/auth/otp/verify`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ challengeId, code: code.trim() })
+      });
+      const body = await res.json();
+      if (!res.ok || !body.success) {
+        return fail(body.errorMessage ?? "otp_verify_failed");
+      }
+      setStep("done");
+      onResult?.({
+        ok: true,
+        method: "email_otp",
+        redirect: body.data?.redirect ?? redirectAfterSignIn
+      });
+    } catch (e2) {
+      fail("network", e2 instanceof Error ? e2.message : void 0);
+    } finally {
+      setBusy(false);
+    }
+  }
+  const card = `elvix-card ${className}`.trim();
+  if (step === "done") {
+    return /* @__PURE__ */ React.createElement("div", { className: card, "data-elvix-pane": "done" }, /* @__PURE__ */ React.createElement("p", null, "Signed in."));
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: card, "data-elvix-pane": step }, /* @__PURE__ */ React.createElement("h2", { className: "elvix-h" }, app?.appName ? `${verb} to ${app.appName}` : verb), step === "identify" && /* @__PURE__ */ React.createElement(React.Fragment, null, app?.methods.google && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: startGoogle,
+      disabled: busy,
+      className: "elvix-btn elvix-btn-google",
+      "data-elvix-method": "google"
+    },
+    "Continue with Google"
+  ), app?.methods.emailOtp && /* @__PURE__ */ React.createElement("form", { onSubmit: startOtp, "data-elvix-method": "email_otp", className: "elvix-otp-form" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "email",
+      value: email,
+      onChange: (ev) => setEmail(ev.target.value),
+      placeholder: "you@example.com",
+      required: true,
+      disabled: busy,
+      className: "elvix-input"
+    }
+  ), /* @__PURE__ */ React.createElement("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary" }, busy ? "Sending\u2026" : "Send code"))), step === "code" && /* @__PURE__ */ React.createElement("form", { onSubmit: verifyOtp, className: "elvix-otp-form" }, /* @__PURE__ */ React.createElement("p", { className: "elvix-muted" }, "We sent a 6-digit code to ", /* @__PURE__ */ React.createElement("strong", null, email), "."), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "text",
+      inputMode: "numeric",
+      pattern: "[0-9]*",
+      maxLength: 6,
+      value: code,
+      onChange: (ev) => setCode(ev.target.value.replace(/\D/g, "")),
+      placeholder: "123456",
+      required: true,
+      disabled: busy,
+      className: "elvix-input"
+    }
+  ), /* @__PURE__ */ React.createElement("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary" }, busy ? "Verifying\u2026" : verb)), error && /* @__PURE__ */ React.createElement("p", { role: "alert", className: "elvix-error" }, error));
+}
+export {
+  ElvixProvider,
+  ElvixSignIn,
+  useElvixApp,
+  useElvixContext
+};

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "@elvix.is/sdk",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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",
-  "author": "edvone <hi@edvone.dev> (https://edvone.dev)",
+  "author": {
+    "name": "edvone",
+    "url": "https://edvone.dev"
+  },
+  "funding": "https://edvone.dev/book",
+  "engines": {
+    "node": ">=20"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/021is/elvix-sdk.git"
@@ -49,13 +56,16 @@
     "next": ">=15"
   },
   "peerDependenciesMeta": {
-    "next": { "optional": true }
+    "next": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.4"
   },
   "devDependencies": {
     "@types/node": "^22.7.5",
+    "@types/react": "^19.2.15",
     "tsup": "^8.3.0",
     "typescript": "^5.6.3",
     "vitest": "^2.1.2"