astro-altcha 0.1.5 → 0.3.0

package/README.md

@@ -7,7 +7,7 @@
 
 > **Warning** Early development. Expect bugs and frequent breaking changes.
 
-This is an [Astro integration](https://docs.astro.build/en/guides/integrations-guide/) that sets up altcha for Astro. 
+This is an [Astro integration](https://docs.astro.build/en/guides/integrations-guide/) that sets up altcha for Astro.
 
 ## Usage
 
@@ -70,7 +70,7 @@ This package is structured as a monorepo:
 - `playground` contains code for testing the package
 - `package` contains the actual package
 
-Install dependencies using pnpm: 
+Install dependencies using pnpm:
 
 ```bash
 pnpm i --frozen-lockfile

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

@@ -1,6 +1,4 @@
 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
+export declare function createChallengeHandler(hmacSecret: string, { challengeOptions, challengeExpiresAfterMinutes, setCookie }: ResolvedAstroAltchaConfig<Algorithm>, deriveKeyFunc: DeriveKeyFunction): APIRoute;

package/dist/api/altcha-challenge.js

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

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

@@ -1,7 +1,7 @@
+import { Algorithm, ResolvedAstroAltchaConfig } from "../types/index.js";
 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<{
@@ -23,6 +23,5 @@ declare const altchaPayloadSchema: z.ZodObject<{
   }, z.core.$loose>;
 }, z.core.$loose>;
 export type AltchaPayload = z.infer<typeof altchaPayloadSchema>;
-export declare function createAltchaMiddlewareHandler(hmacSecret: string, deriveKeyFunc: DeriveKeyFunction): MiddlewareHandler;
-//#endregion
+export declare function createAltchaMiddlewareHandler(hmacSecret: string, deriveKeyFunc: DeriveKeyFunction, { setCookie }: ResolvedAstroAltchaConfig<Algorithm>): MiddlewareHandler;
 export {};

package/dist/api/altcha-middleware.js

@@ -3,7 +3,7 @@ import { deriveHmacKeySecret, verify } from "altcha-lib/frameworks/shared";
 import { z } from "astro/zod";
 import { base64ToString } from "uint8array-extras";
 
-//#region src/api/altcha-middleware.ts
+// src/api/altcha-middleware.ts
 const altchaPayloadSchema = z.looseObject({
 	challenge: z.looseObject({
 		parameters: z.looseObject({
@@ -26,15 +26,18 @@ const altchaPayloadSchema = z.looseObject({
 });
 const store = new CappedMap({ maxSize: 499 });
 const keyRegexp = /.*astro-altcha.*/;
-function createAltchaMiddlewareHandler(hmacSecret, deriveKeyFunc) {
+function createAltchaMiddlewareHandler(hmacSecret, deriveKeyFunc, { setCookie }) {
 	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 altchaBase64 = setCookie?.name ? context.cookies.get(setCookie.name)?.value : void 0;
+		if (!altchaBase64) {
+			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();
+			altchaBase64 = body?.[key]?.toString();
+			if (!altchaBase64) return next();
+		}
 		let parsed;
 		try {
 			parsed = JSON.parse(base64ToString(altchaBase64));
@@ -48,6 +51,7 @@ function createAltchaMiddlewareHandler(hmacSecret, deriveKeyFunc) {
 			return next();
 		}
 		const result = await verify(altchaPayload, deriveKeyFunc, hmacSecret, await deriveHmacKeySecret(hmacSecret), store);
+		if (setCookie) context.cookies.delete(setCookie.name, { ...setCookie });
 		if (result.error && !result.verification) {
 			context.logger?.error(`Error verifying altcha payload: ${result.error}`);
 			return next();
@@ -57,5 +61,4 @@ function createAltchaMiddlewareHandler(hmacSecret, deriveKeyFunc) {
 	};
 }
 
-//#endregion
 export { createAltchaMiddlewareHandler };

package/dist/api/challenge.d.ts

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

package/dist/api/challenge.js

@@ -3,10 +3,9 @@ import { pickDeriveKeyFunc } from "./pickDeriveKey.js";
 import { getSecret } from "astro:env/server";
 import { config } from "astro-altcha:config";
 
-//#region src/api/challenge.ts
+// 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

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

package/dist/api/middleware.js

@@ -4,11 +4,10 @@ import { getSecret } from "astro:env/server";
 import { config } from "astro-altcha:config";
 import { defineMiddleware } from "astro:middleware";
 
-//#region src/api/middleware.ts
+// 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 altchaMiddleware = defineMiddleware(createAltchaMiddlewareHandler(ALTCHA_HMAC_SIGNATURE, await pickDeriveKeyFunc(config.challengeOptions.algorithm), config));
 const onRequest = altchaMiddleware;
 
-//#endregion
 export { onRequest };

package/dist/api/pickDeriveKey.d.ts

@@ -1,4 +1,2 @@
 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
+export declare function pickDeriveKeyFunc(algorithm: Algorithm): Promise<typeof import("altcha-lib/algorithms/pbkdf2").deriveKey>;

package/dist/api/pickDeriveKey.js

@@ -1,4 +1,4 @@
-//#region src/api/pickDeriveKey.ts
+// src/api/pickDeriveKey.ts
 async function pickDeriveKeyFunc(algorithm) {
 	switch (algorithm) {
 		case "PBKDF2/SHA-256":
@@ -12,5 +12,4 @@ async function pickDeriveKeyFunc(algorithm) {
 	}
 }
 
-//#endregion
 export { pickDeriveKeyFunc };

package/dist/components/common.d.ts

@@ -0,0 +1,3 @@
+import { AltchaWidgetTheme, AstroAltchaHydrationStrategy } from "../types/index.js";
+export declare function mountWithStrategy(strategy: AstroAltchaHydrationStrategy, element: HTMLElement, mount: () => void): void;
+export declare function importTheme(theme?: AltchaWidgetTheme | null): Promise<void>;

package/dist/components/common.js

@@ -0,0 +1,46 @@
+// src/components/common.ts
+function mountWithStrategy(strategy, element, mount) {
+	switch (strategy) {
+		case "onload":
+			mount();
+			return;
+		case "onfocus":
+			element.addEventListener("focusin", mount, { once: true });
+			return;
+		case "onvisible":
+			new IntersectionObserver((entries, observer) => {
+				if (!entries.some((entry) => entry.isIntersecting)) return;
+				observer.disconnect();
+				mount();
+			}, { rootMargin: "200px 0px" }).observe(element);
+			return;
+	}
+}
+async function importTheme(theme) {
+	if (!theme) return;
+	switch (theme) {
+		case "aqua":
+			await import("altcha/themes/aqua.min.css");
+			return;
+		case "business":
+			await import("altcha/themes/business.min.css");
+			return;
+		case "caramel":
+			await import("altcha/themes/caramel.min.css");
+			return;
+		case "cupcake":
+			await import("altcha/themes/cupcake.min.css");
+			return;
+		case "cyberpunk":
+			await import("altcha/themes/cyberpunk.min.css");
+			return;
+		case "lime":
+			await import("altcha/themes/lime.min.css");
+			return;
+		case "wireframe":
+			await import("altcha/themes/wireframe.min.css");
+			return;
+	}
+}
+
+export { importTheme, mountWithStrategy };

package/dist/index.js

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

package/dist/integration.d.ts

@@ -1,39 +1,45 @@
-import { Algorithm, AltchaWidgetName, AstroAltchaConfig } from "./types/index.js";
+import { Algorithm, 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): {
+export declare function mergeDefaultConfig(command: "dev" | "build" | "preview" | "sync", options?: AstroAltchaConfig): {
+  readonly setCookie?: {
+    domain?: string;
+    name: string;
+    maxAge: number;
+    path: string;
+    sameSite: "none" | "strict" | "lax";
+    secure: boolean;
+  };
+  readonly defaultName: `${string}astro-altcha${string}`;
+  readonly challengePath: string;
+  readonly challengeExpiresAfterMinutes: number;
   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 keyLength?: number;
+    readonly keyPrefix?: string;
     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 keyLength?: number;
+    readonly keyPrefix?: string;
     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

@@ -2,13 +2,13 @@ import plugin from "./vite-plugin.js";
 import { randomInt } from "altcha-lib";
 import { envField } from "astro/config";
 
-//#region src/integration.ts
+// src/integration.ts
 function integration(options = {}) {
-	const config = mergeDefaultConfig(options);
 	return {
 		name: "astro-altcha",
 		hooks: {
-			"astro:config:setup": ({ injectRoute, updateConfig, addMiddleware }) => {
+			"astro:config:setup": ({ injectRoute, updateConfig, addMiddleware, command }) => {
+				const config = mergeDefaultConfig(command, options);
 				updateConfig({
 					vite: { plugins: [plugin(config)] },
 					env: { schema: { ALTCHA_HMAC_SIGNATURE: envField.string({
@@ -30,11 +30,9 @@ function integration(options = {}) {
 				injectTypes({
 					filename: "types.d.ts",
 					content: `declare module "astro-altcha:config" {
-	export const config: Required<
-	  import("astro-altcha/types").ResolvedAstroAltchaConfig<
-			import("astro-altcha/types").Algorithm
-	  >
-  >;
+	export const config: import("astro-altcha/types").ResolvedAstroAltchaConfig<
+		import("astro-altcha/types").Algorithm
+  >
 }
 
 declare namespace App {
@@ -74,20 +72,29 @@ export {};
 		}
 	};
 }
