@prosopo/procaptcha-bundle 3.3.0 → 4.1.7

package/src/util/captcha/captchaRenderer.tsx

@@ -0,0 +1,126 @@
+// 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 createCache, { type EmotionCache } from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import type { Ti18n } from "@prosopo/locale";
+import type {
+	Callbacks,
+	ProcaptchaClientConfigOutput,
+	ProcaptchaRenderOptions,
+} from "@prosopo/types";
+import type { ReactNode } from "react";
+import { type Root, createRoot } from "react-dom/client";
+import { createConfig } from "../configCreator.js";
+import { setLanguage } from "../language.js";
+import { setValidChallengeLength } from "../timeout.js";
+import { BundleCaptcha } from "./components/bundleCaptcha.js";
+
+interface RenderSettings {
+	identifierPrefix: string;
+	emotionCacheKey: string;
+	webComponentTag: string;
+}
+
+class CaptchaRenderer {
+	public renderCaptcha(
+		settings: RenderSettings,
+		container: HTMLElement,
+		renderOptions: ProcaptchaRenderOptions,
+		callbacks: Callbacks,
+		isWeb2: boolean,
+		i18n: Ti18n,
+		invisible: boolean,
+		widgetContainer: HTMLElement,
+		sourceElement?: Element,
+	): Root {
+		const config = createConfig(
+			renderOptions.siteKey,
+			renderOptions.theme,
+			renderOptions.language,
+			isWeb2,
+			invisible,
+			renderOptions.userAccountAddress,
+		);
+		this.readAndValidateSettings(
+			sourceElement || container,
+			config,
+			renderOptions,
+		);
+
+		const reactRoot = this.createReactRoot(
+			container,
+			settings.identifierPrefix,
+		);
+
+		const emotionCache = this.makeEmotionCache(
+			settings.emotionCacheKey,
+			container,
+		);
+
+		const captchaComponent = (
+			<BundleCaptcha
+				config={config}
+				callbacks={callbacks}
+				i18n={i18n}
+				container={widgetContainer}
+			/>
+		);
+
+		this.renderCaptchaComponent(reactRoot, emotionCache, captchaComponent);
+
+		return reactRoot;
+	}
+
+	protected readAndValidateSettings(
+		element: Element,
+		config: ProcaptchaClientConfigOutput,
+		renderOptions: ProcaptchaRenderOptions,
+	): void {
+		setValidChallengeLength(renderOptions, element, config);
+		setLanguage(renderOptions, element, config);
+	}
+
+	protected makeEmotionCache(
+		cacheKey: string,
+		container: HTMLElement,
+	): EmotionCache {
+		return createCache({
+			key: cacheKey,
+			prepend: true,
+			container: container,
+		});
+	}
+
+	protected createReactRoot(
+		container: HTMLElement,
+		identifierPrefix: string,
+	): Root {
+		return createRoot(container, {
+			identifierPrefix: identifierPrefix,
+		});
+	}
+
+	protected renderCaptchaComponent(
+		reactRoot: Root,
+		emotionCache: EmotionCache,
+		captchaComponent: ReactNode,
+	): void {
+		reactRoot.render(
+			<CacheProvider value={emotionCache}>{captchaComponent}</CacheProvider>,
+		);
+	}
+}
+
+export { CaptchaRenderer };

package/src/util/captcha/components/bundleCaptcha.tsx

