decane-connect-kit 2.0.3 → 2.2.0

package/dist/index.cjs

@@ -1935,7 +1935,12 @@ function startBitcoinDiscovery(registry) {
 }
 
 // src/factory.ts
-function createDecane(config = {}) {
+function createDecane(config) {
+  if (!config?.appId) {
+    throw new Error(
+      "decane-connect-kit: appId is required. Pass your dashboard project ID as config.appId."
+    );
+  }
   const emitter = createEmitter();
   const registry = createRegistry(emitter);
   const session = createSessionManager();
@@ -1981,9 +1986,10 @@ var ERROR_MAP = {
   ORIGIN_NOT_ALLOWED: OriginNotAllowedError
 };
 var ApiClient = class {
-  constructor(baseUrl, apiKey) {
+  constructor(baseUrl, apiKey, appId) {
     this.baseUrl = baseUrl;
     this.apiKey = apiKey;
+    this.appId = appId;
   }
   async _request(path, init) {
     let res;
@@ -1993,6 +1999,7 @@ var ApiClient = class {
         headers: {
           "Content-Type": "application/json",
           "X-API-Key": this.apiKey,
+          "X-App-Id": this.appId,
           ...init?.headers
         }
       });
@@ -2059,6 +2066,35 @@ var ApiClient = class {
       body: JSON.stringify({ response, origin })
     });
   }
+  /**
+   * Exchange a token from the developer's own auth system for a Decane
+   * session. `providerId` is only needed when the project has more than one
+   * provider configured.
+   */
+  async authExternal(token, providerId) {
+    return this._request("/auth/external", {
+      method: "POST",
+      body: JSON.stringify(providerId ? { token, providerId } : { token })
+    });
+  }
+  /**
+   * Returns null when this user has no server-registered passkey, which is the
+   * expected answer for wallets created before passkey sign-in existed or for
+   * PIN-only users — the caller falls back to the normal sign-in flow.
+   */
+  async getWebAuthnLoginOptions(userId, rpId) {
+    return this._request("/webauthn/login-options", {
+      method: "POST",
+      body: JSON.stringify({ userId, rpId }),
+      allow404: true
+    });
+  }
+  async postWebAuthnLogin(userId, response, origin) {
+    return this._request("/webauthn/login", {
+      method: "POST",
+      body: JSON.stringify({ userId, response, origin })
+    });
+  }
   async revoke(jwt) {
     await this._request("/auth/revoke", {
       method: "POST",
@@ -2231,6 +2267,12 @@ var TeeClient = class {
     this.teeUrl = teeUrl;
     this.handle = null;
     this.attested = false;
+    /** Mirrors what the signer confirmed for this session, not what we asked for. */
+    this.assertionPerSignature = false;
+  }
+  /** Whether this session actually got per-signature assertions. */
+  requiresAssertionPerSignature() {
+    return this.assertionPerSignature;
   }
   async ensureAttested() {
     if (this.attested) return;
@@ -2246,16 +2288,20 @@ var TeeClient = class {
    * couldn't derive them (older signer build, or a transient share-fetch
    * failure); callers fall back to the backend's addresses in that case.
    */
-  async openSession(deviceShare, jwt) {
+  async openSession(deviceShare, jwt, requireAssertionPerSignature = false) {
     await this.ensureAttested();
     const res = await fetch(`${this.teeUrl}/signer/session`, {
       method: "POST",
       headers: { Authorization: `Bearer ${jwt}`, "Content-Type": "application/json" },
-      body: JSON.stringify({ deviceShare: bytesToBase64(deviceShare) })
+      body: JSON.stringify({
+        deviceShare: bytesToBase64(deviceShare),
+        requireAssertionPerSignature
+      })
     });
     if (!res.ok) throw new Error("session open failed");
     const body = await res.json();
     this.handle = body.handle;
+    this.assertionPerSignature = body.requireAssertionPerSignature === true;
     return body.addresses ?? null;
   }
   /**
@@ -2346,14 +2392,33 @@ var TeeClient = class {
   hasSession() {
     return this.handle !== null;
   }
-  async sign(req) {
+  /**
+   * `jwt` is only needed when this session requires per-signature assertions —
+   * it authenticates the challenge request. Passed per call rather than cached
+   * on the instance deliberately: the backend's JWTs are shorter-lived than the
+   * TEE session TTL, so a stored copy would go stale mid-session.
+   */
+  async sign(req, jwt) {
     if (!this.handle) throw new Error("no session");
+    let gate = null;
+    if (this.assertionPerSignature) {
+      if (!jwt) throw new Error("sign requires a jwt when per-signature assertion is enabled");
+      gate = await this.completeAssertion(jwt);
+    }
     const res = await fetch(`${this.teeUrl}/signer/sign`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ handle: this.handle, ...req })
+      body: JSON.stringify({
+        handle: this.handle,
+        ...req,
+        ...gate ? { ...gate, origin: window.location.origin } : {}
+      })
     });
     if (res.status === 401) {
+      const body = await res.clone().json().catch(() => ({}));
+      if (body?.error === "assertion_required") {
+        throw new ExportNotAuthorizedError();
+      }
       this.handle = null;
       throw new SessionExpiredError();
     }
@@ -2376,10 +2441,11 @@ var TeeClient = class {
 // src/social/session.ts
 init_errors();
 var SessionManager = class {
-  constructor(events, durationMs, teeUrl) {
+  constructor(events, durationMs, teeUrl, requireAssertionPerSignature = false) {
     this.events = events;
     this.durationMs = durationMs;
     this.teeUrl = teeUrl;
+    this.requireAssertionPerSignature = requireAssertionPerSignature;
     this.tee = null;
     this.evmAddress = null;
     this.solanaAddress = null;
@@ -2399,7 +2465,18 @@ var SessionManager = class {
    */
   async start(deviceShare, jwt, fallback) {
     this.tee = new TeeClient(this.teeUrl);
-    const verified = await this.tee.openSession(deviceShare, jwt);
+    const verified = await this.tee.openSession(
+      deviceShare,
+      jwt,
+      this.requireAssertionPerSignature
+    );
+    if (this.requireAssertionPerSignature && !this.tee.requiresAssertionPerSignature()) {
+      void this.tee.closeSession();
+      this.tee = null;
+      throw new Error(
+        "requireAssertionPerSignature was requested but this signer does not support it \u2014 refusing to open a session with weaker authority than configured."
+      );
+    }
     const addresses = verified ?? fallback;
     if (!addresses) {
       this.tee = null;
@@ -2518,6 +2595,12 @@ function validatePin(pin) {
 // src/social/crypto/passkey.ts
 var import_browser2 = require("@simplewebauthn/browser");
 init_errors();
+function b64u(u) {
+  return btoa(String.fromCharCode(...u)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+function fromB64u(s) {
+  return Uint8Array.from(atob(s.replace(/-/g, "+").replace(/_/g, "/")), (c) => c.charCodeAt(0));
+}
 function buf3(u) {
   return u.buffer.slice(u.byteOffset, u.byteOffset + u.byteLength);
 }
@@ -2544,6 +2627,29 @@ async function registerPasskey(opts) {
   );
   return { credentialId, prfOutput, response };
 }
+async function authenticateWithPasskey(opts) {
+  const optionsJSON = {
+    ...opts.optionsJSON,
+    extensions: {
+      ...opts.optionsJSON.extensions,
+      prf: { eval: { first: b64u(opts.prfSalt) } }
+    }
+  };
+  let response;
+  try {
+    response = await (0, import_browser2.startAuthentication)({ optionsJSON });
+  } catch (e) {
+    if (e.name === "NotAllowedError") throw new UserCancelledError();
+    throw e;
+  }
+  const ext = response.clientExtensionResults;
+  const prfResults = ext?.["prf"]?.results;
+  let prfOutput;
+  if (prfResults?.first) {
+    prfOutput = typeof prfResults.first === "string" ? fromB64u(prfResults.first) : new Uint8Array(prfResults.first);
+  }
+  return { response, prfOutput };
+}
 async function getPrfOutput(opts) {
   const challenge = crypto.getRandomValues(new Uint8Array(32));
   let cred;
@@ -2599,15 +2705,15 @@ async function verifyEmailCode(api, email, code) {
 
 // src/social/signers/evm.ts
 var import_ethers = require("ethers");
-async function signEvmTransaction(tee, chain, tx) {
+async function signEvmTransaction(tee, chain, tx, jwt) {
   const resolved = await (0, import_ethers.resolveProperties)(tx);
   const unsigned = import_ethers.Transaction.from(resolved).unsignedSerialized;
   const payload = unsigned.startsWith("0x") ? unsigned.slice(2) : unsigned;
   const txHash = (0, import_ethers.keccak256)("0x" + payload);
-  return tee.sign({ chain, kind: "transaction", payload, txHash });
+  return tee.sign({ chain, kind: "transaction", payload, txHash }, jwt);
 }
-async function signEvmMessage(tee, chain, message) {
-  return tee.sign({ chain, kind: "message", payload: message });
+async function signEvmMessage(tee, chain, message, jwt) {
+  return tee.sign({ chain, kind: "message", payload: message }, jwt);
 }
 
 // src/social/signers/solana.ts
@@ -2620,13 +2726,13 @@ function b64(bytes) {
 function unb64(s) {
   return Uint8Array.from(atob(s), (c) => c.charCodeAt(0));
 }
-async function signSolanaTransaction(tee, chain, tx) {
+async function signSolanaTransaction(tee, chain, tx, jwt) {
   const bytes = tx instanceof import_web3.VersionedTransaction ? tx.serialize() : tx.serialize({ requireAllSignatures: false });
-  const signed = await tee.sign({ chain, kind: "transaction", payload: b64(bytes) });
+  const signed = await tee.sign({ chain, kind: "transaction", payload: b64(bytes) }, jwt);
   return unb64(signed);
 }
-async function signSolanaMessage(tee, chain, message) {
-  const sig = await tee.sign({ chain, kind: "message", payload: b64(message) });
+async function signSolanaMessage(tee, chain, message, jwt) {
+  const sig = await tee.sign({ chain, kind: "message", payload: b64(message) }, jwt);
   return unb64(sig);
 }
 
@@ -2886,6 +2992,7 @@ function clearPersisted(key) {
   }
 }
 async function createDecaneConnect(config) {
+  if (!config.appId) throw new Error("decane-connect-kit: appId is required");
   if (!config.apiKey) throw new Error("decane-connect-kit: apiKey is required");
   if (!config.chains?.length)
     throw new Error("decane-connect-kit: at least one chain is required");
@@ -2896,9 +3003,14 @@ async function createDecaneConnect(config) {
   const PERSIST_KEY = makePersistKey(config.apiKey);
   const teeUrl = config.teeUrl ?? DEFAULT_TEE_URL;
   const events = new EventEmitter();
-  const api = new ApiClient(baseUrl, config.apiKey);
+  const api = new ApiClient(baseUrl, config.apiKey, config.appId);
   const storage = new Storage();
-  const session = new SessionManager(events, durationMs, teeUrl);
+  const session = new SessionManager(
+    events,
+    durationMs,
+    teeUrl,
+    config.requireAssertionPerSignature === true
+  );
   let auth = null;
   let persisted = loadPersisted(PERSIST_KEY);
   async function pinSetup() {
@@ -3146,6 +3258,45 @@ async function createDecaneConnect(config) {
     }
     return addresses;
   }
+  async function passkeyLoginCandidate() {
+    if (!persisted?.userId || !isPasskeySupported()) return null;
+    const stored = await storage.getShare(persisted.userId);
+    if (!stored || stored.unlockMethod !== "passkey") return null;
+    if (!stored.credentialId || !stored.prfSalt) return null;
+    return stored;
+  }
+  async function passkeyLogin(stored) {
+    const userId = stored.userId;
+    const options = await api.getWebAuthnLoginOptions(userId, rpId);
+    if (!options) {
+      throw new NewDeviceError();
+    }
+    const { response, prfOutput } = await authenticateWithPasskey({
+      optionsJSON: options,
+      prfSalt: stored.prfSalt
+    });
+    if (!prfOutput) throw new ShareCorruptedError();
+    const result = await api.postWebAuthnLogin(userId, response, window.location.origin);
+    let deviceShare;
+    try {
+      deviceShare = await aesGcmDecrypt(
+        await importAesKey(prfOutput),
+        stored.wrappedDeviceShare,
+        stored.iv
+      );
+    } catch {
+      throw new ShareCorruptedError();
+    }
+    const rawAddresses = await api.getAddresses(result.jwt);
+    const recordedAddresses = rawAddresses.evm && rawAddresses.solana ? { evm: rawAddresses.evm, solana: rawAddresses.solana } : null;
+    const addresses = await session.start(deviceShare, result.jwt, recordedAddresses);
+    zeroize(deviceShare);
+    auth = { jwt: result.jwt, userId, addresses };
+    persisted = { userId, addresses };
+    savePersisted(PERSIST_KEY, persisted);
+    events.emit("connected");
+    return { addresses, isNewUser: false };
+  }
   async function handleAuthResult(result) {
     let addresses;
     if (!result.hasShare) {
@@ -3164,6 +3315,15 @@ async function createDecaneConnect(config) {
       if (auth && session.isActive()) {
         return { addresses: auth.addresses, isNewUser: false };
       }
+      const candidate = await passkeyLoginCandidate();
+      if (candidate) {
+        try {
+          return await passkeyLogin(candidate);
+        } catch (e) {
+          if (e instanceof UserCancelledError) throw e;
+          console.warn("decane-connect-kit: passkey sign-in unavailable, falling back to standard sign-in.", e);
+        }
+      }
       const method = config.authMethods[0];
       if (!method) throw new CallSequenceError("No authMethods configured");
       if (method === "google") return client.connectWithGoogle();
@@ -3196,6 +3356,11 @@ async function createDecaneConnect(config) {
       return new Promise(() => {
       });
     },
+    async connectWithToken(token, opts) {
+      if (!token) throw new CallSequenceError("connectWithToken requires a token");
+      const result = await api.authExternal(token, opts?.providerId);
+      return handleAuthResult(result);
+    },
     async connectWithEmail(email) {
       await startEmailAuth(api, email);
       return { codeRequired: true };
@@ -3204,7 +3369,22 @@ async function createDecaneConnect(config) {
       const result = await verifyEmailCode(api, email, code);
       return handleAuthResult(result);
     },
+    async canSignInWithPasskey() {
+      return await passkeyLoginCandidate() !== null;
+    },
+    async signInWithPasskey() {
+      const candidate = await passkeyLoginCandidate();
+      if (!candidate) throw new NewDeviceError();
+      return passkeyLogin(candidate);
+    },
     async unlock() {
+      if (!auth) {
+        const candidate = await passkeyLoginCandidate();
+        if (candidate) {
+          await passkeyLogin(candidate);
+          return;
+        }
+      }
       if (!auth) {
         throw persisted ? new ReconnectRequiredError() : new CallSequenceError("Not connected \u2014 call connect() first");
       }
@@ -3229,11 +3409,11 @@ async function createDecaneConnect(config) {
     async signMessage(req) {
       const tee = session.requireActive();
       if (req.chain.startsWith("evm:")) {
-        return signEvmMessage(tee, req.chain, req.message);
+        return signEvmMessage(tee, req.chain, req.message, auth?.jwt);
       }
       if (req.chain.startsWith("solana:")) {
         const msg = typeof req.message === "string" ? new TextEncoder().encode(req.message) : req.message;
-        const sig = await signSolanaMessage(tee, req.chain, msg);
+        const sig = await signSolanaMessage(tee, req.chain, msg, auth?.jwt);
         return bufferToB64u(sig);
       }
       throw new CallSequenceError(`Unsupported chain: ${req.chain}`);
@@ -3281,7 +3461,7 @@ async function createDecaneConnect(config) {
           maxPriorityFeePerGas: feeData.maxPriorityFeePerGas ?? 0n
         } : { gasPrice: req.gasPrice ?? feeData.gasPrice ?? void 0 }
       };
-      const signedTx = await signEvmTransaction(tee, req.chain, tx);
+      const signedTx = await signEvmTransaction(tee, req.chain, tx, auth?.jwt);
       const txResponse = await provider.broadcastTransaction(signedTx);
       return txResponse.hash;
     },
@@ -3294,7 +3474,7 @@ async function createDecaneConnect(config) {
         tx = import_web32.Transaction.from(serializedTx);
       }
       const solChain = config.chains.find((c) => c.startsWith("solana:")) ?? "solana:mainnet";
-      return signSolanaTransaction(tee, solChain, tx);
+      return signSolanaTransaction(tee, solChain, tx, auth?.jwt);
     },
     async disconnect() {
       session.end();
@@ -3407,8 +3587,8 @@ async function createDecaneConnect(config) {
 function bufferToB64u(buf6) {
   return btoa(String.fromCharCode(...buf6)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
 }
-function b64uToBuffer(b64u) {
-  const b644 = b64u.replace(/-/g, "+").replace(/_/g, "/");
+function b64uToBuffer(b64u2) {
+  const b644 = b64u2.replace(/-/g, "+").replace(/_/g, "/");
   return Uint8Array.from(atob(b644), (c) => c.charCodeAt(0));
 }
 function toHex(bytes) {
@@ -3795,11 +3975,16 @@ function WalletSelector({
   socialAuthMethods = ["google", "email"],
   onGoogleSignIn,
   onEmailStart,
-  onEmailVerify
+  onEmailVerify,
+  customAuthLabel,
+  onCustomAuthSignIn,
+  canUsePasskey = false,
+  passkeyAddress = null,
+  onPasskeySignIn
 }) {
   const showSocial = hasSocialMode(mode);
   const showWallets = mode !== "social";
-  const [view, setView] = (0, import_react2.useState)(showWallets ? "wallets" : "social");
+  const [view, setView] = (0, import_react2.useState)(showSocial ? "social" : "wallets");
   const [search, setSearch] = (0, import_react2.useState)("");
   const [filter, setFilter] = (0, import_react2.useState)("all");
   const [pendingWallet, setPendingWallet] = (0, import_react2.useState)(null);
@@ -3808,6 +3993,8 @@ function WalletSelector({
   const [codeVal, setCodeVal] = (0, import_react2.useState)("");
   const [socialLoad, setSocialLoad] = (0, import_react2.useState)(false);
   const [socialErr, setSocialErr] = (0, import_react2.useState)("");
+  const [showOtherMethods, setShowOtherMethods] = (0, import_react2.useState)(false);
+  const passkeyFirst = canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
   (0, import_react2.useEffect)(() => {
     if (!open) return;
     injectFont();
@@ -3823,17 +4010,36 @@ function WalletSelector({
       setSearch("");
       setFilter("all");
       setPendingWallet(null);
-      setView(showWallets ? "wallets" : "social");
+      setView(showSocial ? "social" : "wallets");
       setEmailStep("input");
       setEmailVal("");
       setCodeVal("");
       setSocialErr("");
+      setShowOtherMethods(false);
       return;
     }
     return () => {
       document.getElementById("decane-tokens")?.remove();
     };
   }, [open, showWallets]);
+  async function handlePasskeySignIn() {
+    if (!onPasskeySignIn) return;
+    setSocialLoad(true);
+    setSocialErr("");
+    try {
+      await onPasskeySignIn();
+    } catch (e) {
+      const err = e;
+      if (err?.name !== "UserCancelledError") {
+        setSocialErr(err?.message ?? "Passkey sign-in failed");
+        setShowOtherMethods(true);
+      }
+      setSocialLoad(false);
+    }
+  }
+  async function handlePasskeyClick() {
+    void handlePasskeySignIn();
+  }
   async function handleGoogleClick() {
     if (!onGoogleSignIn) return;
     setSocialLoad(true);
@@ -3845,6 +4051,17 @@ function WalletSelector({
       setSocialLoad(false);
     }
   }
+  async function handleCustomAuthClick() {
+    if (!onCustomAuthSignIn) return;
+    setSocialLoad(true);
+    setSocialErr("");
+    try {
+      await onCustomAuthSignIn();
+    } catch (e) {
+      setSocialErr(e.message);
+      setSocialLoad(false);
+    }
+  }
   async function handleEmailStart(e) {
     e.preventDefault();
     if (!onEmailStart) return;
@@ -4119,7 +4336,7 @@ function WalletSelector({
             }
           },
           /* @__PURE__ */ import_react2.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }))
-        )), showWallets && showSocial && /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", gap: 4, marginBottom: 14, background: "var(--dc-surface)", borderRadius: 10, padding: 3 } }, ["wallets", "social"].map((v) => /* @__PURE__ */ import_react2.default.createElement(
+        )), showWallets && showSocial && /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", gap: 4, marginBottom: 14, background: "var(--dc-surface)", borderRadius: 10, padding: 3 } }, ["social", "wallets"].map((v) => /* @__PURE__ */ import_react2.default.createElement(
           "button",
           {
             key: v,
@@ -4178,7 +4395,53 @@ function WalletSelector({
               e.currentTarget.style.borderColor = "var(--dc-border)";
             }
           }
-        ))), view === "social" && /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "4px 20px 24px", display: "flex", flexDirection: "column", gap: 10 } }, socialErr && /* @__PURE__ */ import_react2.default.createElement("div", { style: { background: "rgba(204,51,0,0.1)", border: "1px solid var(--dc-danger)", borderRadius: 8, padding: "9px 12px", fontSize: 12, color: "var(--dc-danger)" } }, socialErr), socialAuthMethods.includes("google") && /* @__PURE__ */ import_react2.default.createElement(
+        ))), view === "social" && /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "4px 20px 24px", display: "flex", flexDirection: "column", gap: 10 } }, socialErr && /* @__PURE__ */ import_react2.default.createElement("div", { style: { background: "rgba(204,51,0,0.1)", border: "1px solid var(--dc-danger)", borderRadius: 8, padding: "9px 12px", fontSize: 12, color: "var(--dc-danger)" } }, socialErr), passkeyFirst && /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(
+          "button",
+          {
+            onClick: handlePasskeyClick,
+            disabled: socialLoad,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 10,
+              width: "100%",
+              padding: "13px 16px",
+              background: "var(--dc-accent)",
+              border: "none",
+              borderRadius: 10,
+              cursor: socialLoad ? "not-allowed" : "pointer",
+              color: "var(--dc-accent-text)",
+              fontSize: 14,
+              fontWeight: 700,
+              fontFamily: "inherit",
+              opacity: socialLoad ? 0.6 : 1
+            }
+          },
+          /* @__PURE__ */ import_react2.default.createElement("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "12", cy: "8", r: "4" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M6 21v-1a4 4 0 0 1 4-4h1" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M17 15v6M14.5 18h5" })),
+          socialLoad ? "Verifying\u2026" : "Continue with passkey"
+        ), passkeyAddress && /* @__PURE__ */ import_react2.default.createElement("div", { style: { textAlign: "center", fontSize: 12, color: "var(--dc-text-muted)" } }, "Resuming ", passkeyAddress.slice(0, 6), "\u2026", passkeyAddress.slice(-4)), /* @__PURE__ */ import_react2.default.createElement(
+          "button",
+          {
+            onClick: () => {
+              setShowOtherMethods(true);
+              setSocialErr("");
+            },
+            disabled: socialLoad,
+            style: {
+              background: "none",
+              border: "none",
+              padding: "6px 0",
+              color: "var(--dc-text-muted)",
+              fontSize: 12.5,
+              cursor: socialLoad ? "not-allowed" : "pointer",
+              fontFamily: "inherit",
+              textDecoration: "underline",
+              textUnderlineOffset: 3
+            }
+          },
+          "Use a different account"
+        )), !passkeyFirst && socialAuthMethods.includes("google") && /* @__PURE__ */ import_react2.default.createElement(
           "button",
           {
             onClick: handleGoogleClick,
@@ -4210,7 +4473,7 @@ function WalletSelector({
           },
           /* @__PURE__ */ import_react2.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z", fill: "#4285F4" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z", fill: "#34A853" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z", fill: "#FBBC05" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z", fill: "#EA4335" })),
           socialLoad ? "Redirecting\u2026" : "Continue with Google"
-        ), socialAuthMethods.includes("google") && socialAuthMethods.includes("email") && /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } }), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", whiteSpace: "nowrap" } }, "or continue with email"), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), socialAuthMethods.includes("email") && (emailStep === "input" ? /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ import_react2.default.createElement(
+        ), !passkeyFirst && socialAuthMethods.includes("google") && socialAuthMethods.includes("email") && /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } }), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", whiteSpace: "nowrap" } }, "or continue with email"), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), !passkeyFirst && socialAuthMethods.includes("email") && (emailStep === "input" ? /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", flexDirection: "column", gap: 8 } }, /* @__PURE__ */ import_react2.default.createElement(
           "input",
           {
             type: "email",
@@ -4329,7 +4592,38 @@ function WalletSelector({
             }
           },
           socialLoad ? "Verifying\u2026" : "Verify"
-        ))))), view === "wallets" && /* @__PURE__ */ import_react2.default.createElement("div", { style: { overflowY: "auto", flex: 1, padding: "0 12px 20px" } }, filtered.length > 0 ? /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 2 } }, filtered.map((w) => /* @__PURE__ */ import_react2.default.createElement(WalletRow, { key: w.id, wallet: w, onClick: () => handleWalletClick(w) }))) : /* @__PURE__ */ import_react2.default.createElement("div", { style: { textAlign: "center", padding: "32px 16px", color: "var(--dc-text-muted)", fontSize: 13 } }, q ? `No wallets matching "${q}"` : "No wallets detected")), view === "wallets" && /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "10px 20px 14px", borderTop: "1px solid var(--dc-border)", textAlign: "center", fontSize: 11, color: "var(--dc-text-muted)" } }, "Don't see your wallet? Make sure it's installed and unlocked"))
+        )))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, (socialAuthMethods.includes("google") || socialAuthMethods.includes("email")) && /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10 } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } }), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: 11, color: "var(--dc-text-muted)", whiteSpace: "nowrap" } }, "or"), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, height: 1, background: "var(--dc-border)" } })), /* @__PURE__ */ import_react2.default.createElement(
+          "button",
+          {
+            onClick: handleCustomAuthClick,
+            disabled: socialLoad,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 10,
+              width: "100%",
+              padding: "11px 16px",
+              background: "var(--dc-surface)",
+              border: "1px solid var(--dc-border)",
+              borderRadius: 10,
+              cursor: socialLoad ? "not-allowed" : "pointer",
+              fontSize: 14,
+              fontWeight: 600,
+              color: "var(--dc-text)",
+              fontFamily: "inherit",
+              transition: "border-color 0.12s, background 0.12s",
+              opacity: socialLoad ? 0.6 : 1
+            },
+            onMouseEnter: (e) => {
+              if (!socialLoad) e.currentTarget.style.borderColor = "var(--dc-border-accent)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.borderColor = "var(--dc-border)";
+            }
+          },
+          socialLoad ? "Connecting\u2026" : customAuthLabel
+        ))), view === "wallets" && /* @__PURE__ */ import_react2.default.createElement("div", { style: { overflowY: "auto", flex: 1, padding: "0 12px 20px" } }, filtered.length > 0 ? /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 2 } }, filtered.map((w) => /* @__PURE__ */ import_react2.default.createElement(WalletRow, { key: w.id, wallet: w, onClick: () => handleWalletClick(w) }))) : /* @__PURE__ */ import_react2.default.createElement("div", { style: { textAlign: "center", padding: "32px 16px", color: "var(--dc-text-muted)", fontSize: 13 } }, q ? `No wallets matching "${q}"` : "No wallets detected")), view === "wallets" && /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "10px 20px 14px", borderTop: "1px solid var(--dc-border)", textAlign: "center", fontSize: 11, color: "var(--dc-text-muted)" } }, "Don't see your wallet? Make sure it's installed and unlocked"))
       )
     )
   );