-function mergeDefaultConfig(options = {}) {
+function mergeDefaultConfig(command, options = {}) {
+	const defaultName = options.defaultName ?? "astro-altcha";
+	const challengeExpiresAfterMinutes = options.challengeExpiresAfterMinutes ?? 20;
+	const setCookie = !options.setCookie ? void 0 : {
+		name: defaultName,
+		maxAge: challengeExpiresAfterMinutes * 60,
+		path: "/",
+		sameSite: "lax",
+		secure: command !== "dev",
+		...options.setCookie === true ? {} : options.setCookie
+	};
 	return {
-		defaultName: "astro-altcha",
-		challengePath: "/api/altcha/challenge",
-		challengeExpiresAfterMinutes: 20,
-		...options,
+		defaultName,
+		challengePath: options.challengePath ?? "/api/altcha/challenge",
+		challengeExpiresAfterMinutes,
 		challengeOptions: {
 			algorithm: "PBKDF2/SHA-256",
 			cost: 5e3,
 			counter: randomInt(5e3, 1e4),
 			...options.challengeOptions
-		}
+		},
+		...setCookie ? { setCookie } : {}
 	};
 }
 
-//#endregion
 export { integration, mergeDefaultConfig };

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { CreateChallengeOptions } from "altcha-lib/types";
 import { WidgetAttributes } from "altcha/types";
