@prosopo/procaptcha-pow 2.8.27 → 2.9.4

package/src/components/ProcaptchaWidget.tsx

@@ -0,0 +1,164 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { loadI18next, useTranslation } from "@prosopo/locale";
+import { buildUpdateState, useProcaptcha } from "@prosopo/procaptcha-common";
+import { Checkbox, Honeypot } from "@prosopo/procaptcha-common";
+import { ModeEnum, type ProcaptchaProps } from "@prosopo/types";
+import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
+import { useEffect, useRef, useState } from "react";
+import { Manager } from "../services/Manager.js";
+
+// Define the same event name as in the bundle for consistency
+const PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
+
+const Procaptcha = (props: ProcaptchaProps) => {
+	const { t, ready: isTranslationReady } = useTranslation();
+	const config = props.config;
+	const i18n = props.i18n;
+	const theme = "light" === config.theme ? lightTheme : darkTheme;
+	const frictionlessState = props.frictionlessState; // Set up Session ID and Provider if they exist
+	const callbacks = props.callbacks || {};
+	const [state, _updateState] = useProcaptcha(useState, useRef);
+	const [loading, setLoading] = useState(false);
+	// get the state update mechanism
+	const updateState = buildUpdateState(state, _updateState);
+	const hpRef = useRef<HTMLInputElement>(null);
+	const manager = useRef(
+		Manager(
+			config,
+			state,
+			updateState,
+			callbacks,
+			frictionlessState,
+			props.onEscalate,
+			() => hpRef.current?.value || undefined,
+		),
+	);
+
+	useEffect(() => {
+		if (config.language) {
+			if (i18n) {
+				if (i18n.language !== config.language) {
+					i18n.changeLanguage(config.language).then((r) => r);
+				}
+			} else {
+				loadI18next(false).then((i18n) => {
+					if (i18n.language !== config.language)
+						i18n.changeLanguage(config.language).then((r) => r);
+				});
+			}
+		}
+	}, [i18n, config.language]);
+
+	useEffect(() => {
+		if (state.error) {
+			setLoading(false);
+			if (state.error.key === "CAPTCHA.NO_SESSION_FOUND" && frictionlessState) {
+				setTimeout(() => {
+					frictionlessState.restart();
+				}, 100);
+			}
+		}
+	}, [state.error, frictionlessState]);
+
+	// Add event listener for the execute event (works for invisible mode)
+	useEffect(() => {
+		// Only set up event listener if in invisible mode
+		if (config.mode === ModeEnum.invisible) {
+			// Event handler for when execute() is called
+			const handleExecuteEvent = (event: Event) => {
+				// Directly start the verification process without showing any UI
+				try {
+					// Start the PoW verification process
+					manager.current.start();
+				} catch (error) {
+					console.error("Error starting PoW verification:", error);
+				}
+			};
+
+			document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
+
+			// Cleanup function to remove event listener
+			return () => {
+				document.removeEventListener(
+					PROCAPTCHA_EXECUTE_EVENT,
+					handleExecuteEvent,
+				);
+			};
+		}
+
+		// Return empty cleanup function when not in invisible mode
+		return () => {};
+	}, [config.mode]);
+
+	const honeypot = frictionlessState?.hp ? (
+		<Honeypot ref={hpRef} encodedQuestion={frictionlessState.hp} />
+	) : null;
+
+	if (config.mode === ModeEnum.invisible) {
+		// Invisible mode renders no checkbox, but we still render the honeypot
+		// so bots that scan the DOM for inputs find a tempting target.
+		return honeypot;
+	}
+
+	return (
+		<>
+			{honeypot}
+			<Checkbox
+				checked={state.isHuman}
+				theme={theme}
+				onChange={async (event: React.MouseEvent | React.TouchEvent) => {
+					if (loading) {
+						return;
+					}
+					setLoading(true);
+
+					// Capture click coordinates
+					let x = 0;
+					let y = 0;
+
+					// Try to get coordinates from the change event's underlying mouse event
+					// The original mouse event might be available in the event chain
+					const mouseOrTouchEvent = event.nativeEvent;
+					if (!mouseOrTouchEvent.isTrusted) {
+						// Don't capture coordinates for non-trusted events
+					} else if (
+						"touches" in mouseOrTouchEvent &&
+						mouseOrTouchEvent.touches.length > 0 &&
+						mouseOrTouchEvent.touches[0]
+					) {
+						x = mouseOrTouchEvent.touches[0].clientX;
+						y = mouseOrTouchEvent.touches[0].clientY;
+					} else if (
+						"clientX" in mouseOrTouchEvent &&
+						"clientY" in mouseOrTouchEvent
+					) {
+						x = mouseOrTouchEvent.clientX;
+						y = mouseOrTouchEvent.clientY;
+					}
+
+					await manager.current.start(x, y);
+					setLoading(false);
+				}}
+				labelText={isTranslationReady ? t("WIDGET.I_AM_HUMAN") : ""}
+				error={state.error?.message}
+				aria-label="human checkbox"
+				loading={loading}
+			/>
+		</>
+	);
+};
+
+export default Procaptcha;

