@prosopo/procaptcha-common 2.9.23 → 2.10.18

package/src/callbacks/defaultCallbacks.ts

@@ -0,0 +1,197 @@
+// 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 {
+	ApiParams,
+	type Callbacks,
+	type ProcaptchaRenderOptions,
+	type ProcaptchaToken,
+} from "@prosopo/types";
+import { getParentForm, removeProcaptchaResponse } from "../elements/form.js";
+import { getWindowCallback } from "../elements/window.js";
+
+export const getDefaultCallbacks = (element?: Element): Callbacks => ({
+	onHuman: (token: ProcaptchaToken) => handleOnHuman(token, element),
+	onChallengeExpired: () => {
+		removeProcaptchaResponse();
+		console.log("Challenge expired");
+	},
+	onExtensionNotFound: () => {
+		console.error("Extension not found");
+	},
+	onExpired: () => {
+		removeProcaptchaResponse();
+	},
+	onError: (error: Error) => {
+		removeProcaptchaResponse();
+		console.error(error);
+	},
+	onClose: () => {
+		console.log("Challenge closed");
+	},
+	onOpen: () => {
+		console.log("Challenge opened");
+	},
+	onFailed: () => {
+		alert("Captcha challenge failed. Please try again");
+		console.log("Challenge failed");
+	},
+	onReset: () => {
+		removeProcaptchaResponse();
+		console.log("Captcha widget reset");
+	},
+	onReload: () => {
+		console.log("Challenge reloaded");
+	},
+});
+
+/**
+ * Set the a user callback function for an element. Data tags take precedence over renderOptions.
+ */
+const getUserCallback = (
+	callback: string,
+	element: Element,
+	callbackFnOrName: string | ((token: string) => void) | undefined,
+) => {
+	const callbackFnName = element.getAttribute(`data-${callback}`);
+	if (callbackFnName) {
+		const callbackFn = getWindowCallback(callbackFnName);
+		if (callbackFn) {
+			return callbackFn;
+		}
+	}
+	if (typeof callbackFnOrName === "function") {
+		return callbackFnOrName;
+	}
+	if (typeof callbackFnOrName === "string") {
+		return getWindowCallback(callbackFnOrName);
+	}
+};
+
+export function setUserCallbacks(
+	renderOptions: ProcaptchaRenderOptions | undefined,
+	callbacks: Callbacks,
+	element: Element,
+) {
+	const humanCallback = getUserCallback(
+		"callback",
+		element,
+		renderOptions?.callback,
+	);
+	if (humanCallback) {
+		// wrap the user's callback in a function that also calls handleOnHuman
+		callbacks.onHuman = (token: ProcaptchaToken) => {
+			handleOnHuman(token, element);
+			humanCallback(token);
+		};
+	}
+
+	const chalExpiredCallback = getUserCallback(
+		"chalexpired-callback",
+		element,
+		renderOptions?.["chalexpired-callback"],
+	);
+	if (chalExpiredCallback) {
+		callbacks.onChallengeExpired = () => {
+			removeProcaptchaResponse();
+			chalExpiredCallback();
+		};
+	}
+
+	const expiredCallback = getUserCallback(
+		"expired-callback",
+		element,
+		renderOptions?.["expired-callback"],
+	);
+	if (expiredCallback) {
+		callbacks.onExpired = () => {
+			removeProcaptchaResponse();
+			expiredCallback();
+		};
+	}
+
+	const errorCallback = getUserCallback(
+		"error-callback",
+		element,
+		renderOptions?.["error-callback"],
+	);
+	if (errorCallback) {
+		callbacks.onError = (error: Error) => {
+			removeProcaptchaResponse();
+			errorCallback(error);
+		};
+	}
+
+	const closeCallback = getUserCallback(
+		"close-callback",
+		element,
+		renderOptions?.["close-callback"],
+	);
+	if (closeCallback) {
+		callbacks.onClose = () => {
+			closeCallback();
+		};
+	}
+
+	const openCallback = getUserCallback(
+		"open-callback",
+		element,
+		renderOptions?.["open-callback"],
+	);
+	if (openCallback) {
+		callbacks.onOpen = () => {
+			openCallback();
+		};
+	}
+
+	const failedCallback = getUserCallback(
+		"failed-callback",
+		element,
+		renderOptions?.["failed-callback"],
+	);
+	if (failedCallback) {
+		callbacks.onFailed = () => {
+			failedCallback();
+		};
+	}
+
+	const resetCallback = getUserCallback(
+		"reset-callback",
+		element,
+		renderOptions?.["reset-callback"],
+	);
+	if (resetCallback) {
+		callbacks.onReset = () => {
+			removeProcaptchaResponse();
+			resetCallback();
+		};
+	}
+}
+
+const handleOnHuman = (token: ProcaptchaToken, element?: Element) => {
+	removeProcaptchaResponse();
+	if (element) {
+		const form = getParentForm(element);
+
+		if (!form) {
+			console.error("Parent form not found for the element:", element);
+			return;
+		}
+
+		const input = document.createElement("input");
+		input.type = "hidden";
+		input.name = ApiParams.procaptchaResponse;
+		input.value = token;
+		form.appendChild(input);
+	}
+};