-//#region src/types/index.d.ts
+import { SetCookieOptions } from "altcha/lib";
 export type AltchaWidgetName = `${string}astro-altcha${string}`;
 export type Algorithm = `PBKDF2/${Digest}` | "Argon2id" | "Scrypt" | Digest;
 type Digest = `SHA-${"256" | "384" | "512"}`;
@@ -8,35 +8,43 @@ export type AstroAltchaConfig = {
   /**
    * Default altcha-widget name. Must contain the string `astro-altcha`.
    *
-   * Default: `astro-altcha`
+   * @default astro-altcha
    */
   defaultName?: AltchaWidgetName;
   /**
    *  Path of the challenge API endpoint.
    *
-   * Default: `/api/altcha/challenge`
+   * @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)
-   * ```
+   * @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
+   * @default 20
    */
   challengeExpiresAfterMinutes?: number;
+  /**
+   * Use cookies instead of an invisible input field
+   *
+   * @default { name: "astro-altcha", maxAge: 1200, path: "/", sameSite: "lax", secure: command !== "dev" }
+   */
+  setCookie?: true | (SetCookieOptions & {
+    sameSite?: "lax" | "strict" | "none";
+  });
 };
-export type ResolvedAstroAltchaConfig<Algo extends Algorithm> = Required<AstroAltchaConfig> & {
+export type ResolvedSetCookieOptions = WithRequired<SetCookieOptions & {
+  sameSite?: "lax" | "strict" | "none";
+}, "name" | "maxAge" | "path" | "sameSite" | "secure">;
+export type ResolvedAstroAltchaConfig<Algo extends Algorithm> = Required<Omit<AstroAltchaConfig, "setCookie">> & {
   challengeOptions: AltchaChallengeOptions<Algo>;
+  setCookie?: ResolvedSetCookieOptions;
 };
 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]; };
