@worldcoin/idkit 2.1.0 → 2.2.1

package/build/index.d.cts

@@ -0,0 +1,56 @@
+import { C as Config, W as WidgetProps } from './config-BRFx4nLT.cjs';
+import * as react from 'react';
+export { solidityEncode } from '@worldcoin/idkit-core/hashing';
+export { IVerifyResponse, verifyCloudProof } from '@worldcoin/idkit-core/backend';
+import { IDKitConfig, VerificationState, ISuccessResult, AppErrorCodes } from '@worldcoin/idkit-core';
+export { IErrorState, ISuccessResult, VerificationLevel, VerificationState } from '@worldcoin/idkit-core';
+
+type HookConfig = Partial<Pick<Config, 'handleVerify' | 'onSuccess'>>;
+declare const useIDKit: ({ handleVerify, onSuccess }?: HookConfig) => {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+
+declare const _default: react.NamedExoticComponent<WidgetProps>;
+
+type UseSessionConfig = IDKitConfig;
+type UseSessionResult = {
+    /** The current verification state */
+    status: VerificationState;
+    /** The QR code URI that users can scan to verify */
+    sessionURI: string | null;
+    /** The verification result if successful */
+    result: ISuccessResult | null;
+    /** Error code if verification failed */
+    errorCode: AppErrorCodes | null;
+    /** Function to reset the session and start over */
+    reset: () => void;
+};
+/**
+ * A beginner-friendly React hook for World ID verification sessions.
+ *
+ * This hook automatically:
+ * - Creates a verification session
+ * - Generates a QR code URI for scanning
+ * - Polls for verification updates
+ * - Stops polling when verification completes or fails
+ *
+ * @param config - The World ID configuration object
+ * @returns Session state and controls
+ *
+ * @example
+ * ```tsx
+ * const { status, sessionURI, result, errorCode } = useSession({
+ *   app_id: 'app_staging_12345',
+ *   action: 'login',
+ *   signal: 'user_123'
+ * })
+ *
+ * if (status === VerificationState.WaitingForConnection) {
+ *   return <QRCodeSVG value={sessionURI} />
+ * }
+ * ```
+ */
+declare function useSession(config: UseSessionConfig): UseSessionResult;
+
+export { Config, _default as IDKitWidget, type UseSessionConfig, type UseSessionResult, WidgetProps, useIDKit, useSession };

package/build/index.d.ts

@@ -1,9 +1,9 @@
-import { C as Config } from './config-BRFx4nLT.js';
-export { W as WidgetProps } from './config-BRFx4nLT.js';
+import { C as Config, W as WidgetProps } from './config-BRFx4nLT.js';
 import * as react from 'react';
-export { IErrorState, ISuccessResult, VerificationLevel } from '@worldcoin/idkit-core';
 export { solidityEncode } from '@worldcoin/idkit-core/hashing';
 export { IVerifyResponse, verifyCloudProof } from '@worldcoin/idkit-core/backend';
+import { IDKitConfig, VerificationState, ISuccessResult, AppErrorCodes } from '@worldcoin/idkit-core';
+export { IErrorState, ISuccessResult, VerificationLevel, VerificationState } from '@worldcoin/idkit-core';
 
 type HookConfig = Partial<Pick<Config, 'handleVerify' | 'onSuccess'>>;
 declare const useIDKit: ({ handleVerify, onSuccess }?: HookConfig) => {
@@ -11,6 +11,46 @@ declare const useIDKit: ({ handleVerify, onSuccess }?: HookConfig) => {
     setOpen: (open: boolean) => void;
 };
 
-declare const _default: react.NamedExoticComponent<any>;
+declare const _default: react.NamedExoticComponent<WidgetProps>;
 
-export { Config, _default as IDKitWidget, useIDKit };
+type UseSessionConfig = IDKitConfig;
+type UseSessionResult = {
+    /** The current verification state */
+    status: VerificationState;
+    /** The QR code URI that users can scan to verify */
+    sessionURI: string | null;
+    /** The verification result if successful */
+    result: ISuccessResult | null;
+    /** Error code if verification failed */
+    errorCode: AppErrorCodes | null;
+    /** Function to reset the session and start over */
+    reset: () => void;
+};
+/**
+ * A beginner-friendly React hook for World ID verification sessions.
+ *
+ * This hook automatically:
+ * - Creates a verification session
+ * - Generates a QR code URI for scanning
+ * - Polls for verification updates
+ * - Stops polling when verification completes or fails
+ *
+ * @param config - The World ID configuration object
+ * @returns Session state and controls
+ *
+ * @example
+ * ```tsx
+ * const { status, sessionURI, result, errorCode } = useSession({
+ *   app_id: 'app_staging_12345',
+ *   action: 'login',
+ *   signal: 'user_123'
+ * })
+ *
+ * if (status === VerificationState.WaitingForConnection) {
+ *   return <QRCodeSVG value={sessionURI} />
+ * }
+ * ```
+ */
+declare function useSession(config: UseSessionConfig): UseSessionResult;
+
+export { Config, _default as IDKitWidget, type UseSessionConfig, type UseSessionResult, WidgetProps, useIDKit, useSession };

package/build/index.js

@@ -2026,13 +2026,56 @@ var BaseWidget_default = IDKitWidget;
 var IDKitWidget_default = memo(BaseWidget_default);
 
 // src/index.ts
-import { VerificationLevel as VerificationLevel2 } from "@worldcoin/idkit-core";
 import { solidityEncode } from "@worldcoin/idkit-core/hashing";
 import { verifyCloudProof } from "@worldcoin/idkit-core/backend";
+import { VerificationLevel as VerificationLevel2, VerificationState as VerificationState3 } from "@worldcoin/idkit-core";
+
+// src/hooks/useSession.ts
+import { useEffect as useEffect6 } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { VerificationState as VerificationState2 } from "@worldcoin/idkit-core";
+import { useWorldBridgeStore as useWorldBridgeStore2 } from "@worldcoin/idkit-core";
+var TERMINAL_STATES = [VerificationState2.Confirmed, VerificationState2.Failed];
+function useSession(config) {
+  const { reset, result, connectorURI, createClient, pollForUpdates, verificationState, errorCode } = useWorldBridgeStore2(
+    useShallow((state) => ({
+      reset: state.reset,
+      result: state.result,
+      connectorURI: state.connectorURI,
+      createClient: state.createClient,
+      pollForUpdates: state.pollForUpdates,
+      verificationState: state.verificationState,
+      errorCode: state.errorCode
+    }))
+  );
+  useEffect6(() => {
+    if (verificationState === VerificationState2.PreparingClient && !connectorURI) {
+      void createClient(config);
+    }
+  }, [verificationState, connectorURI, createClient, config]);
+  useEffect6(() => {
+    if (TERMINAL_STATES.includes(verificationState)) return;
+    const interval = setInterval(() => {
+      void pollForUpdates();
+    }, 3e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [verificationState, pollForUpdates]);
+  return {
+    status: verificationState,
+    sessionURI: connectorURI,
+    result,
+    errorCode,
+    reset
+  };
+}
 export {
   IDKitWidget_default as IDKitWidget,
   VerificationLevel2 as VerificationLevel,
+  VerificationState3 as VerificationState,
   solidityEncode,
   useIDKit_default as useIDKit,
+  useSession,
   verifyCloudProof
 };

package/build/internal.cjs

@@ -0,0 +1,269 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/internal.ts
+var internal_exports = {};
+__export(internal_exports, {
+  ConfigSource: () => ConfigSource,
+  QRCode: () => QRCode_default,
+  __: () => __,
+  useIDKitStore: () => idkit_default
+});
+module.exports = __toCommonJS(internal_exports);
+
+// src/lang/index.ts
+var translations = {};
+var getLang = () => {
+  if (!navigator?.languages) return;
+  const supportedLang = navigator.languages.find((l) => translations[l] != void 0) ?? "";
+  return translations[supportedLang];
+};
+var replaceParams = (str, params) => {
+  let replaced = str;
+  for (const [key, value] of Object.entries(params ?? {})) replaced = str.replace(`:${key}`, value);
+  return replaced;
+};
+function __(str, params) {
+  if (typeof navigator === "undefined") return str;
+  return replaceParams(getLang()?.[str] ?? str, params);
+}
+
+// src/components/QRCode.tsx
+var import_react = require("react");
+var import_qrcode = __toESM(require("qrcode/lib/core/qrcode.js"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var generateMatrix = (data) => {
+  const arr = import_qrcode.default.create(data, { errorCorrectionLevel: "M" }).modules.data;
+  const sqrt = Math.sqrt(arr.length);
+  return arr.reduce(
+    (rows, key, index) => {
+      if (index % sqrt === 0) rows.push([key]);
+      else rows[rows.length - 1].push(key);
+      return rows;
+    },
+    []
+  );
+};
+var Qrcode = ({ data, size = 300 }) => {
+  const dots = (0, import_react.useMemo)(() => {
+    const dots2 = [];
+    const matrix = generateMatrix(data);
+    const cellSize = size / matrix.length;
+    const qrList = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 0, y: 1 }
+    ];
+    qrList.forEach(({ x, y }) => {
+      const x1 = (matrix.length - 7) * cellSize * x;
+      const y1 = (matrix.length - 7) * cellSize * y;
+      for (let i = 0; i < 3; i++) {
+        dots2.push(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "rect",
+            {
+              fill: "currentColor",
+              x: x1 + cellSize * i,
+              y: y1 + cellSize * i,
+              width: cellSize * (7 - i * 2),
+              height: cellSize * (7 - i * 2),
+              rx: (i - 2) * -5,
+              ry: (i - 2) * -5,
+              className: i % 3 === 0 ? "text-black" : i % 3 === 1 ? "text-white" : "text-black"
+            },
+            `${i}-${x}-${y}`
+          )
+        );
+      }
+    });
+    matrix.forEach((row, i) => {
+      row.forEach((_, j) => {
+        if (!matrix[i][j]) return;
+        if (i < 7 && j < 7 || i > matrix.length - 8 && j < 7 || i < 7 && j > matrix.length - 8) return;
+        dots2.push(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "circle",
+            {
+              fill: "currentColor",
+              r: cellSize / 3,
+              cx: i * cellSize + cellSize / 2,
+              cy: j * cellSize + cellSize / 2,
+              className: "text-black dark:text-white"
+            },
+            `circle-${i}-${j}`
+          )
+        );
+      });
+    });
+    return dots2;
+  }, [size, data]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { height: size, width: size, "data-test-id": "qr-code", children: dots });
+};
+var QRCode_default = (0, import_react.memo)(Qrcode);
+
+// src/store/idkit.ts
+var import_shallow = require("zustand/shallow");
+var import_traditional = require("zustand/traditional");
+var import_idkit_core = require("@worldcoin/idkit-core");
+var SELF_HOSTED_APP_ID = "self_hosted";
+var useIDKitStore = (0, import_traditional.createWithEqualityFn)()(
+  (set, get) => ({
+    app_id: "",
+    signal: "",
+    action: "",
+    action_description: "",
+    bridge_url: "",
+    verification_level: import_idkit_core.DEFAULT_VERIFICATION_LEVEL,
+    partner: false,
+    open: false,
+    result: null,
+    errorTitle: "",
+    errorDetail: "",
+    autoClose: true,
+    errorState: null,
+    processing: false,
+    errorCallbacks: {},
+    verifyCallbacks: {},
+    successCallbacks: {},
+    stage: "WORLD_ID" /* WORLD_ID */,
+    setStage: (stage) => set({ stage }),
+    setErrorState: (errorState) => set({ errorState }),
+    setProcessing: (processing) => set({ processing }),
+    retryFlow: () => {
+      set({ stage: "WORLD_ID" /* WORLD_ID */, errorState: null });
+    },
+    addErrorCallback: (cb, source) => {
+      set((state) => {
+        state.errorCallbacks[source] = cb;
+        return state;
+      });
+    },
+    addSuccessCallback: (cb, source) => {
+      set((state) => {
+        state.successCallbacks[source] = cb;
+        return state;
+      });
+    },
+    addVerificationCallback: (cb, source) => {
+      set((state) => {
+        state.verifyCallbacks[source] = cb;
+        return state;
+      });
+    },
+    setOptions: ({
+      handleVerify,
+      onSuccess,
+      signal,
+      action,
+      app_id,
+      partner,
+      onError,
+      verification_level,
+      action_description,
+      bridge_url,
+      autoClose,
+      advanced
+    }, source) => {
+      set({
+        signal,
+        action,
+        bridge_url,
+        action_description,
+        autoClose: autoClose ?? true,
+        app_id: advanced?.self_hosted ? SELF_HOSTED_APP_ID : app_id,
+        verification_level: verification_level ?? import_idkit_core.DEFAULT_VERIFICATION_LEVEL,
+        partner
+      });
+      get().addSuccessCallback(onSuccess, source);
+      if (onError) get().addErrorCallback(onError, source);
+      if (handleVerify) get().addVerificationCallback(handleVerify, source);
+    },
+    handleVerify: (result) => {
+      set({ stage: "HOST_APP_VERIFICATION" /* HOST_APP_VERIFICATION */, processing: false });
+      Promise.all(Object.values(get().verifyCallbacks).map(async (cb) => cb?.(result))).then(
+        () => {
+          set({ stage: "SUCCESS" /* SUCCESS */, result });
+          if (get().autoClose) setTimeout(() => get().onOpenChange(false), 2500);
+        },
+        (response) => {
+          let errorMessage = void 0;
+          if (response && typeof response === "object" && response.message) {
+            errorMessage = response.message;
+          }
+          set({
+            stage: "ERROR" /* ERROR */,
+            errorState: {
+              code: import_idkit_core.AppErrorCodes.FailedByHostApp,
+              message: errorMessage ? __(errorMessage) : void 0
+            }
+          });
+        }
+      );
+    },
+    onOpenChange: (open) => {
+      if (open) {
+        return set({ open });
+      }
+      const errorState = get().errorState;
+      if (get().stage === "ERROR" /* ERROR */ && errorState) {
+        const callbacks = get().errorCallbacks;
+        requestAnimationFrame(() => Object.values(callbacks).forEach((cb) => void cb?.(errorState)));
+      }
+      const result = get().result;
+      if (get().stage == "SUCCESS" /* SUCCESS */ && result) {
+        const callbacks = get().successCallbacks;
+        requestAnimationFrame(() => Object.values(callbacks).forEach((cb) => void cb?.(result)));
+      }
+      set({
+        open,
+        result: null,
+        errorState: null,
+        processing: false,
+        stage: "WORLD_ID" /* WORLD_ID */
+      });
+    }
+  }),
+  import_shallow.shallow
+);
+var idkit_default = useIDKitStore;
+
+// src/types/config.ts
+var ConfigSource = /* @__PURE__ */ ((ConfigSource2) => {
+  ConfigSource2["HOOK"] = "hook";
+  ConfigSource2["PROPS"] = "props";
+  ConfigSource2["MANUAL"] = "manual";
+  return ConfigSource2;
+})(ConfigSource || {});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfigSource,
+  QRCode,
+  __,
+  useIDKitStore
+});

