@worldcoin/idkit 4.0.4 → 4.0.6

package/README.md

@@ -18,7 +18,11 @@ npm install @worldcoin/idkit
 ## Basic usage
 
 ```tsx
-import { useIDKitRequest, orbLegacy, selfieCheck } from "@worldcoin/idkit";
+import {
+  useIDKitRequest,
+  orbLegacy,
+  selfieCheckLegacy,
+} from "@worldcoin/idkit";
 
 function Example() {
   const flow = useIDKitRequest({
@@ -39,7 +43,7 @@ function Example() {
 }
 ```
 
-Use `selfieCheck({ signal })` for selfie-check preset requests.
+Use `selfieCheckLegacy({ signal })` for selfie-check preset requests.
 
 ```tsx
 import type { IDKitRequestHookConfig } from "@worldcoin/idkit";
@@ -53,6 +57,45 @@ const config: IDKitRequestHookConfig = {
 };
 ```
 
+## Widget usage
+
+```tsx
+import { IDKitRequestWidget, orbLegacy } from "@worldcoin/idkit";
+
+function WidgetExample() {
+  return (
+    <IDKitRequestWidget
+      open={open}
+      onOpenChange={setOpen}
+      app_id="app_xxxxx"
+      action="my-action"
+      rp_context={rpContext}
+      allow_legacy_proofs={false}
+      preset={orbLegacy({ signal: "user-123" })}
+      onSuccess={(result) => {
+        // required: runs after verification succeeds
+        console.log(result);
+      }}
+      handleVerify={async (result) => {
+        // optional: run host app verification before success screen/callback
+        const response = await fetch("/api/verify-proof", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(result),
+        });
+
+        if (!response.ok) {
+          throw new Error("Proof verification failed");
+        }
+      }}
+      onError={(errorCode) => {
+        console.error(errorCode);
+      }}
+    />
+  );
+}
+```
+
 ## Subpath Exports
 
 Pure JS subpath exports for server-side use (no WASM or React required):

package/dist/index.cjs