package/src/index.ts

@@ -0,0 +1,15 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from "./components/ProcaptchaWidget.js";
+export * from "./components/ProcaptchaPoW.js";

package/src/services/Manager.ts

@@ -0,0 +1,390 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { stringToHex } from "@polkadot/util/string";
+import { ProviderApi } from "@prosopo/api";
+import { ProsopoEnvError } from "@prosopo/common";
+import {
+	ExtensionLoader,
+	buildUpdateState,
+	getProcaptchaRandomActiveProvider,
+	providerRetry,
+} from "@prosopo/procaptcha-common";
+import { getDefaultEvents } from "@prosopo/procaptcha-common";
+import {
+	type Account,
+	ApiParams,
+	CaptchaType,
+	type FrictionlessState,
+	type ProcaptchaCallbacks,
+	type ProcaptchaClientConfigInput,
+	ProcaptchaConfigSchema,
+	type ProcaptchaEscalationHandler,
+	type ProcaptchaState,
+	type ProcaptchaStateUpdateFn,
+	encodeProcaptchaOutput,
+} from "@prosopo/types";
+import { embedData, sleep } from "@prosopo/util";
+import { solvePoW } from "@prosopo/util";
+import { randomAsHex } from "@prosopo/util-crypto";
+
+export const Manager = (
+	configInput: ProcaptchaClientConfigInput,
+	state: ProcaptchaState,
+	onStateUpdate: ProcaptchaStateUpdateFn,
+	callbacks: ProcaptchaCallbacks,
+	frictionlessState?: FrictionlessState,
+	onEscalate?: ProcaptchaEscalationHandler,
+	// Reads the live honeypot input value at submit time. Returns undefined
+	// when the input doesn't exist (honeypot disabled) or hasn't been filled.
+	// Bots that auto-fill text inputs populate it; humans never see it.
+	getHoneypotValue?: () => string | undefined,
+) => {
+	const events = getDefaultEvents(callbacks);
+
+	const defaultState = (): Partial<ProcaptchaState> => {
+		return {
+			// note order matters! see buildUpdateState. These fields are set in order, so disable modal first, then set loading to false, etc.
+			showModal: false,
+			loading: false,
+			index: 0,
+			challenge: undefined,
+			solutions: undefined,
+			isHuman: false,
+			captchaApi: undefined,
+			account: undefined,
+			// don't handle timeout here, this should be handled by the state management
+		};
+	};
+
+	const clearTimeout = () => {
+		// clear the timeout
+		window.clearTimeout(Number(state.timeout));
+		// then clear the timeout from the state
+		updateState({ timeout: undefined });
+	};
+
+	const onFailed = () => {
+		updateState({
+			isHuman: false,
+			loading: false,
+		});
+		events.onFailed();
+		resetState(frictionlessState?.restart);
+	};
+
+	const clearSuccessfulChallengeTimeout = () => {
+		// clear the timeout
+		window.clearTimeout(Number(state.successfullChallengeTimeout));
+		// then clear the timeout from the state
+		updateState({ successfullChallengeTimeout: undefined });
+	};
+
+	const getConfig = () => {
+		const config: ProcaptchaClientConfigInput = {
+			userAccountAddress: configInput.userAccountAddress || "",
+			...configInput,
+		};
+
+		// overwrite the account in use with the one in state if it exists. Reduces likelihood of bugs where the user
+		// changes account in the middle of the captcha process.
+		if (state.account) {
+			config.userAccountAddress = state.account.account.address;
+		}
+
+		return ProcaptchaConfigSchema.parse(config);
+	};
+
+	const getAccount = () => {
+		if (!state.account) {
+			throw new ProsopoEnvError("GENERAL.ACCOUNT_NOT_FOUND", {
+				context: { error: "Account not loaded" },
+			});
+		}
+		const account: Account = state.account;
+		return { account };
+	};
+
+	const getDappAccount = () => {
+		if (!state.dappAccount) {
+			throw new ProsopoEnvError("GENERAL.SITE_KEY_MISSING");
+		}
+
+		const dappAccount: string = state.dappAccount;
+		return dappAccount;
+	};
+
+	// get the state update mechanism
+	const updateState = buildUpdateState(state, onStateUpdate);
+
+	const resetState = (frictionlessRestart?: () => void) => {
+		// clear timeout just in case a timer is still active (shouldn't be)
+		clearTimeout();
+		clearSuccessfulChallengeTimeout();
+		updateState(defaultState());
+		events.onReset();
+		// reset the frictionless state if necessary
+		if (frictionlessRestart) {
+			frictionlessRestart();
+		}
+	};
+
+	const setValidChallengeTimeout = () => {
+		const timeMillis: number = getConfig().captchas.pow.solutionTimeout;
+		const successfullChallengeTimeout = setTimeout(() => {
+			// Human state expired, disallow user's claim to be human
+			updateState({ isHuman: false });
+
+			events.onExpired();
+			resetState(frictionlessState?.restart);
+		}, timeMillis);
+
+		updateState({ successfullChallengeTimeout });
+	};
+
+	const start = async (x = 0, y = 0) => {
+		await providerRetry(
+			async () => {
+				if (state.loading) {
+					return;
+				}
+				if (state.isHuman) {
+					return;
+				}
+
+				// reset the state to defaults - do not reset the frictionless state
+				resetState();
+
+				// set the loading flag to true (allow UI to show some sort of loading / pending indicator while we get the captcha process going)
+				updateState({
+					loading: true,
+				});
+				updateState({ attemptCount: state.attemptCount + 1 });
+
+				const config = getConfig();
+
+				// check if account exists in extension
+				const selectAccount = async () => {
+					if (frictionlessState) {
+						return frictionlessState.userAccount;
+					}
+					const ext = new (await ExtensionLoader(config.web2))();
+					return ext.getAccount(config);
+				};
+
+				// use the passed in account (could be web3) or create a new account
+				const user = await selectAccount();
+				const userAccount = user.account.address;
+
+				// set the account created or injected by the extension
+				updateState({
+					account: { account: { address: userAccount } },
+				});
+
+				// snapshot the config into the state
+				updateState({ dappAccount: config.account.address });
+
+				// allow UI to catch up with the loading state
+				await sleep(100);
+
+				// check if account has been provided in config (doesn't matter in web2 mode)
+				if (!config.web2 && !config.userAccountAddress) {
+					throw new ProsopoEnvError("GENERAL.ACCOUNT_NOT_FOUND", {
+						context: {
+							error: "Account address has not been set for web3 mode",
+						},
+					});
+				}
+
+				let getRandomProviderResponse = undefined;
+
+				if (frictionlessState?.provider) {
+					getRandomProviderResponse = frictionlessState.provider;
+				} else {
+					getRandomProviderResponse = await getProcaptchaRandomActiveProvider(
+						getConfig().defaultEnvironment,
+					);
+				}
+
+				const providerUrl = getRandomProviderResponse.provider.url;
+
+				const providerApi = new ProviderApi(providerUrl, getDappAccount());
+
+				// Non-blocking check (timeoutMs=0): only attach SIMD readings if
+				// the benchmark prefetched by the catcher has already resolved.
+				// We want this signal as early as possible — first request that
+				// has it wins; later attach points (submission) are backups.
+				const simdReadingsOnChallenge = frictionlessState?.getSimdReadings
+					? await frictionlessState.getSimdReadings(0)
+					: undefined;
+				const challenge = await providerApi.getPowCaptchaChallenge(
+					userAccount,
+					getDappAccount(),
+					frictionlessState?.sessionId,
+					simdReadingsOnChallenge,
+				);
+
+				if (challenge.error) {
+					updateState({
+						loading: false,
+						error: {
+							message: challenge.error.message,
+							key: challenge.error.key || "API.UNKNOWN_ERROR",
+						},
+					});
+				} else {
+					const solution = await solvePoW(
+						challenge.challenge,
+						challenge.difficulty,
+					);
+
+					// Create salt with encoded coordinates if coordinates are provided
+					let salt: string | undefined;
+					if (x !== undefined && y !== undefined) {
+						const coords = [x, y];
+						const randomSalt = randomAsHex(
+							coords
+								.map((coord) => coord.toString(16).length + 4)
+								.reduce((acc, curr) => acc + curr, 0),
+						);
+						salt = embedData(randomSalt, coords);
+					}
+
+					const signer = user.extension?.signer;
+
+					if (!signer || !signer.signRaw) {
+						throw new ProsopoEnvError("GENERAL.CANT_FIND_KEYRINGPAIR", {
+							context: {
+								error:
+									"Signer is not defined, cannot sign message to prove account ownership",
+							},
+						});
+					}
+
+					const userTimestampSignature = await signer.signRaw({
+						address: userAccount,
+						data: stringToHex(challenge[ApiParams.timestamp].toString()),
+						type: "bytes",
+					});
+
+					let encryptedBehavioralData: string | undefined;
+
+					// Collect and encrypt behavioral data before submission
+					if (
+						frictionlessState?.encryptBehavioralData &&
+						(frictionlessState?.behaviorCollector1 ||
+							frictionlessState?.behaviorCollector2 ||
+							frictionlessState?.behaviorCollector3)
+					) {
+						try {
+							const behavioralData = {
+								collector1:
+									frictionlessState.behaviorCollector1?.getData() || [],
+								collector2:
+									frictionlessState.behaviorCollector2?.getData() || [],
+								collector3:
+									frictionlessState.behaviorCollector3?.getData() || [],
+								deviceCapability:
+									frictionlessState.deviceCapability || "unknown",
+							};
+
+							// Pack the behavioral data before stringifying
+							const dataToEncrypt = frictionlessState.packBehavioralData
+								? frictionlessState.packBehavioralData(behavioralData)
+								: behavioralData;
+
+							encryptedBehavioralData =
+								await frictionlessState.encryptBehavioralData(
+									JSON.stringify(dataToEncrypt),
+								);
+						} catch {
+							// Silently ignore behavioral data errors - captcha should still work
+						}
+					}
+
+					const simdReadings = frictionlessState?.getSimdReadings
+						? await frictionlessState.getSimdReadings()
+						: undefined;
+					const hpValue = getHoneypotValue?.();
+					const clientMetaData = hpValue ? { hp: hpValue } : undefined;
+					const verifiedSolution = await providerApi.submitPowCaptchaSolution(
+						challenge,
+						getAccount().account.account.address,
+						getDappAccount(),
+						solution,
+						userTimestampSignature.signature.toString(),
+						config.captchas.pow.verifiedTimeout,
+						encryptedBehavioralData,
+						salt,
+						simdReadings,
+						clientMetaData,
+					);
+					const escalation = verifiedSolution[ApiParams.escalation];
+					if (
+						escalation &&
+						(escalation[ApiParams.captchaType] === CaptchaType.image ||
+							escalation[ApiParams.captchaType] === CaptchaType.puzzle)
+					) {
+						// Provider accepted the PoW but wants the user to complete a
+						// follow-up image/puzzle challenge. Hand off to the wrapper —
+						// don't fire onHuman or onFailed; the wrapper mounts the next
+						// widget and the standard success/failure path resumes there.
+						updateState({ loading: false });
+						onEscalate?.(
+							escalation[ApiParams.captchaType],
+							escalation[ApiParams.sessionId],
+						);
+					} else if (verifiedSolution[ApiParams.verified]) {
+						updateState({
+							isHuman: true,
+							loading: false,
+						});
+
+						events.onHuman(
+							encodeProcaptchaOutput({
+								[ApiParams.providerUrl]: providerUrl,
+								[ApiParams.user]: getAccount().account.account.address,
+								[ApiParams.dapp]: getDappAccount(),
+								[ApiParams.challenge]: challenge.challenge,
+								[ApiParams.nonce]: solution,
+								[ApiParams.timestamp]: challenge.timestamp,
+								[ApiParams.signature]: {
+									[ApiParams.provider]: challenge.signature.provider,
+									[ApiParams.user]: {
+										[ApiParams.timestamp]:
+											userTimestampSignature.signature.toString(),
+									},
+								},
+							}),
+						);
+						setValidChallengeTimeout();
+					} else {
+						onFailed();
+					}
+				}
+			},
+			start,
+			() => {
+				resetState();
+			},
+			state.attemptCount,
+			3,
+		);
+	};
+
+	return {
+		start,
+		resetState,
+	};
+};