package/src/callbacks/defaultEvents.ts

@@ -0,0 +1,21 @@
+// 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 type { Callbacks } from "@prosopo/types";
+import { getDefaultCallbacks } from "./defaultCallbacks.js";
+
+export const getDefaultEvents = (callbacks: Partial<Callbacks>) => ({
+	...getDefaultCallbacks(undefined),
+	...callbacks,
+});

package/src/elements/form.ts

@@ -0,0 +1,41 @@
+// 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 { ApiParams } from "@prosopo/types";
+
+type ParentForm = HTMLFormElement | null;
+
+export function getParentForm(widgetElement: Element): ParentForm {
+	const parentForm = widgetElement.closest("form") as ParentForm;
+
+	if (parentForm) {
+		return parentForm;
+	}
+
+	// fallback for widgets inside a shadow DOM
+
+	const rootWidgetNode = widgetElement.getRootNode();
+	if (rootWidgetNode instanceof ShadowRoot) {
+		return rootWidgetNode.host.closest("form") as ParentForm;
+	}
+
+	return null;
+}
+
+export const removeProcaptchaResponse = () => {
+	const element = Array.from(
+		document.getElementsByName(ApiParams.procaptchaResponse),
+	);
+	element.map((el) => el.remove());
+};

package/src/elements/window.ts

@@ -0,0 +1,39 @@
+// 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 const getWindowCallback = (callbackName: string) => {
+	// biome-ignore lint/suspicious/noExplicitAny: TODO fix any
+	const fn = (window as any)[callbackName.replace("window.", "")];
+	if (typeof fn !== "function") {
+		throw new Error(
+			`Callback ${callbackName} is not defined on the window object`,
+		);
+	}
+	return fn;
+};
+
+/**
+ * Procaptcha depends on secure-context-only browser APIs (e.g. SubtleCrypto)
+ * to run a challenge. These are unavailable when the widget is served over
+ * plain HTTP, which otherwise surfaces as a cryptic provider-selection
+ * failure. The browser already treats HTTPS and localhost as secure contexts,
+ * so this only flags genuine HTTP origins. Non-browser (SSR) environments are
+ * treated as secure since the HTTP restriction does not apply there.
+ */
+export const isSecureBrowserContext = (): boolean => {
+	if (typeof window === "undefined") {
+		return true;
+	}
+	return window.isSecureContext === true;
+};

package/src/extensionLoader.ts

@@ -0,0 +1,17 @@
+// 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 const ExtensionLoader = async (web2: boolean) =>
+	web2
+		? (await import("@prosopo/account/extension/ExtensionWeb2")).default
+		: (await import("@prosopo/account/extension/ExtensionWeb3")).default;

package/src/index.ts

@@ -0,0 +1,24 @@
+// 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 "./providers.js";
+export * from "./state/builder.js";
+export * from "./callbacks/defaultCallbacks.js";
+export * from "./callbacks/defaultEvents.js";
+export * from "./extensionLoader.js";
+export * from "./elements/window.js";
+export * from "./reactComponents/Reload.js";
+export * from "./reactComponents/Checkbox.js";
+export * from "./reactComponents/Honeypot.js";
+export * from "./reactComponents/TestModeBanner.js";

package/src/providers.ts

@@ -0,0 +1,49 @@
+// 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 { getRandomActiveProvider } from "@prosopo/load-balancer";
+import type { EnvironmentTypes } from "@prosopo/types";
+
+export const getProcaptchaRandomActiveProvider = async (
+	defaultEnvironment: EnvironmentTypes,
+) => {
+	const randomNumberU8a = window.crypto.getRandomValues(new Uint8Array(10));
+	const randomNumber = randomNumberU8a.reduce((a, b) => a + b, 0);
+	return await getRandomActiveProvider(defaultEnvironment, randomNumber);
+};
+
+export const providerRetry = async (
+	currentFn: () => Promise<void>,
+	retryFn: () => Promise<void>,
+	stateReset: () => void,
+	attemptCount: number,
+	retryMax: number,
+) => {
+	try {
+		await currentFn();
+	} catch (err) {
+		if (attemptCount >= retryMax) {
+			console.error(err);
+			console.error(
+				`Max retries (${attemptCount} of ${retryMax}) reached, aborting`,
+			);
+			return stateReset();
+		}
+		console.error(err);
+		// hit an error, disallow user's claim to be human
+		stateReset();
+		// trigger a retry to attempt a new provider until it passes
+		await retryFn();
+	}
+};

package/src/reactComponents/Checkbox.tsx