@@ -0,0 +1,57 @@
+// 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 { Ti18n } from "@prosopo/locale";
+import { getDefaultEvents } from "@prosopo/procaptcha-common";
+import { ProcaptchaFrictionless } from "@prosopo/procaptcha-frictionless";
+import type {
+	ProcaptchaCallbacks,
+	ProcaptchaClientConfigInput,
+} from "@prosopo/types";
+import { useState } from "react";
+
+interface BundleCaptchaProps {
+	config: ProcaptchaClientConfigInput;
+	callbacks: ProcaptchaCallbacks;
+	i18n: Ti18n;
+	container: HTMLElement;
+}
+
+// Universal captcha mount used by the script-tag bundle. Wraps
+// ProcaptchaFrictionless with a `key`-driven restart hook so a "no session"
+// error can fully unmount and remount the underlying widget. The server
+// decides which concrete challenge type to render via the /frictionless
+// endpoint — the wrapper itself is type-agnostic.
+const BundleCaptcha = (props: BundleCaptchaProps) => {
+	const { config, callbacks, i18n, container } = props;
+
+	const [componentKey, setComponentKey] = useState(0);
+
+	const restart = () => {
+		setComponentKey((prevKey) => prevKey + 1);
+	};
+
+	return (
+		<ProcaptchaFrictionless
+			key={componentKey}
+			config={config}
+			callbacks={getDefaultEvents(callbacks)}
+			restart={restart}
+			i18n={i18n}
+			container={container}
+		/>
+	);
+};
+
+export { BundleCaptcha };

package/src/util/config.ts

@@ -0,0 +1,40 @@
+// 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 getProcaptchaScript = (
+	names: string[],
+): HTMLScriptElement | null => {
+	for (const name of names) {
+		const script = document.querySelector<HTMLScriptElement>(
+			`script[src*="${name}"]`,
+		);
+		if (script) {
+			return script;
+		}
+	}
+	return null;
+};
+
+export const extractParams = (names: string[]) => {
+	const script = getProcaptchaScript(names);
+	if (script) {
+		const params = new URLSearchParams(script.src.split("?")[1]);
+		return {
+			onloadUrlCallback: params.get("onload") || undefined,
+			renderExplicit: params.get("render") || undefined,
+		};
+	}
+
+	return { onloadUrlCallback: undefined, renderExplicit: undefined };
+};

package/src/util/configCreator.ts

@@ -0,0 +1,51 @@
+// 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 { Languages } from "@prosopo/locale";
+import {
+	EnvironmentTypesSchema,
+	type ProcaptchaClientConfigOutput,
+	ProcaptchaConfigSchema,
+} from "@prosopo/types";
+
+function createConfig(
+	siteKey?: string,
+	theme: "light" | "dark" = "light",
+	language?: (typeof Languages)[keyof typeof Languages],
+	web2 = true,
+	invisible = false,
+	userAccountAddress?: string,
+): ProcaptchaClientConfigOutput {
+	if (!siteKey) {
+		siteKey = process.env.PROSOPO_SITE_KEY || "";
+	}
+
+	return ProcaptchaConfigSchema.parse({
+		defaultEnvironment: process.env.PROSOPO_DEFAULT_ENVIRONMENT
+			? EnvironmentTypesSchema.parse(process.env.PROSOPO_DEFAULT_ENVIRONMENT)
+			: EnvironmentTypesSchema.enum.development,
+		userAccountAddress: userAccountAddress || "",
+		account: {
+			address: siteKey,
+		},
+		serverUrl: process.env.PROSOPO_SERVER_URL || "",
+		mongoAtlasUri: process.env.PROSOPO_MONGO_EVENTS_URI || "",
+		web2,
+		mode: invisible ? "invisible" : "visible",
+		theme,
+		language,
+	});
+}
+
+export { createConfig };

package/src/util/language.ts

@@ -0,0 +1,53 @@
+// 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 { LanguageSchema, type Languages } from "@prosopo/locale";
+import type {
+	ProcaptchaClientConfigInput,
+	ProcaptchaRenderOptions,
+} from "@prosopo/types";
+
+/**
+ * Prioritizes language selection from:
+ * 1. renderOptions.language
+ * 2. element's data-language attribute
+ * 3. Defaults to 'en'
+ *
+ * Validates the language against currently supported languages
+ *
+ * @param renderOptions
+ * @param element
+ * @param config
+ */
+export const setLanguage = (
+	renderOptions: ProcaptchaRenderOptions | undefined,
+	element: Element,
+	config: ProcaptchaClientConfigInput,
+) => {
+	const languageAttribute =
+		renderOptions?.language || element.getAttribute("data-language");
+
+	if (languageAttribute) {
+		config.language = validateLanguage(languageAttribute);
+	}
+};
+
+const validateLanguage = (languageAttribute: string | typeof Languages) => {
+	try {
+		return LanguageSchema.parse(languageAttribute);
+	} catch (error) {
+		console.error(`Invalid language attribute: ${languageAttribute}`);
+		return LanguageSchema.parse("en");
+	}
+};

