astro-altcha 0.1.0

package/README.md

@@ -0,0 +1,87 @@
+# `astro-altcha`
+
+This is an [Astro integration](https://docs.astro.build/en/guides/integrations-guide/) that sets up altcha for Astro. 
+
+## Usage
+
+### Prerequisites
+
+TODO:
+
+### Installation
+
+Install the integration **automatically** using the Astro CLI:
+
+```bash
+pnpm astro add astro-altcha
+```
+
+```bash
+npx astro add astro-altcha
+```
+
+```bash
+yarn astro add astro-altcha
+```
+
+Or install it **manually**:
+
+1. Install the required dependencies
+
+```bash
+pnpm add astro-altcha
+```
+
+```bash
+npm install astro-altcha
+```
+
+```bash
+yarn add astro-altcha
+```
+
+2. Add the integration to your astro config
+
+```diff
++import altcha from "astro-altcha";
+
+export default defineConfig({
+  integrations: [
++    altcha(),
+  ],
+});
+```
+
+### Configuration
+
+TODO:configuration
+
+## Contributing
+
+This package is structured as a monorepo:
+
+- `playground` contains code for testing the package
+- `package` contains the actual package
+
+Install dependencies using pnpm: 
+
+```bash
+pnpm i --frozen-lockfile
+```
+
+Start the playground and package watcher:
+
+```bash
+pnpm dev
+```
+
+You can now edit files in `package`. Please note that making changes to those files may require restarting the playground dev server.
+
+## Licensing
+
+[MIT Licensed](https://github.com/TODO:/blob/main/LICENSE). Made with ❤️ by [TODO:](https://github.com/TODO:).
+
+## Acknowledgements
+
+- Created using [astro-integration-template](https://github.com/florian-lefebvre/astro-integration-template).
+- TODO:

package/dist/api/altcha-challenge.d.ts

@@ -0,0 +1,6 @@
+import { Algorithm, ResolvedAstroAltchaConfig } from "../types/index.js";
+import { DeriveKeyFunction } from "altcha/lib";
+import { APIRoute } from "astro";
+//#region src/api/altcha-challenge.d.ts
+export declare function createChallengeHandler(hmacSecret: string, config: ResolvedAstroAltchaConfig<Algorithm>, deriveKeyFunc: DeriveKeyFunction): APIRoute;
+//#endregion

package/dist/api/altcha-challenge.js

@@ -0,0 +1,20 @@
+import { createChallenge } from "altcha-lib";
+import { deriveHmacKeySecret } from "altcha-lib/frameworks/shared";
+
+//#region src/api/altcha-challenge.ts
+function createChallengeHandler(hmacSecret, config, deriveKeyFunc) {
+	return (async (context) => {
+		if (context.cache.enabled) context.cache.set(false);
+		const challenge = await createChallenge({
+			...config.challengeOptions,
+			expiresAt: Date.now() * 1e3 + config.challengeExpiresAfterMinutes * 60,
+			deriveKey: deriveKeyFunc,
+			hmacSignatureSecret: hmacSecret,
+			hmacKeySignatureSecret: await deriveHmacKeySecret(hmacSecret)
+		});
+		return Response.json(challenge);
+	});
+}
+
+//#endregion
+export { createChallengeHandler };

package/dist/api/altcha-middleware.d.ts

@@ -0,0 +1,26 @@
+import { DeriveKeyFunction } from "altcha-lib";
+import { z } from "astro/zod";
+import { MiddlewareHandler } from "astro";
+//#region src/api/altcha-middleware.d.ts
+declare const altchaPayloadSchema: z.ZodObject<{
+  challenge: z.ZodObject<{
+    parameters: z.ZodObject<{
+      algorithm: z.ZodString;
+      cost: z.ZodNumber;
+      keyLength: z.ZodNumber;
+      keyPrefix: z.ZodString;
+      keySignature: z.ZodString;
+      nonce: z.ZodString;
+      salt: z.ZodString;
+    }, z.core.$strip>;
+    signature: z.ZodString;
+  }, z.core.$strip>;
+  solution: z.ZodObject<{
+    counter: z.ZodNumber;
+    derivedKey: z.ZodString;
+    time: z.ZodNumber;
+  }, z.core.$strip>;
+}, z.core.$strip>;
+export type AltchaPayload = z.infer<typeof altchaPayloadSchema>;
+export declare function createAltchaMiddlewareHandler(hmacSecret: string, deriveKeyFunc: DeriveKeyFunction): MiddlewareHandler;
+//#endregion

package/dist/api/altcha-middleware.js

@@ -0,0 +1,60 @@
+import { CappedMap } from "altcha-lib";
+import { deriveHmacKeySecret, verify } from "altcha-lib/frameworks/shared";
+import { z } from "astro/zod";
+import { base64ToString } from "uint8array-extras";
+
+//#region src/api/altcha-middleware.ts
+const altchaPayloadSchema = z.object({
+	challenge: z.object({
+		parameters: z.object({
+			algorithm: z.string(),
+			cost: z.number(),
+			keyLength: z.number(),
+			keyPrefix: z.string(),
+			keySignature: z.string(),
+			nonce: z.string(),
+			salt: z.string()
+		}),
+		signature: z.string()
+	}),
+	solution: z.object({
+		counter: z.number(),
+		derivedKey: z.string(),
+		time: z.number()
+	})
+});
+const store = new CappedMap({ maxSize: 499 });
+const keyRegexp = /.*astro-altcha.*/;
+function createAltchaMiddlewareHandler(hmacSecret, deriveKeyFunc) {
+	return async (context, next) => {
+		if (context.request.method !== "POST") return next();
+		if (!context.request.headers.get("content-type")?.includes("multipart/form-data") && !context.request.headers.get("content-type")?.includes("application/x-www-form-urlencoded")) return next();
+		const body = Object.fromEntries((await context.request.clone().formData()).entries());
+		const key = Object.keys(body).find((key) => keyRegexp.test(key));
+		if (!key) return next();
+		const altchaBase64 = body?.[key]?.toString();
+		if (!altchaBase64) return next();
+		let parsed;
+		try {
+			parsed = JSON.parse(base64ToString(altchaBase64));
+		} catch (e) {
+			context.logger?.error(`Error parsing altcha payload: ${e}`);
+			return next();
+		}
+		const { success, data: altchaPayload, error } = altchaPayloadSchema.safeParse(parsed);
+		if (!success) {
+			context.logger?.error(`Error parsing altcha payload: ${z.prettifyError(error)}`);
+			return next();
+		}
+		const result = await verify(altchaPayload, deriveKeyFunc, hmacSecret, await deriveHmacKeySecret(hmacSecret), store);
+		if (result.error) {
+			context.logger?.error(`Error verifying altcha payload: ${result.error}`);
+			return next();
+		}
+		context.locals.altcha = result.verification;
+		return next();
+	};
+}
+
+//#endregion
+export { createAltchaMiddlewareHandler };

package/dist/api/challenge.d.ts

@@ -0,0 +1,3 @@
+//#region src/api/challenge.d.ts
+export declare const GET: import("astro").APIRoute;
+//#endregion

package/dist/api/challenge.js

@@ -0,0 +1,12 @@
+import { createChallengeHandler } from "./altcha-challenge.js";
+import { pickDeriveKeyFunc } from "./pickDeriveKey.js";
+import { getSecret } from "astro:env/server";
+import { config } from "astro-altcha:config";
+
+//#region src/api/challenge.ts
+const ALTCHA_HMAC_SIGNATURE = getSecret("ALTCHA_HMAC_SIGNATURE");
+if (!ALTCHA_HMAC_SIGNATURE) throw new Error("ALTCHA_HMAC_SIGNATURE not set");
+const GET = createChallengeHandler(ALTCHA_HMAC_SIGNATURE, config, await pickDeriveKeyFunc(config.challengeOptions.algorithm));
+
+//#endregion
+export { GET };

package/dist/api/middleware.d.ts

@@ -0,0 +1,3 @@
+//#region src/api/middleware.d.ts
+export declare const onRequest: any;
+//#endregion

package/dist/api/middleware.js

@@ -0,0 +1,14 @@
+import { createAltchaMiddlewareHandler } from "./altcha-middleware.js";
+import { pickDeriveKeyFunc } from "./pickDeriveKey.js";
+import { getSecret } from "astro:env/server";
+import { config } from "astro-altcha:config";
+import { defineMiddleware } from "astro:middleware";
+
+//#region src/api/middleware.ts
+const ALTCHA_HMAC_SIGNATURE = getSecret("ALTCHA_HMAC_SIGNATURE");
+if (!ALTCHA_HMAC_SIGNATURE) throw new Error("ALTCHA_HMAC_SIGNATURE not set");
+const altchaMiddleware = defineMiddleware(createAltchaMiddlewareHandler(ALTCHA_HMAC_SIGNATURE, await pickDeriveKeyFunc(config.challengeOptions.algorithm)));
+const onRequest = altchaMiddleware;
+
+//#endregion
+export { onRequest };

package/dist/api/pickDeriveKey.d.ts

@@ -0,0 +1,4 @@
+import { Algorithm } from "../types/index.js";
+//#region src/api/pickDeriveKey.d.ts
+export declare function pickDeriveKeyFunc(algorithm: Algorithm): Promise<typeof import("altcha-lib/algorithms/pbkdf2").deriveKey>;
+//#endregion

package/dist/api/pickDeriveKey.js

@@ -0,0 +1,16 @@
+//#region src/api/pickDeriveKey.ts
+async function pickDeriveKeyFunc(algorithm) {
+	switch (algorithm) {
+		case "PBKDF2/SHA-256":
+		case "PBKDF2/SHA-384":
+		case "PBKDF2/SHA-512": return await import("altcha-lib/algorithms/pbkdf2").then((m) => m.deriveKey);
+		case "Argon2id": return await import("altcha-lib/algorithms/argon2id").then((m) => m.deriveKey);
+		case "Scrypt": return await import("altcha-lib/algorithms/scrypt").then((m) => m.deriveKey);
+		case "SHA-256":
+		case "SHA-384":
+		case "SHA-512": return await import("altcha-lib/algorithms/sha").then((m) => m.deriveKey);
+	}
+}
+
+//#endregion
+export { pickDeriveKeyFunc };

package/dist/components/altcha-form-script.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/altcha-form-script.js

@@ -0,0 +1,21 @@
+//#region src/components/altcha-form-script.ts
+const altchaWidgets = document.querySelectorAll("altcha-widget");
+for (const widget of altchaWidgets) {
+	if (widget.getAttribute("data-astro-altcha") !== "astro-altcha-form-widget") continue;
+	const form = widget.closest("form");
+	if (!form) throw new Error("Widget must be placed inside a form element");
+	const config = form.querySelector("script");
+	if (config?.getAttribute("data-astro-altcha") !== "config") continue;
+	const { hydrationStrategy, debug } = JSON.parse(config.innerText);
+	if (hydrationStrategy === "onload") await loadAltcha(form, widget, debug);
+	else form.addEventListener("focusin", () => loadAltcha(form, widget, debug), { once: true });
+}
+async function loadAltcha(form, widget, debug) {
+	await import("altcha");
+	widget.configure({ debug });
+	const configureEvent = new CustomEvent("astro-altcha:init", { detail: { widget } });
+	form.dispatchEvent(configureEvent);
+}
+
+//#endregion
+export {  };

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+import AltchaForm from "./AltchaForm.astro";
+import AltchaObfuscationWidget from "./AltchaObfuscationWidget.astro";
+export { AltchaForm, AltchaObfuscationWidget };

package/dist/components/index.js

@@ -0,0 +1,4 @@
+import AltchaForm from "./AltchaForm.astro";
+import AltchaObfuscationWidget from "./AltchaObfuscationWidget.astro";
+
+export { AltchaForm, AltchaObfuscationWidget };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { integration } from "./integration.js";
+export { integration as default };

package/dist/index.js

@@ -0,0 +1,7 @@
+import { integration } from "./integration.js";
+
+//#region src/index.ts
+var src_default = integration;
+
+//#endregion
+export { src_default as default };

package/dist/integration.d.ts

@@ -0,0 +1,39 @@
+import { Algorithm, AltchaWidgetName, AstroAltchaConfig } from "./types/index.js";
+import { AstroIntegration } from "astro";
+//#region src/integration.d.ts
+export declare function integration(options?: AstroAltchaConfig): AstroIntegration;
+export declare function mergeDefaultConfig(options?: AstroAltchaConfig): {
+  readonly challengeOptions: {
+    readonly algorithm: "PBKDF2/SHA-256";
+    readonly cost: number;
+    readonly counter: number;
+  } | {
+    readonly algorithm: Exclude<Algorithm, "Argon2id" | "Scrypt">;
+    readonly keyLength?: number;
+    readonly keyPrefix?: string;
+    counter: number;
+    readonly counterMode?: "uint32" | "string";
+    readonly data?: Record<string, string | number | boolean | null>;
+    readonly hmacAlgorithm?: import("altcha-lib").HmacAlgorithm;
+    readonly keyPrefixLength?: number;
+    readonly memoryCost?: number;
+    readonly parallelism?: number;
+    cost: number;
+  } | {
+    readonly algorithm: "Argon2id" | "Scrypt";
+    readonly keyLength?: number;
+    readonly keyPrefix?: string;
+    counter: number;
+    readonly counterMode?: "uint32" | "string";
+    readonly data?: Record<string, string | number | boolean | null>;
+    readonly hmacAlgorithm?: import("altcha-lib").HmacAlgorithm;
+    readonly keyPrefixLength?: number;
+    readonly memoryCost: number;
+    readonly parallelism?: number;
+    cost: number;
+  };
+  readonly defaultName: AltchaWidgetName;
+  readonly challengePath: string;
+  readonly challengeExpiresAfterMinutes: number;
+};
+//#endregion

package/dist/integration.js

@@ -0,0 +1,85 @@
+import plugin from "./vite-plugin.js";
+import { randomInt } from "altcha-lib";
+import { envField } from "astro/config";
+
+//#region src/integration.ts
+function integration(options = {}) {
+	const config = mergeDefaultConfig(options);
+	return {
+		name: "astro-altcha",
+		hooks: {
+			"astro:config:setup": ({ injectRoute, updateConfig, addMiddleware }) => {
+				updateConfig({
+					vite: { plugins: [plugin(config)] },
+					env: { schema: { ALTCHA_HMAC_SIGNATURE: envField.string({
+						context: "server",
+						access: "secret"
+					}) } }
+				});
+				injectRoute({
+					pattern: config.challengePath,
+					entrypoint: new URL("./api/challenge.js", import.meta.url),
+					prerender: false
+				});
+				addMiddleware({
+					order: "pre",
+					entrypoint: new URL("./api/middleware.js", import.meta.url)
+				});
+			},
+			"astro:config:done": ({ injectTypes }) => {
+				injectTypes({
+					filename: "astro-altcha-events.d.ts",
+					content: `import type { WidgetAttributes, WidgetMethods } from "astro-altcha/types/altcha"
+
+interface CustomEventMap {
+	"astro-altcha:init": {
+		widget: WidgetAttributes & WidgetMethods & HTMLElement;
+	}
+}
+
+declare global {
+	interface HTMLFormElement {
+		addEventListener<K extends keyof CustomEventMap>(
+			type: K,
+			listener: (this: EventTarget, ev: CustomEvent<CustomEventMap[K]>) => void,
+		): void;
+
+		dispatchEvent<K extends keyof CustomEventMap>(
+			ev: CustomEvent<CustomEventMap[K]>,
+		): boolean;
+	}
+};
+
+export {};
+`
+				});
+				injectTypes({
+					filename: "astro-altcha-locals.d.ts",
+					content: `declare namespace App {
+  interface Locals {
+    altcha: import("astro-altcha/types/altcha").VerifySolutionResult | import("astro-altcha/types/altcha-lib").VerifyServerResult | null;
+  }
+}
+`
+				});
+			}
+		}
+	};
+}
+function mergeDefaultConfig(options = {}) {
+	return {
+		defaultName: "astro-altcha",
+		challengePath: "/api/altcha/challenge",
+		challengeExpiresAfterMinutes: 20,
+		...options,
+		challengeOptions: {
+			algorithm: "PBKDF2/SHA-256",
+			cost: 5e3,
+			counter: randomInt(5e3, 1e4),
+			...options.challengeOptions
+		}
+	};
+}
+
+//#endregion
+export { integration, mergeDefaultConfig };

package/dist/types/altcha-lib.d.ts

@@ -0,0 +1 @@
+export * from "altcha-lib/types";

package/dist/types/altcha-lib.js

@@ -0,0 +1,3 @@
+export * from "altcha-lib/types"
+
+export {  };

package/dist/types/altcha.d.ts

@@ -0,0 +1 @@
+export * from "altcha/types";

package/dist/types/altcha.js

@@ -0,0 +1,3 @@
+export * from "altcha/types"
+
+export {  };

package/dist/types/index.d.ts

@@ -0,0 +1,65 @@
+import { CreateChallengeOptions } from "altcha-lib/types";
+import { WidgetAttributes } from "altcha/types";
+//#region src/types/index.d.ts
+export type AltchaWidgetName = `${string}astro-altcha${string}`;
+export type Algorithm = `PBKDF2/${Digest}` | "Argon2id" | "Scrypt" | Digest;
+type Digest = `SHA-${"256" | "384" | 512}`;
+export type AstroAltchaConfig = {
+  /**
+   * Default altcha-widget name. Must contain the string `astro-altcha`.
+   *
+   * Default: `astro-altcha`
+   */
+  defaultName?: AltchaWidgetName;
+  /**
+   *  Path of the challenge API endpoint.
+   *
+   * Default: `/api/altcha/challenge`
+   */
+  challengePath?: string;
+  /**
+   * Challenge options for [Challange creation](https://altcha.org/docs/integration/server/#challenge-generation)
+   *
+   * Default:
+   * ```
+   * algorithm: "PBKDF2/SHA-256"
+   * cost: 5_000
+   * counter: randomInt(5_000, 10_000)
+   * ```
+   */
+  challengeOptions?: WithOptional<AltchaChallengeOptions<Algorithm>, "cost">;
+  /**
+   * Challenge expiration in minutes
+   *
+   * Default: 20 min
+   */
+  challengeExpiresAfterMinutes?: number;
+};
+export type ResolvedAstroAltchaConfig<Algo extends Algorithm> = Required<AstroAltchaConfig> & {
+  challengeOptions: AltchaChallengeOptions<Algo>;
+};
+type WithOptional<T, K extends keyof T> = T extends unknown ? Omit<T, K> & Partial<Pick<T, K>> : never;
+type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P]; };
+type OmitCreateChallengeOptions = Omit<CreateChallengeOptions, "hmacSignatureSecret" | "hmacKeySignatureSecret" | "deriveKey" | "expiresAt" | "algorithm">;
+export type AltchaChallengeOptions<Algo extends Algorithm> = Algo extends "Argon2id" | "Scrypt" ? WithRequired<OmitCreateChallengeOptions, "memoryCost"> & {
+  algorithm: "Argon2id" | "Scrypt";
+} : OmitCreateChallengeOptions & {
+  algorithm: Exclude<Algorithm, "Argon2id" | "Scrypt">;
+};
+export type AstroAltchaHydrationStrategy = "onfocus" | "onload";
+export type AltchaFormWidgetProps = {
+  /** When the altcha-widget should be hydrated.
+   *
+   * `onfocus` - when the form is first focused
+   *
+   * `onload` - when the page first loads
+   */
+  hydrationStrategy?: "onfocus" | "onload";
+  debug?: boolean;
+} & Omit<WidgetAttributes, "name">;
+export type AltchaFormProps = {
+  widget?: AltchaFormWidgetProps & {
+    name?: AltchaWidgetName;
+  };
+} & astroHTML.JSX.FormHTMLAttributes;
+//#endregion

package/dist/types/index.js

@@ -0,0 +1 @@
+export {  };

package/dist/vite-plugin.d.ts

@@ -0,0 +1,6 @@
+import { Algorithm, ResolvedAstroAltchaConfig } from "./types/index.js";
+import { AstroConfig } from "astro";
+//#region src/vite-plugin.d.ts
+declare const plugin: (config: ResolvedAstroAltchaConfig<Algorithm>) => NonNullable<AstroConfig["vite"]["plugins"]>[number];
+//#endregion
+export { plugin as default };

package/dist/vite-plugin.js

@@ -0,0 +1,18 @@
+//#region src/vite-plugin.ts
+const virtualModuleId = "astro-altcha:config";
+const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+const plugin = (config) => {
+	return {
+		name: "vite-plugin-altcha-config",
+		resolveId(id) {
+			if (id === virtualModuleId) return resolvedVirtualModuleId;
+		},
+		load(id) {
+			if (id === resolvedVirtualModuleId) return `export const config =
+${JSON.stringify(config)}`;
+		}
+	};
+};
+
+//#endregion
+export { plugin as default };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "astro-altcha",
+  "version": "0.1.0",
+  "description": "Altcha integration for Astro",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts"
+    },
+    "./types/altcha": {
+      "types": "./dist/types/altcha.d.ts"
+    },
+    "./types/altcha-lib": {
+      "types": "./dist/types/altcha-lib.d.ts"
+    },
+    "./components": "./src/components/index.ts",
+    "./components/*": "./src/components/*"
+  },
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "keywords": [
+    "astro-integration",
+    "astro-component",
+    "withastro",
+    "astro",
+    "altcha",
+    "astro-altcha"
+  ],
+  "author": "Lukas Trombach",
+  "repository": {
+    "type": "git",
+    "url": "https://codeberg.org/Trombach/astro-altcha"
+  },
+  "bugs": "https://codeberg.org/Trombach/astro-altcha/issues",
+  "homepage": "https://codeberg.org/Trombach/astro-altcha",
+  "license": "MIT",
+  "peerDependencies": {
+    "astro": "^6.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "0.9.10",
+    "tsdown": "0.23.0"
+  },
+  "dependencies": {
+    "altcha": "^3.2.3",
+    "altcha-lib": "^2.5.0",
+    "uint8array-extras": "^1.5.0"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "ts:check": "pnpm astro check",
+    "test": "node --experimental-test-snapshots --experimental-test-module-mocks --test 'test/**/*.test.ts'",
+    "test:ci": "node --experimental-test-snapshots --experimental-test-module-mocks --experimental-test-coverage --test 'test/**/*.test.ts'",
+    "test:watch": "node --experimental-test-snapshots --experimental-test-module-mocks --watch --test 'test/**/*.test.ts'",
+    "test:update-snapshots": "node --test-update-snapshots --experimental-test-snapshots --experimental-test-module-mocks --test 'test/**/*.test.ts'"
+  }
+}