package/tsconfig.cjs.json

@@ -0,0 +1,44 @@
+{
+	"extends": "../../tsconfig.cjs.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist/cjs",
+		"lib": ["es6", "dom"],
+		"jsxImportSource": "@emotion/react"
+	},
+	"include": [
+		"./src/**/*.ts",
+		"./src/**/*.json",
+		"./src/**/*.d.ts",
+		"./src/**/*.tsx"
+	],
+	"references": [
+		{
+			"path": "../../dev/config/tsconfig.cjs.json"
+		},
+		{
+			"path": "../api/tsconfig.cjs.json"
+		},
+		{
+			"path": "../common/tsconfig.cjs.json"
+		},
+		{
+			"path": "../locale/tsconfig.cjs.json"
+		},
+		{
+			"path": "../procaptcha-common/tsconfig.cjs.json"
+		},
+		{
+			"path": "../types/tsconfig.cjs.json"
+		},
+		{
+			"path": "../util/tsconfig.cjs.json"
+		},
+		{
+			"path": "../util-crypto/tsconfig.cjs.json"
+		},
+		{
+			"path": "../widget-skeleton/tsconfig.cjs.json"
+		}
+	]
+}

package/tsconfig.json

@@ -0,0 +1,45 @@
+{
+	"extends": "../../tsconfig.esm.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist",
+		"lib": ["es6", "dom"],
+		"jsxImportSource": "@emotion/react"
+	},
+	"include": [
+		"src",
+		"src/**/*.json",
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/**/*.d.ts"
+	],
+	"references": [
+		{
+			"path": "../../dev/config/tsconfig.json"
+		},
+		{
+			"path": "../api"
+		},
+		{
+			"path": "../common"
+		},
+		{
+			"path": "../locale"
+		},
+		{
+			"path": "../procaptcha-common"
+		},
+		{
+			"path": "../types"
+		},
+		{
+			"path": "../util"
+		},
+		{
+			"path": "../util-crypto"
+		},
+		{
+			"path": "../widget-skeleton"
+		}
+	]
+}