@@ -547,6 +547,7 @@ var WIDGET_STYLES = `
   animation: idkit-spin 1s linear infinite;
 }
 .idkit-spinner svg {
+  display: block;
   width: 24px;
   height: 24px;
 }
@@ -719,6 +720,8 @@ var en = {
   "You've cancelled the request in World App.": "You've cancelled the request in World App.",
   "Connection lost": "Connection lost",
   "Please check your connection and try again.": "Please check your connection and try again.",
+  "Verification declined": "Verification declined",
+  "Failed to verify your credential proof. Please contact the website owner.": "Failed to verify your credential proof. Please contact the website owner.",
   "We couldn't complete your request. Please try again.": "We couldn't complete your request. Please try again.",
   "Try Again": "Try Again",
   "Open World App": "Open World App",
@@ -727,6 +730,7 @@ var en = {
   "Use phone camera to scan the QR code": "Use phone camera to scan the QR code",
   "Connecting...": "Connecting...",
   "Please continue in app": "Please continue in app",
+  "Transmitting verification to host app. Please wait...": "Transmitting verification to host app. Please wait...",
   "You will be redirected to the app, please return to this page once you're done": "You will be redirected to the app, please return to this page once you're done",
   "Terms & Privacy": "Terms & Privacy"
 };
@@ -740,6 +744,8 @@ var es = {
   "You've cancelled the request in World App.": "Has cancelado la solicitud en World App.",
   "Connection lost": "Conexion perdida",
   "Please check your connection and try again.": "Por favor verifica tu conexion e intenta de nuevo.",
+  "Verification declined": "Verificaci\xF3n rechazada",
+  "Failed to verify your credential proof. Please contact the website owner.": "No se pudo verificar tu prueba de credencial. Por favor contacta al propietario del sitio web.",
   "We couldn't complete your request. Please try again.": "No pudimos completar tu solicitud. Por favor intenta de nuevo.",
   "Try Again": "Intentar de nuevo",
   "Open World App": "Abrir World App",
@@ -748,6 +754,7 @@ var es = {
   "Use phone camera to scan the QR code": "Usa la c\xE1mara del tel\xE9fono para escanear el c\xF3digo QR",
   "Connecting...": "Conectando...",
   "Please continue in app": "Por favor contin\xFAa en la aplicaci\xF3n",
+  "Transmitting verification to host app. Please wait...": "Enviando verificaci\xF3n a la aplicaci\xF3n anfitriona. Por favor espera...",
   "You will be redirected to the app, please return to this page once you're done": "Ser\xE1s redirigido a la aplicaci\xF3n, por favor regresa a esta p\xE1gina una vez que hayas terminado",
   "Terms & Privacy": "T\xE9rminos y privacidad"
 };
@@ -761,6 +768,8 @@ var th = {
   "You've cancelled the request in World App.": "\u0E04\u0E38\u0E13\u0E44\u0E14\u0E49\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E04\u0E33\u0E02\u0E2D\u0E43\u0E19 World App",
   "Connection lost": "\u0E01\u0E32\u0E23\u0E40\u0E0A\u0E37\u0E48\u0E2D\u0E21\u0E15\u0E48\u0E2D\u0E02\u0E32\u0E14\u0E2B\u0E32\u0E22",
   "Please check your connection and try again.": "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A\u0E01\u0E32\u0E23\u0E40\u0E0A\u0E37\u0E48\u0E2D\u0E21\u0E15\u0E48\u0E2D\u0E41\u0E25\u0E49\u0E27\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07",
+  "Verification declined": "\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E16\u0E39\u0E01\u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18",
+  "Failed to verify your credential proof. Please contact the website owner.": "\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E2B\u0E25\u0E31\u0E01\u0E10\u0E32\u0E19\u0E02\u0E2D\u0E07 Credential \u0E44\u0E14\u0E49 \u0E42\u0E1B\u0E23\u0E14\u0E15\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E40\u0E08\u0E49\u0E32\u0E02\u0E2D\u0E07\u0E40\u0E27\u0E47\u0E1A\u0E44\u0E0B\u0E15\u0E4C",
   "We couldn't complete your request. Please try again.": "\u0E40\u0E23\u0E32\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23\u0E15\u0E32\u0E21\u0E04\u0E33\u0E02\u0E2D\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E44\u0E14\u0E49 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07",
   "Try Again": "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07",
   "Open World App": "\u0E40\u0E1B\u0E34\u0E14 World App",
@@ -769,6 +778,7 @@ var th = {
   "Use phone camera to scan the QR code": "\u0E43\u0E0A\u0E49\u0E01\u0E25\u0E49\u0E2D\u0E07\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2A\u0E41\u0E01\u0E19 QR code",
   "Connecting...": "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E40\u0E0A\u0E37\u0E48\u0E2D\u0E21\u0E15\u0E48\u0E2D...",
   "Please continue in app": "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23\u0E15\u0E48\u0E2D\u0E43\u0E19\u0E41\u0E2D\u0E1B",
+  "Transmitting verification to host app. Please wait...": "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E2A\u0E48\u0E07\u0E01\u0E32\u0E23\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E44\u0E1B\u0E22\u0E31\u0E07\u0E41\u0E2D\u0E1B\u0E42\u0E2E\u0E2A\u0E15\u0E4C \u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E2D\u0E2A\u0E31\u0E01\u0E04\u0E23\u0E39\u0E48...",
   "You will be redirected to the app, please return to this page once you're done": "\u0E04\u0E38\u0E13\u0E08\u0E30\u0E16\u0E39\u0E01\u0E19\u0E33\u0E44\u0E1B\u0E22\u0E31\u0E07\u0E41\u0E2D\u0E1B \u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E25\u0E31\u0E1A\u0E21\u0E32\u0E17\u0E35\u0E48\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E40\u0E21\u0E37\u0E48\u0E2D\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E41\u0E25\u0E49\u0E27",
   "Terms & Privacy": "\u0E02\u0E49\u0E2D\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E41\u0E25\u0E30\u0E04\u0E27\u0E32\u0E21\u0E40\u0E1B\u0E47\u0E19\u0E2A\u0E48\u0E27\u0E19\u0E15\u0E31\u0E27"
 };
@@ -1522,9 +1532,9 @@ function WarningIcon(props) {
 var errorCodeVariants = {
   [idkitCore.IDKitErrorCodes.UserRejected]: "cancelled",
   [idkitCore.IDKitErrorCodes.VerificationRejected]: "cancelled",
-  [idkitCore.IDKitErrorCodes.FailedByHostApp]: "cancelled",
   [idkitCore.IDKitErrorCodes.Cancelled]: "cancelled",
-  [idkitCore.IDKitErrorCodes.ConnectionFailed]: "connection"
+  [idkitCore.IDKitErrorCodes.ConnectionFailed]: "connection",
+  [idkitCore.IDKitErrorCodes.FailedByHostApp]: "host_verification"
 };
 var variantConfig = {
   cancelled: {
@@ -1538,6 +1548,11 @@ var variantConfig = {
     Icon: ErrorIcon
     // placeholder — swap for WifiOffIcon later
   },
+  host_verification: {
+    title: "Verification declined",
+    message: "Failed to verify your credential proof. Please contact the website owner.",
+    Icon: ErrorIcon
+  },
   generic: {
     title: "Something went wrong",
     message: "We couldn't complete your request. Please try again.",
@@ -1574,26 +1589,60 @@ function ErrorState({
     }
   );
 }
-function getVisualStage(isSuccess, isError) {
-  if (isSuccess) {
-    return "success";
-  }
-  if (isError) {
-    return "error";
-  }
+function HostAppVerificationState({
+  onVerify,
+  onPass,
+  onFail
+}) {
+  react.useEffect(() => {
+    let cancelled = false;
+    void Promise.resolve(onVerify()).then(() => {
+      if (!cancelled) onPass();
+    }).catch(() => {
+      if (!cancelled) onFail();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "idkit-spinner", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "idkit-subtext", children: __("Transmitting verification to host app. Please wait...") })
+      ]
+    }
+  );
+}
+function getVisualStage(isSuccess, isError, isHostVerifying) {
+  if (isError) return "error";
+  if (isHostVerifying) return "host_verification";
+  if (isSuccess) return "success";
   return "worldid";
 }
 function IDKitRequestWidget({
   open,
   onOpenChange,
+  handleVerify,
   onSuccess,
   onError,
   autoClose = true,
   language,
   ...config
 }) {
+  if (typeof onSuccess !== "function") {
+    throw new Error("IDKitRequestWidget requires an onSuccess callback.");
+  }
   const flow = useIDKitRequest(config);
   const { open: openFlow, reset: resetFlow } = flow;
+  const [hostVerifyResult, setHostVerifyResult] = react.useState(null);
   const lastResultRef = react.useRef(null);
   const lastErrorCodeRef = react.useRef(null);
   react.useEffect(() => {
@@ -1603,34 +1652,42 @@ function IDKitRequestWidget({
   }, [language]);
   react.useEffect(() => {
     if (open) {
+      setHostVerifyResult(null);
       openFlow();
       return;
     }
+    setHostVerifyResult(null);
+    lastResultRef.current = null;
+    lastErrorCodeRef.current = null;
     resetFlow();
   }, [open, openFlow, resetFlow]);
+  const isSuccess = flow.isSuccess && (!handleVerify || hostVerifyResult === "passed");
+  const isError = flow.isError || hostVerifyResult === "failed";
+  const isHostVerifying = flow.isSuccess && Boolean(handleVerify) && hostVerifyResult === null;
+  const effectiveErrorCode = flow.errorCode ?? (hostVerifyResult === "failed" ? idkitCore.IDKitErrorCodes.FailedByHostApp : null);
   react.useEffect(() => {
-    if (!flow.result || flow.result === lastResultRef.current) {
+    if (!isSuccess || !flow.result || flow.result === lastResultRef.current) {
       return;
     }
     lastResultRef.current = flow.result;
-    void Promise.resolve(onSuccess?.(flow.result)).catch(() => {
+    void Promise.resolve(onSuccess(flow.result)).catch(() => {
     });
-  }, [onSuccess, flow.result]);
+  }, [flow.result, isSuccess, onSuccess]);
   react.useEffect(() => {
-    if (!flow.errorCode || flow.errorCode === lastErrorCodeRef.current) {
+    if (!effectiveErrorCode || effectiveErrorCode === lastErrorCodeRef.current) {
       return;
     }
-    lastErrorCodeRef.current = flow.errorCode;
-    void Promise.resolve(onError?.(flow.errorCode)).catch(() => {
+    lastErrorCodeRef.current = effectiveErrorCode;
+    void Promise.resolve(onError?.(effectiveErrorCode)).catch(() => {
     });
-  }, [flow.errorCode, onError]);
+  }, [effectiveErrorCode, onError]);
   react.useEffect(() => {
-    if (flow.isSuccess && autoClose) {
+    if (isSuccess && autoClose) {
       const timer = setTimeout(() => onOpenChange(false), 2500);
       return () => clearTimeout(timer);
     }
-  }, [flow.isSuccess, autoClose, onOpenChange]);
-  const stage = getVisualStage(flow.isSuccess, flow.isError);
+  }, [isSuccess, autoClose, onOpenChange]);
+  const stage = getVisualStage(isSuccess, isError, isHostVerifying);
   const showSimulatorCallout = config.environment === "staging";
   return /* @__PURE__ */ jsxRuntime.jsxs(IDKitModal, { open, onOpenChange, children: [
     stage === "worldid" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1641,12 +1698,23 @@ function IDKitRequestWidget({
         showSimulatorCallout
       }
     ),
+    stage === "host_verification" && /* @__PURE__ */ jsxRuntime.jsx(
+      HostAppVerificationState,
+      {
+        onVerify: () => handleVerify(flow.result),
+        onPass: () => setHostVerifyResult("passed"),
+        onFail: () => setHostVerifyResult("failed")
+      }
+    ),
     stage === "success" && /* @__PURE__ */ jsxRuntime.jsx(SuccessState, {}),
     stage === "error" && /* @__PURE__ */ jsxRuntime.jsx(
       ErrorState,
       {
-        errorCode: flow.errorCode,
+        errorCode: effectiveErrorCode,
         onRetry: () => {
+          setHostVerifyResult(null);
+          lastResultRef.current = null;
+          lastErrorCodeRef.current = null;
           resetFlow();
           openFlow();
         }
@@ -1675,9 +1743,9 @@ Object.defineProperty(exports, "secureDocumentLegacy", {
   enumerable: true,
   get: function () { return idkitCore.secureDocumentLegacy; }
 });
-Object.defineProperty(exports, "selfieCheck", {
+Object.defineProperty(exports, "selfieCheckLegacy", {
   enumerable: true,
-  get: function () { return idkitCore.selfieCheck; }
+  get: function () { return idkitCore.selfieCheckLegacy; }
 });
 Object.defineProperty(exports, "signRequest", {
   enumerable: true,