package/src/util/timeout.ts

@@ -0,0 +1,43 @@
+// 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 {
+	ProcaptchaClientConfigOutput,
+	ProcaptchaRenderOptions,
+} from "@prosopo/types";
+
+/**
+ * Set the timeout for a solved captcha
+ *
+ * @param renderOptions
+ * @param element
+ * @param config
+ */
+export const setValidChallengeLength = (
+	renderOptions: ProcaptchaRenderOptions | undefined,
+	element: Element,
+	config: ProcaptchaClientConfigOutput,
+): void => {
+	const challengeValidLengthAttribute =
+		renderOptions?.["challenge-valid-length"] ||
+		element.getAttribute("data-challenge-valid-length");
+
+	if (challengeValidLengthAttribute) {
+		config.captchas.image.solutionTimeout = Number.parseInt(
+			challengeValidLengthAttribute,
+		);
+		config.captchas.pow.solutionTimeout = Number.parseInt(
+			challengeValidLengthAttribute,
+		);
+	}
+};

package/src/util/widgetFactory.ts

@@ -0,0 +1,145 @@
+// 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 } from "@prosopo/locale";
+import type { Ti18n } from "@prosopo/locale";
+import {
+	getDefaultCallbacks,
+	setUserCallbacks,
+} from "@prosopo/procaptcha-common";
+import type { Callbacks, ProcaptchaRenderOptions } from "@prosopo/types";
+import {
+	createWidgetSkeleton,
+	darkTheme,
+	lightTheme,
+} from "@prosopo/widget-skeleton";
+import type { Root } from "react-dom/client";
+import type { CaptchaRenderer } from "./captcha/captchaRenderer.js";
+import type { WidgetThemeResolver } from "./widgetThemeResolver.js";
+
+class WidgetFactory {
+	private captchaRenderer: CaptchaRenderer | null = null;
+	private _i18n: Ti18n | null = null;
+
+	public constructor(
+		private readonly widgetThemeResolver: WidgetThemeResolver,
+	) {}
+
+	get i18n(): Ti18n {
+		if (this._i18n === null) {
+			throw new Error("I18n is not initialized");
+		}
+		return this._i18n;
+	}
+
+	public async createWidgets(
+		containers: Element[],
+		renderOptions: ProcaptchaRenderOptions,
+		isWeb2 = true,
+		invisible = false,
+	): Promise<Root[]> {
+		return Promise.all(
+			containers.map((container) => {
+				const callbacks = getDefaultCallbacks(container);
+				setUserCallbacks(renderOptions, callbacks, container);
+				return this.createWidget(
+					container,
+					renderOptions,
+					callbacks,
+					isWeb2,
+					invisible,
+				);
+			}),
+		);
+	}
+
+	public async createWidget(
+		container: Element,
+		renderOptions: ProcaptchaRenderOptions,
+		callbacks: Callbacks,
+		isWeb2 = true,
+		invisible = false,
+	): Promise<Root> {
+		renderOptions.theme = this.widgetThemeResolver.resolveWidgetTheme(
+			container,
+			renderOptions,
+		);
+
+		const widgetTheme =
+			"light" === renderOptions.theme ? lightTheme : darkTheme;
+
+		let widgetInteractiveArea: HTMLElement;
+		let widgetContainer: HTMLElement;
+
+		// Don't create the widget skeleton if the mode is invisible
+		if (invisible) {
+			//Create new div inside the container
+			const newDiv = document.createElement("div");
+			container.appendChild(newDiv);
+			widgetInteractiveArea = newDiv as HTMLElement;
+			widgetContainer = newDiv;
+		} else {
+			const widgetResult = createWidgetSkeleton(
+				container,
+				widgetTheme,
+				"prosopo-procaptcha",
+			);
+			widgetInteractiveArea = widgetResult.widgetInteractiveArea;
+			widgetContainer = widgetResult.webComponent;
+		}
+
+		// all the captcha-rendering logic is lazy-loaded, to avoid react & zod delay the initial widget creation.
+
+		const captchaRenderer = await this.getCaptchaRenderer();
+
+		const captchaRoot = captchaRenderer.renderCaptcha(
+			{
+				identifierPrefix: "procaptcha-",
+				emotionCacheKey: "procaptcha",
+				webComponentTag: "prosopo-procaptcha",
+			},
+			widgetInteractiveArea,
+			renderOptions,
+			callbacks,
+			isWeb2,
+			this.i18n,
+			invisible,
+			widgetContainer,
+			container,
+		);
+
+		return captchaRoot;
+	}
+
+	protected async getCaptchaRenderer(): Promise<CaptchaRenderer> {
+		if (this._i18n === null) {
+			this._i18n = await loadI18next(false);
+		}
+
+		if (this.captchaRenderer === null) {
+			this.captchaRenderer = await this.createCaptchaRenderer();
+		}
+
+		return this.captchaRenderer;
+	}
+
+	protected async createCaptchaRenderer(): Promise<CaptchaRenderer> {
+		const CaptchaRenderer = (await import("./captcha/captchaRenderer.js"))
+			.CaptchaRenderer;
+
+		return new CaptchaRenderer();
+	}
+}
+
+export { WidgetFactory };