@@ -0,0 +1,203 @@
+// 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 { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import {
+	type Theme,
+	WIDGET_CHECKBOX_SPINNER_CSS_CLASS,
+} from "@prosopo/widget-skeleton";
+import {
+	type ButtonHTMLAttributes,
+	type CSSProperties,
+	type FC,
+	useMemo,
+	useState,
+} from "react";
+
+interface CheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	theme: Theme;
+	checked: boolean;
+	// biome-ignore lint/suspicious/noExplicitAny: don't know what it will be
+	onChange: (event: any) => Promise<void>;
+	labelText: string;
+	error?: string;
+	loading: boolean;
+}
+
+const checkboxBefore = css`{
+    &:before {
+        content: '""';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+}`;
+
+const baseStyle: CSSProperties = {
+	width: "28px",
+	height: "28px",
+	minWidth: "14px",
+	minHeight: "14px",
+	top: "auto",
+	left: "auto",
+	opacity: "1",
+	borderRadius: "12.5%",
+	appearance: "none",
+	cursor: "pointer",
+	margin: "0",
+	borderStyle: "solid",
+	borderWidth: "1px",
+};
+
+const ID_LETTERS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+const FAQ_LINK = process.env.PROSOPO_DOCS_URL
+	? `${new URL(`${process.env.PROSOPO_DOCS_URL}/en/basics/faq/`).href}/`
+	: "https://docs.prosopo.io/en/basics/faq/";
+
+const generateRandomId = () => {
+	return Array.from(
+		{ length: 8 },
+		() => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)],
+	).join("");
+};
+
+interface ResponsiveLabelProps {
+	htmFor?: string;
+}
+
+export const Checkbox: FC<CheckboxProps> = ({
+	theme,
+	onChange,
+	checked,
+	labelText,
+	error,
+	loading,
+}: CheckboxProps) => {
+	const checkboxStyleBase: CSSProperties = {
+		...baseStyle,
+		border: `1px solid ${theme.palette.background.contrastText}`,
+	};
+	const [hover, setHover] = useState(false);
+
+	const ResponsiveLabel = styled.label<ResponsiveLabelProps>`
+		color: ${theme.palette.background.contrastText};
+		position: relative;
+		display: flex !important;
+		cursor: pointer;
+		user-select: none;
+		font-weight: normal;
+		font-family: ${theme.font.fontFamily};
+		@container prosopo-widget (max-width: 169px) {
+			display: none;
+		}
+		@container prosopo-widget (min-width: 170px) {
+			font-size: 10px;
+		}
+		@container prosopo-widget (min-width: 220px) {
+			font-size: 12px;
+		}
+		@container prosopo-widget (min-width: 250px) {
+			font-size: 14px;
+		}
+		@container prosopo-widget (min-width: 270px) {
+			font-size: 16px;
+		}
+	`;
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO fix
+	const checkboxStyle: CSSProperties = useMemo(() => {
+		return {
+			...checkboxStyleBase,
+			borderColor: hover
+				? theme.palette.background.contrastText
+				: theme.palette.border,
+			appearance: checked ? "auto" : "none",
+			flex: 1,
+			margin: "15px",
+			minWidth: "28px",
+			minHeight: "28px",
+		};
+	}, [hover, theme, checked]);
+	const id = generateRandomId();
+
+	return (
+		<span
+			style={{
+				display: "inline-flex",
+				alignItems: "center",
+				minHeight: "58px",
+			}}
+		>
+			{loading ? (
+				<div
+					className={WIDGET_CHECKBOX_SPINNER_CSS_CLASS}
+					aria-label="Loading spinner"
+				/>
+			) : (
+				<input
+					name={id}
+					id={id}
+					onMouseEnter={() => setHover(true)}
+					onMouseLeave={() => setHover(false)}
+					css={checkboxBefore}
+					type={"checkbox"}
+					aria-live={"assertive"}
+					aria-label={labelText}
+					onKeyDown={(e) => {
+						if (!e.isTrusted) {
+							return;
+						}
+						if (e.key === "Enter") {
+							e.preventDefault();
+							e.stopPropagation();
+							setHover(false);
+							onChange(e);
+						}
+					}}
+					onChange={(e) => {
+						if (!e.isTrusted) {
+							return;
+						}
+						e.preventDefault();
+						e.stopPropagation();
+						setHover(false);
+						onChange(e);
+					}}
+					checked={checked}
+					style={checkboxStyle}
+					disabled={error !== undefined}
+					className={loading ? "prosopo-checkbox__loading-spinner" : ""}
+					data-cy={"captcha-checkbox"}
+				/>
+			)}
+			{error ? (
+				<ResponsiveLabel htmFor={id}>
+					<a
+						css={{
+							color: theme.palette.error.main,
+						}}
+						href={FAQ_LINK}
+					>
+						{error}
+					</a>
+				</ResponsiveLabel>
+			) : (
+				<ResponsiveLabel htmFor={id}>{labelText}</ResponsiveLabel>
+			)}
+		</span>
+	);
+};
+export default Checkbox;