package/build/internal.d.cts

@@ -0,0 +1,53 @@
+import * as react from 'react';
+import * as zustand_traditional from 'zustand/traditional';
+import * as zustand_vanilla from 'zustand/vanilla';
+import { I as IDKITStage, a as ConfigSource, b as CallbackFn, C as Config } from './config-BRFx4nLT.cjs';
+import { IDKitConfig, ISuccessResult, IErrorState } from '@worldcoin/idkit-core';
+
+type CleanWord<T> = T extends `${string}${' ' | ',' | '!' | '?' | '.' | '`'}${string}` ? never : T extends '' ? never : T;
+type ExtractPlaceholders<S extends string> = S extends `${string}:${infer Placeholder}` ? Placeholder extends `${infer Word}${' ' | ',' | '!' | '?' | '.' | '`'}${infer Rest}` ? CleanWord<Word> | ExtractPlaceholders<Rest> : never : never;
+type NoPlaceholder<S extends string> = S extends `${string}:${string}` ? never : S;
+type PlaceholderValues<S extends string> = {
+    [K in ExtractPlaceholders<S>]: string;
+};
+declare function __<S extends `${string}:${string}`>(str: S, params: PlaceholderValues<S>): string;
+declare function __<S extends string>(str: NoPlaceholder<S>): string;
+
+type Props = {
+    data: string;
+    size?: number;
+};
+declare const _default: react.MemoExoticComponent<({ data, size }: Props) => JSX.Element>;
+
+declare const SELF_HOSTED_APP_ID = "self_hosted";
+type IDKitStore = {
+    app_id: IDKitConfig['app_id'] | typeof SELF_HOSTED_APP_ID | '';
+    action: IDKitConfig['action'];
+    signal: IDKitConfig['signal'];
+    bridge_url?: IDKitConfig['bridge_url'];
+    action_description?: IDKitConfig['action_description'];
+    verification_level: NonNullable<IDKitConfig['verification_level']>;
+    partner?: IDKitConfig['partner'];
+    open: boolean;
+    stage: IDKITStage;
+    autoClose: boolean;
+    processing: boolean;
+    result: ISuccessResult | null;
+    errorState: IErrorState | null;
+    errorCallbacks: Record<ConfigSource, CallbackFn<IErrorState> | undefined> | Record<string, never>;
+    verifyCallbacks: Record<ConfigSource, CallbackFn<ISuccessResult> | undefined> | Record<string, never>;
+    successCallbacks: Record<ConfigSource, CallbackFn<ISuccessResult> | undefined> | Record<string, never>;
+    retryFlow: () => void;
+    setStage: (stage: IDKITStage) => void;
+    onOpenChange: (open: boolean) => void;
+    setProcessing: (processing: boolean) => void;
+    handleVerify: (result: ISuccessResult) => void;
+    setErrorState: (state: IErrorState | null) => void;
+    setOptions: (options: Config, source: ConfigSource) => void;
+    addErrorCallback: (cb: CallbackFn<IErrorState>, source: ConfigSource) => void;
+    addSuccessCallback: (cb: CallbackFn<ISuccessResult>, source: ConfigSource) => void;
+    addVerificationCallback: (cb: CallbackFn<ISuccessResult>, source: ConfigSource) => void;
+};
+declare const useIDKitStore: zustand_traditional.UseBoundStoreWithEqualityFn<zustand_vanilla.StoreApi<IDKitStore>>;
+
+export { ConfigSource, _default as QRCode, __, useIDKitStore };