@@ -46,21 +54,48 @@ export type AltchaChallengeOptions<Algo extends Algorithm> = Algo extends "Argon
 } : 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
+export type AstroAltchaHydrationStrategy = "onfocus" | "onload" | "onvisible";
+export type AltchaWidgetProps = {
+  /**
+   * When the altcha-widget should be hydrated.
+   * - onfocus` - when the form is first focused
+   * - `onload` - when the page first loads
+   * - `onvisible` - when the form becomes visible in the viewport (uses IntersectionObserver)
    *
-   * `onload` - when the page first loads
+   * @default onload
+   */
+  hydrationStrategy?: AstroAltchaHydrationStrategy;
+  /**
+   * Select a theme from https://altcha.org/docs/integration/widget-customization/.
+   */
+  theme?: AltchaWidgetTheme;
+  /**
+   * Enable debug mode for altcha widget.
    */
-  hydrationStrategy?: "onfocus" | "onload";
   debug?: boolean;
-} & Omit<WidgetAttributes, "name">;
+} & Omit<WidgetAttributes, "name" | "theme">;
+export type AltchaWidgetTheme = "aqua" | "business" | "caramel" | "cupcake" | "cyberpunk" | "lime" | "wireframe";
 export type AltchaFormProps = {
-  widget?: AltchaFormWidgetProps & {
+  widget?: AltchaWidgetProps & {
     name?: AltchaWidgetName;
   };
 } & astroHTML.JSX.FormHTMLAttributes;
-//#endregion
+export type AltchaObfuscationProps = {
+  /**
+   * Plain data to be obfuscated.
+   *
+   * It follows the same rules as a plain altcha-widget, i.e. it recognizes links and automatically
+   * inserts the appropriate element on deobfuscation. You do not need to include markup.
+   *
+   */
+  data: string;
+  /**
+   * When the altcha-widget should be hydrated.
+   * - `onload` - when the page first loads
+   * - `onvisible` - when the widget becomes visible in the viewport (uses IntersectionObserver)
+   *
+   * @default onvisible
+   */
+  hydrationStrategy?: Exclude<AstroAltchaHydrationStrategy, "onfocus">;
+} & Omit<AltchaWidgetProps, "hydrationStrategy">;
 export {};

package/dist/vite-plugin.d.ts

@@ -1,6 +1,4 @@
 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

@@ -1,4 +1,4 @@
-//#region src/vite-plugin.ts
+// src/vite-plugin.ts
 const virtualModuleId = "astro-altcha:config";
 const resolvedVirtualModuleId = `\0${virtualModuleId}`;
 const plugin = (config) => {
@@ -14,5 +14,4 @@ ${JSON.stringify(config)}`;
 	};
 };
 
-//#endregion
 export { plugin as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-altcha",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "Altcha integration for Astro",
   "type": "module",
   "sideEffects": false,
@@ -49,8 +49,9 @@
     "astro": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@astrojs/check": "0.9.10",
-    "tsdown": "0.23.1"
+    "@astrojs/check": "0.9.12",
+    "tsdown": "0.23.5",
+    "vite": "^8.3.4"
   },
   "dependencies": {
     "altcha": "^3.2.3",
@@ -60,7 +61,12 @@
   "scripts": {
     "dev": "tsdown --watch",
     "build": "tsdown",
+    "prets:check": "pnpm build",
     "ts:check": "pnpm astro check",
+    "pretest": "pnpm build",
+    "pretest:ci": "pnpm build",
+    "pretest:watch": "pnpm build:",
+    "pretest:update-snapshots": "pnpm build",
     "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'",

package/src/components/AltchaForm.astro

@@ -18,66 +18,70 @@ const {
 
 <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})}
-	/>
+	<template
+		data-astro-altcha="form-widget"
+		data-hydration-strategy={hydrationStrategy}
+		data-debug={debug}
+	>
+		<altcha-widget {name} {challenge} {...widgetProps}></altcha-widget>
+	</template>
 </form>
 
 <script>
 import type { WidgetAttributes, WidgetMethods } from "altcha/types";
-import type { AstroAltchaHydrationStrategy } from "astro-altcha/types";
+import type {
+	AltchaWidgetTheme,
+	AstroAltchaHydrationStrategy,
+} from "astro-altcha/types";
+import { importTheme, mountWithStrategy } from "./common.ts";
 
-const altchaWidgets = document.querySelectorAll("altcha-widget");
+const templates = document.querySelectorAll("template");
 
-for (const widget of altchaWidgets) {
-	if (widget.getAttribute("data-astro-altcha") !== "astro-altcha-form-widget") {
+for (const template of templates) {
+	if (template.dataset.astroAltcha !== "form-widget") {
 		continue;
 	}
 
-	const form = widget.closest("form");
+	const form = template.closest("form");
 	if (!form) {
-		throw new Error("Widget must be placed inside a form element");
+		continue;
 	}
 
-	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,
-		});
+	const { hydrationStrategy, debug } = template.dataset;
+	const widget = template.content.querySelector("altcha-widget");
+	if (!widget) {
+		continue;
 	}
+
+	const theme = widget.getAttribute("theme") as AltchaWidgetTheme | null;
+
+	mountWithStrategy(
+		hydrationStrategy as AstroAltchaHydrationStrategy,
+		form,
+		() => mountWidget(form, template, widget, debug === "true", theme),
+	);
 }
 
-async function loadAltcha(
+async function mountWidget(
 	form: HTMLFormElement,
-	widget: WidgetAttributes & WidgetMethods & HTMLElement,
+	template: HTMLTemplateElement,
+	widget: HTMLElement & WidgetAttributes & WidgetMethods,
 	debug: boolean,
+	theme?: AltchaWidgetTheme | null,
 ) {
+	const widgetReady = new Promise<void>((resolve) =>
+		widget.addEventListener("load", () => resolve(), { once: true }),
+	);
+
+	await importTheme(theme);
 	await import("altcha");
-	widget.configure({ debug });
 
-	const configureEvent = new CustomEvent("astro-altcha:init", {
-		detail: { widget },
-	});
-	form.dispatchEvent(configureEvent);
+	template.replaceWith(widget);
+	await widgetReady;
+
+	widget.configure({ debug });
+	form.dispatchEvent(
+		new CustomEvent("astro-altcha:init", { detail: { widget } }),
+	);
 }
 </script>

package/src/components/AltchaObfuscationWidget.astro

@@ -1,21 +1,94 @@
 ---
-import type { WidgetAttributes } from "altcha/types";
 import { obfuscate } from "altcha-lib/obfuscation";
+import type { AltchaObfuscationProps } from "astro-altcha/types";
 
-type Props = {
-	data: string;
-} & WidgetAttributes;
+type Props = AltchaObfuscationProps;
 
-const { data, display = "floating" } = Astro.props;
+const {
+	data,
+	hydrationStrategy = "onvisible",
+	debug,
+	display = "floating",
+	...widgetProps
+} = Astro.props;
 const dataObfuscated = await obfuscate(data);
 ---
 
-<altcha-widget data-obfuscated={dataObfuscated} {display}>
-	<slot name="reveal">
+<template
+	data-astro-altcha="obfuscation-widget"
+	data-hydration-strategy={hydrationStrategy}
+	data-debug={debug}
+>
+	<altcha-widget
+		data-obfuscated={dataObfuscated}
+		{display}
+		{...widgetProps}
+	></altcha-widget>
+</template>
+<span>
+	<slot>
 		<button type="button">Click to reveal</button>
 	</slot>
-</altcha-widget>
+</span>
 
 <script>
-import "altcha/plugins/obfuscation";
+import type { WidgetAttributes, WidgetMethods } from "altcha/lib";
+import type {
+	AltchaWidgetTheme,
+	AstroAltchaHydrationStrategy,
+} from "astro-altcha/types";
+import { importTheme, mountWithStrategy } from "./common.ts";
+
+const templates = document.querySelectorAll("template");
+
+for (const template of templates) {
+	if (template.dataset.astroAltcha !== "obfuscation-widget") {
+		continue;
+	}
+
+	const trigger = template.nextElementSibling;
+	const widget = template.content.querySelector("altcha-widget");
+	if (!(trigger instanceof HTMLElement) || !widget) {
+		continue;
+	}
+
+	const { hydrationStrategy, debug } = template.dataset;
+	const theme = widget.getAttribute("theme") as AltchaWidgetTheme | null;
+
+	mountWithStrategy(
+		hydrationStrategy as AstroAltchaHydrationStrategy,
+		trigger,
+		() => mountWidget(template, trigger, widget, debug === "true", theme),
+	);
+}
+
+async function mountWidget(
+	template: HTMLTemplateElement,
+	trigger: Element,
+	widget: HTMLElement & WidgetAttributes & WidgetMethods,
+	debug: boolean,
+	theme?: AltchaWidgetTheme | null,
+) {
+	const widgetReady = new Promise<void>((resolve) =>
+		widget.addEventListener("load", () => resolve(), { once: true }),
+	);
+
+	await importTheme(theme);
+	await import("altcha/plugins/obfuscation");
+	await import("altcha");
+
+	// move the trigger into the widget
+	widget.append(trigger);
+	template.replaceWith(widget);
+
+	await widgetReady;
+
+	widget.configure({ debug });
+	widget.dispatchEvent(
+		new CustomEvent("astro-altcha:init", {
+			detail: { widget },
+			bubbles: true,
+		}),
+	);
+}
 </script>

package/src/components/common.ts

@@ -0,0 +1,63 @@
+import type {
+	AltchaWidgetTheme,
+	AstroAltchaHydrationStrategy,
+} from "astro-altcha/types";
+
+export function mountWithStrategy(
+	strategy: AstroAltchaHydrationStrategy,
+	element: HTMLElement,
+	mount: () => void,
+) {
+	switch (strategy) {
+		case "onload":
+			void mount();
+			return;
+		case "onfocus":
+			element.addEventListener("focusin", mount, { once: true });
+			return;
+		case "onvisible": {
+			const observer = new IntersectionObserver(
+				(entries, observer) => {
+					if (!entries.some((entry) => entry.isIntersecting)) {
+						return;
+					}
+					observer.disconnect();
+					void mount();
+				},
+				{ rootMargin: "200px 0px" },
+			);
+			observer.observe(element);
+			return;
+		}
+	}
+}
+
+export async function importTheme(theme?: AltchaWidgetTheme | null) {
+	if (!theme) {
+		return;
+	}
+
+	switch (theme) {
+		case "aqua":
+			await import("altcha/themes/aqua.min.css");
+			return;
+		case "business":
+			await import("altcha/themes/business.min.css");
+			return;
+		case "caramel":
+			await import("altcha/themes/caramel.min.css");
+			return;
+		case "cupcake":
+			await import("altcha/themes/cupcake.min.css");
+			return;
+		case "cyberpunk":
+			await import("altcha/themes/cyberpunk.min.css");
+			return;
+		case "lime":
+			await import("altcha/themes/lime.min.css");
+			return;
+		case "wireframe":
+			await import("altcha/themes/wireframe.min.css");
+			return;
+	}
+}