package/src/components/AltchaForm.astro

@@ -0,0 +1,35 @@
+---
+import { config } from "astro-altcha:config";
+import type { AltchaFormProps } from "../types/index.js";
+
+type Props = AltchaFormProps;
+
+const {
+	widget: {
+		name = config.defaultName,
+		hydrationStrategy = "onload",
+		debug,
+		challenge = config.challengePath,
+		...widgetProps
+	} = {},
+	...formProps
+} = Astro.props;
+---
+
+<form {...formProps}>
+	<slot />
+	<altcha-widget
+		data-astro-altcha="astro-altcha-form-widget"
+		{name}
+		{challenge}
+		{...widgetProps}
+	></altcha-widget>
+	<script
+		is:inline
+		data-astro-altcha="config"
+		type="application/json"
+		set:html={JSON.stringify({ hydrationStrategy,  debug})}
+	/>
+</form>
+
+<script src="./altcha-form-script.ts" />

package/src/components/AltchaObfuscationWidget.astro

@@ -0,0 +1,21 @@
+---
+import type { WidgetAttributes } from "altcha/types";
+import { obfuscate } from "altcha-lib/obfuscation";
+
+type Props = {
+	data: string;
+} & WidgetAttributes;
+
+const { data, display = "floating" } = Astro.props;
+const dataObfuscated = await obfuscate(data);
+---
+
+<altcha-widget data-obfuscated={dataObfuscated} {display}>
+	<slot name="reveal">
+		<button type="button">Click to reveal</button>
+	</slot>
+</altcha-widget>
+
+<script>
+import "altcha/plugins/obfuscation";
+</script>