package/src/util/widgetThemeResolver.ts

@@ -0,0 +1,40 @@
+// 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 { ProcaptchaRenderOptions } from "@prosopo/types";
+
+class WidgetThemeResolver {
+	private readonly themesSet = new Set(["light", "dark"]);
+	private readonly defaultTheme = "light";
+
+	public resolveWidgetTheme(
+		element: Element,
+		renderOptions: ProcaptchaRenderOptions,
+	): "light" | "dark" {
+		const themeAttribute =
+			renderOptions.theme ||
+			element.getAttribute("data-theme") ||
+			this.defaultTheme;
+
+		return this.validateTheme(themeAttribute);
+	}
+
+	protected validateTheme(themeAttribute: string): "light" | "dark" {
+		return this.themesSet.has(themeAttribute)
+			? (themeAttribute as "light" | "dark")
+			: this.defaultTheme;
+	}
+}
+
+export { WidgetThemeResolver };

package/tsconfig.cjs.json

@@ -0,0 +1,35 @@
+{
+	"extends": "../../tsconfig.cjs.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist/cjs",
+		"lib": ["es6", "dom"]
+	},
+	"include": ["src/index.ts", "src/index.html"],
+	"references": [
+		{
+			"path": "../../dev/config/tsconfig.cjs.json"
+		},
+		{
+			"path": "../dotenv/tsconfig.cjs.json"
+		},
+		{
+			"path": "../locale/tsconfig.cjs.json"
+		},
+		{
+			"path": "../procaptcha-frictionless/tsconfig.cjs.json"
+		},
+		{
+			"path": "../types/tsconfig.cjs.json"
+		},
+		{
+			"path": "../util/tsconfig.cjs.json"
+		},
+		{
+			"path": "../widget-skeleton/tsconfig.cjs.json"
+		},
+		{
+			"path": "../procaptcha-common/tsconfig.cjs.json"
+		}
+	]
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+	"extends": "../../tsconfig.esm.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist",
+		"lib": ["es6", "dom"]
+	},
+	"include": [
+		"src",
+		"src/**/*.json",
+		"src/index.html",
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/**/*.d.ts"
+	],
+	"references": [
+		{
+			"path": "../../dev/config/tsconfig.json"
+		},
+		{
+			"path": "../dotenv"
+		},
+		{
+			"path": "../locale"
+		},
+		{
+			"path": "../procaptcha-frictionless"
+		},
+		{
+			"path": "../types"
+		},
+		{
+			"path": "../util"
+		},
+		{
+			"path": "../widget-skeleton"
+		},
+		{
+			"path": "../procaptcha-common"
+		}
+	]
+}