package/package.json

@@ -43,12 +43,24 @@
   },
   "exports": {
     ".": {
-      "import": "./build/index.js",
-      "types": "./build/index.d.ts"
+      "import": {
+        "types": "./build/index.d.ts",
+        "default": "./build/index.js"
+      },
+      "require": {
+        "types": "./build/index.d.cts",
+        "default": "./build/index.cjs"
+      }
     },
     "./internal": {
-      "import": "./build/internal.js",
-      "types": "./build/internal.d.ts"
+      "import": {
+        "types": "./build/internal.d.ts",
+        "default": "./build/internal.js"
+      },
+      "require": {
+        "types": "./build/internal.d.cts",
+        "default": "./build/internal.cjs"
+      }
     }
   },
   "files": [
@@ -92,7 +104,7 @@
       ]
     }
   },
-  "version": "2.1.0",
+  "version": "2.2.1",
   "scripts": {
     "build": "npm run build:css && tsup",
     "build:css": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css --minify",

package/src/index.ts

@@ -1,11 +1,15 @@
 import useIDKit from './hooks/useIDKit'
 import IDKitWidget from '@/components/IDKitWidget/index'
 import type { WidgetProps, Config } from '@/types/config'
-import { VerificationLevel } from '@worldcoin/idkit-core'
 import { solidityEncode } from '@worldcoin/idkit-core/hashing'
 import { verifyCloudProof } from '@worldcoin/idkit-core/backend'
 import type { IVerifyResponse } from '@worldcoin/idkit-core/backend'
 import type { ISuccessResult, IErrorState } from '@worldcoin/idkit-core'
+import { VerificationLevel, VerificationState } from '@worldcoin/idkit-core'
 
-export { IDKitWidget, useIDKit, solidityEncode, verifyCloudProof, VerificationLevel }
+export { IDKitWidget, useIDKit, solidityEncode, verifyCloudProof, VerificationLevel, VerificationState }
 export type { ISuccessResult, IErrorState, IVerifyResponse, Config, WidgetProps }
+
+// Session API
+export { useSession } from '@/hooks/useSession'
+export type { UseSessionConfig, UseSessionResult } from '@/hooks/useSession'