@@ -4451,13 +4745,16 @@ function SignInView({
   onEmailStart,
   onEmailVerify,
   authMethods,
-  resumeHint
+  resumeHint,
+  customAuthLabel,
+  onCustomAuthSignIn
 }) {
   const [googleLoading, setGoogleLoading] = (0, import_react3.useState)(false);
   const [email, setEmail] = (0, import_react3.useState)("");
   const [code, setCode] = (0, import_react3.useState)("");
   const [emailSent, setEmailSent] = (0, import_react3.useState)(false);
   const [emailLoading, setEmailLoading] = (0, import_react3.useState)(false);
+  const [customLoading, setCustomLoading] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)("");
   async function handleGoogle() {
     setError("");
@@ -4494,6 +4791,18 @@ function SignInView({
       setEmailLoading(false);
     }
   }
+  async function handleCustomAuth() {
+    if (!onCustomAuthSignIn) return;
+    setError("");
+    setCustomLoading(true);
+    try {
+      await onCustomAuthSignIn();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setCustomLoading(false);
+    }
+  }
   const inputStyle = {
     width: "100%",
     background: "var(--dc-surface)",
@@ -4566,7 +4875,27 @@ function SignInView({
     fontWeight: 700,
     cursor: "pointer",
     fontFamily: "inherit"
-  } }, emailLoading ? "\u2026" : "Verify"))), error && /* @__PURE__ */ import_react3.default.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "var(--dc-danger, #ff5533)" } }, error));
+  } }, emailLoading ? "\u2026" : "Verify"))), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      onClick: handleCustomAuth,
+      disabled: customLoading,
+      style: {
+        width: "100%",
+        padding: "10px 0",
+        background: "var(--dc-surface)",
+        color: "var(--dc-text)",
+        border: "1px solid var(--dc-border)",
+        borderRadius: 10,
+        fontSize: 13,
+        fontWeight: 600,
+        cursor: customLoading ? "not-allowed" : "pointer",
+        opacity: customLoading ? 0.7 : 1,
+        fontFamily: "inherit"
+      }
+    },
+    customLoading ? "Connecting\u2026" : customAuthLabel
+  )), error && /* @__PURE__ */ import_react3.default.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "var(--dc-danger, #ff5533)" } }, error));
 }
 function RecoverySection({
   addresses,
@@ -4683,6 +5012,8 @@ function SocialWalletModal({
   onEmailStart,
   onEmailVerify,
   authMethods = ["google", "email"],
+  customAuthLabel,
+  onCustomAuthSignIn,
   onRotateShares,
   onExportPortableBackup,
   rpcUrls,
@@ -4838,7 +5169,9 @@ function SocialWalletModal({
         onEmailStart,
         onEmailVerify,
         authMethods,
-        resumeHint: socialAuth.needsReconnect ? "your wallet" : void 0
+        resumeHint: socialAuth.needsReconnect ? "your wallet" : void 0,
+        customAuthLabel,
+        onCustomAuthSignIn
       }
     ) : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
       margin: "0 16px 14px",
@@ -4924,7 +5257,8 @@ var DEFAULT_SOCIAL = {
   isNewUser: false,
   isUnlocked: false,
   sessionExpiresAt: null,
-  needsReconnect: false
+  needsReconnect: false,
+  canUsePasskey: false
 };
 var DecaneContext = (0, import_react4.createContext)(null);
 function hasSocial(mode) {
@@ -4939,6 +5273,16 @@ function deriveNetworks(mode, explicit) {
 }
 function DecaneKit({ config, children }) {
   const mode = config?.mode ?? "wallets";
+  if (!config?.appId) {
+    throw new Error(
+      "DecaneKit: config.appId is required. Pass your dashboard project ID."
+    );
+  }
+  if (hasSocial(mode) && !config.social?.apiKey) {
+    throw new Error(
+      `DecaneKit: config.social.apiKey is required for social sign-in (mode "${mode}"). Create an API key for this project in the dashboard.`
+    );
+  }
   const walletRef = (0, import_react4.useRef)(null);
   if (!walletRef.current) walletRef.current = createDecane(config);
   const socialRef = (0, import_react4.useRef)(null);
@@ -4969,6 +5313,7 @@ function DecaneKit({ config, children }) {
     socialInitialized.current = true;
     const { apiKey, authMethods, promptPin, apiBaseUrl, chains, rpcUrls } = config.social;
     createDecaneConnect({
+      appId: config.appId,
       apiKey,
       apiBaseUrl,
       authMethods: authMethods ?? ["google", "email"],
@@ -4986,6 +5331,8 @@ function DecaneKit({ config, children }) {
       if (saved) {
         setSocialAuth((p) => ({ ...p, addresses: saved, isUnlocked: false, needsReconnect: true }));
       }
+      sdk.canSignInWithPasskey().then((can) => setSocialAuth((p) => ({ ...p, canUsePasskey: can }))).catch(() => {
+      });
       const params = new URLSearchParams(window.location.search);
       if (params.has("decane_jwt") || params.has("decane_error")) {
         sdk.connectWithGoogle().then(applyResult).catch(console.error);
@@ -4999,9 +5346,20 @@ function DecaneKit({ config, children }) {
       isNewUser: result.isNewUser,
       isUnlocked: sdk?.isUnlocked() ?? false,
       sessionExpiresAt: sdk?.sessionExpiresAt() ?? null,
-      needsReconnect: false
+      needsReconnect: false,
+      canUsePasskey: false
+    });
+    sdk?.canSignInWithPasskey().then((can) => setSocialAuth((p) => ({ ...p, canUsePasskey: can }))).catch(() => {
     });
   }
+  const signInWithPasskey = (0, import_react4.useCallback)(async () => {
+    const sdk = socialRef.current;
+    if (!sdk) throw new Error("Social sign-in not configured");
+    const result = await sdk.signInWithPasskey();
+    applyResult(result);
+    setSelectorOpen(false);
+    return result;
+  }, []);
   const connectWithGoogle = (0, import_react4.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
@@ -5019,6 +5377,19 @@ function DecaneKit({ config, children }) {
     applyResult(result);
     setSelectorOpen(false);
   }, []);
+  const connectWithToken = (0, import_react4.useCallback)(async (token, opts) => {
+    const sdk = socialRef.current;
+    if (!sdk) throw new Error("Social sign-in not configured");
+    const result = await sdk.connectWithToken(token, opts);
+    applyResult(result);
+    setSelectorOpen(false);
+  }, []);
+  const customAuthConfig = config?.social?.customAuth;
+  const connectWithCustomAuth = (0, import_react4.useCallback)(async () => {
+    if (!customAuthConfig) throw new Error("Custom auth not configured");
+    const token = await customAuthConfig.getToken();
+    await connectWithToken(token, customAuthConfig.providerId ? { providerId: customAuthConfig.providerId } : void 0);
+  }, [customAuthConfig, connectWithToken]);
   const socialUnlock = (0, import_react4.useCallback)(async () => {
     const sdk = socialRef.current;
     if (!sdk) return;
@@ -5095,9 +5466,13 @@ function DecaneKit({ config, children }) {
         setTheme,
         mode,
         socialAuth,
+        signInWithPasskey,
         connectWithGoogle,
         connectWithEmail,
         verifyEmailCode: verifyEmailCode2,
+        connectWithToken,
+        customAuthLabel: customAuthConfig?.label,
+        connectWithCustomAuth: customAuthConfig ? connectWithCustomAuth : void 0,
         socialUnlock,
         socialDisconnect,
         socialSignMessage,
@@ -5127,7 +5502,12 @@ function DecaneKit({ config, children }) {
         socialAuthMethods: config?.social?.authMethods ?? ["google", "email"],
         onGoogleSignIn: connectWithGoogle,
         onEmailStart: connectWithEmail,
-        onEmailVerify: verifyEmailCode2
+        onEmailVerify: verifyEmailCode2,
+        canUsePasskey: socialAuth.canUsePasskey,
+        passkeyAddress: socialAuth.addresses?.evm ?? socialAuth.addresses?.solana ?? null,
+        onPasskeySignIn: signInWithPasskey,
+        customAuthLabel: customAuthConfig?.label,
+        onCustomAuthSignIn: customAuthConfig ? connectWithCustomAuth : void 0
       }
     ),
     /* @__PURE__ */ import_react4.default.createElement(
@@ -5139,6 +5519,8 @@ function DecaneKit({ config, children }) {
         socialAuth,
         onUnlock: socialUnlock,
         onDisconnect: socialDisconnect,
+        customAuthLabel: customAuthConfig?.label,
+        onCustomAuthSignIn: customAuthConfig ? connectWithCustomAuth : void 0,
         onGoogleSignIn: connectWithGoogle,
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
@@ -5169,11 +5551,16 @@ function useSocialAuth() {
     connectWithGoogle,
     connectWithEmail,
     verifyEmailCode: verifyEmailCode2,
+    connectWithToken,
+    customAuthLabel,
+    connectWithCustomAuth,
     socialUnlock,
     socialDisconnect
   } = useDecaneContext();
   const [googleLoading, setGoogleLoading] = (0, import_react5.useState)(false);
   const [emailLoading, setEmailLoading] = (0, import_react5.useState)(false);
+  const [tokenLoading, setTokenLoading] = (0, import_react5.useState)(false);
+  const [customLoading, setCustomLoading] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.useState)(null);
   const signInWithGoogle = (0, import_react5.useCallback)(async () => {
     setGoogleLoading(true);
@@ -5210,6 +5597,31 @@ function useSocialAuth() {
       setEmailLoading(false);
     }
   }, [verifyEmailCode2]);
+  const signInWithToken = (0, import_react5.useCallback)(async (token, opts) => {
+    setTokenLoading(true);
+    setError(null);
+    try {
+      await connectWithToken(token, opts);
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    } finally {
+      setTokenLoading(false);
+    }
+  }, [connectWithToken]);
+  const signInWithCustomAuth = (0, import_react5.useCallback)(async () => {
+    if (!connectWithCustomAuth) throw new Error("Custom auth not configured");
+    setCustomLoading(true);
+    setError(null);
+    try {
+      await connectWithCustomAuth();
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    } finally {
+      setCustomLoading(false);
+    }
+  }, [connectWithCustomAuth]);
   const unlock = (0, import_react5.useCallback)(async () => {
     setError(null);
     try {
@@ -5241,11 +5653,16 @@ function useSocialAuth() {
     needsReconnect: socialAuth.needsReconnect,
     googleLoading,
     emailLoading,
+    tokenLoading,
+    customLoading,
+    customAuthLabel,
     error,
     clearError: () => setError(null),
     signInWithGoogle,
     sendEmailCode,
     confirmEmailCode,
+    signInWithToken,
+    signInWithCustomAuth: connectWithCustomAuth ? signInWithCustomAuth : void 0,
     unlock,
     disconnect
   };