package/src/components/altcha-form-script.ts

@@ -0,0 +1,47 @@
+import type { WidgetAttributes, WidgetMethods } from "altcha/types";
+import type { AstroAltchaHydrationStrategy } from "../types/index.js";
+
+const altchaWidgets = document.querySelectorAll("altcha-widget");
+
+for (const widget of altchaWidgets) {
+	if (widget.getAttribute("data-astro-altcha") !== "astro-altcha-form-widget") {
+		continue;
+	}
+
+	const form = widget.closest("form");
+	if (!form) {
+		throw new Error("Widget must be placed inside a form element");
+	}
+
+	const config = form.querySelector("script");
+	if (config?.getAttribute("data-astro-altcha") !== "config") continue;
+
+	const {
+		hydrationStrategy,
+		debug,
+	}: {
+		hydrationStrategy: AstroAltchaHydrationStrategy;
+		debug: boolean;
+	} = JSON.parse(config.innerText);
+	if (hydrationStrategy === "onload") {
+		await loadAltcha(form, widget, debug);
+	} else {
+		form.addEventListener("focusin", () => loadAltcha(form, widget, debug), {
+			once: true,
+		});
+	}
+}
+
+async function loadAltcha(
+	form: HTMLFormElement,
+	widget: WidgetAttributes & WidgetMethods & HTMLElement,
+	debug: boolean,
+) {
+	await import("altcha");
+	widget.configure({ debug });
+
+	const configureEvent = new CustomEvent("astro-altcha:init", {
+		detail: { widget },
+	});
+	form.dispatchEvent(configureEvent);
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as AltchaForm } from "./AltchaForm.astro";
+export { default as AltchaObfuscationWidget } from "./AltchaObfuscationWidget.astro";