feat: add honeypots and (mostly) invisible PoW captchas to highly spam prone forms

.test/setup-env.js

@@ -17,6 +17,7 @@ process.env.ALGOLIA_ID = 'ooo';
 process.env.ALGOLIA_KEY = 'ooo';
 process.env.ALGOLIA_SEARCH_KEY = 'ooo';
 process.env.JWT_SIGNING_SECRET = 'shhhhhh';
+process.env.BYPASS_CAPTCHA = 'true';
 process.env.FIREBASE_TEST_DB_URL = 'http://localhost:9875?ns=pubpub-v6';
 process.env.ZOTERO_CLIENT_KEY = 'abc';
 process.env.ZOTERO_CLIENT_SECRET = 'def';

client/components/Altcha/Altcha.tsx

@@ -0,0 +1,199 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+import { usePageContext } from 'utils/hooks';
+
+export type AltchaRef = {
+	value: string | null;
+	verify: () => Promise<string>;
+};
+
+type AltchaProps = {
+	challengeurl?: string;
+	auto?: 'off' | 'onfocus' | 'onload' | 'onsubmit';
+	onStateChange?: (ev: Event | CustomEvent<{ payload?: string; state: string }>) => void;
+	style?: React.CSSProperties & Record<string, string>;
+};
+
+const DEFAULT_CHALLENGE_URL = '/api/captcha/challenge';
+
+type WidgetElement = HTMLElement & AltchaWidgetMethods;
+
+const Altcha = forwardRef<AltchaRef, AltchaProps>((props, ref) => {
+	const { challengeurl = DEFAULT_CHALLENGE_URL, auto, onStateChange, style } = props;
+	const { locationData } = usePageContext();
+	const devMode = !locationData.isProd;
+	const widgetRef = useRef<WidgetElement | null>(null);
+	const [value, setValue] = useState<string | null>(null);
+	const [loaded, setLoaded] = useState(false);
+	const [simulateFailure, setSimulateFailure] = useState(false);
+	const [widgetKey, setWidgetKey] = useState(0);
+	const valueRef = useRef<string | null>(null);
+	valueRef.current = value;
+
+	useEffect(() => {
+		import('altcha').then(() => setLoaded(true));
+	}, []);
+
+	const [altchaVisible, setAltchaVisible] = useState<boolean>(false);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: widgetKey triggers re-attach after remount
+	useEffect(() => {
+		if (!loaded) return;
+		const w = widgetRef.current;
+		if (!w) return;
+		const handleStateChange = (ev: Event) => {
+			const e = ev as CustomEvent<{ payload?: string; state: string }>;
+			console.log('state changed', e.detail);
+
+			switch (e.detail.state) {
+				case 'error':
+				case 'code':
+				case 'unverified':
+					setAltchaVisible(true);
+					break;
+				case 'verifying':
+					if (devMode) {
+						setAltchaVisible(true);
+					}
+					break;
+				case 'verified':
+					if (e.detail.payload) {
+						setValue(e.detail.payload);
+						setAltchaVisible(false);
+					}
+					break;
+				default:
+					break;
+			}
+
+			onStateChange?.(e);
+		};
+		w.addEventListener('statechange', handleStateChange);
+		return () => w.removeEventListener('statechange', handleStateChange);
+	}, [loaded, onStateChange, widgetKey]);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: widgetKey triggers re-bind after remount
+	useImperativeHandle(
+		ref,
+		() => ({
+			get value() {
+				return valueRef.current;
+			},
+			verify(): Promise<string> {
+				const w = widgetRef.current;
+				if (!w) return Promise.reject(new Error('Altcha widget not mounted'));
+				const current = valueRef.current;
+				if (current) return Promise.resolve(current);
+				return new Promise((resolve, reject) => {
+					const handler = (ev: Event) => {
+						const e = ev as CustomEvent<{ payload?: string; state: string }>;
+						const state = e.detail?.state;
+						if (state === 'verified' && e.detail?.payload) {
+							w.removeEventListener('statechange', handler);
+							resolve(e.detail.payload);
+							return;
+						}
+						if (state === 'error' || state === 'expired') {
+							w.removeEventListener('statechange', handler);
+							reject(new Error('Captcha verification failed'));
+						}
+					};
+					w.addEventListener('statechange', handler);
+					w.verify();
+				});
+			},
+		}),
+		[widgetKey],
+	);
+
+	const handleToggleFailure = () => {
+		setSimulateFailure((prev) => !prev);
+		setValue(null);
+		setWidgetKey((k) => k + 1);
+	};
+
+	const handleReset = () => {
+		setValue(null);
+		widgetRef.current?.reset();
+	};
+
+	if (!loaded) return null;
+
+	const devAttrs = devMode ? { debug: true, floatingpersist: 'focus' as const } : {};
+
+	const widget = (
+		<React.Fragment key={widgetKey}>
+			<altcha-widget
+				delay={500}
+				ref={widgetRef as any}
+				challengeurl={challengeurl}
+				{...(auto ? { auto } : {})}
+				floating="auto"
+				{...devAttrs}
+				{...(simulateFailure ? { mockerror: true } : {})}
+				style={{
+					display: altchaVisible ? 'block' : 'none',
+					zIndex: 1000,
+					...(style ? ({ style } as any) : {}),
+				}}
+				// disable very annoying wait alert
+				strings="{&quot;waitAlert&quot;:&quot;&quot;}"
+			/>
+		</React.Fragment>
+	);
+
+	if (!devMode) return widget;
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+				gap: 6,
+				fontSize: 11,
+				color: '#5c7080',
+				padding: '2px 6px',
+				border: '1px dashed #5c7080',
+				borderRadius: 3,
+			}}
+		>
+			{widget}
+			<span style={{ fontWeight: 600 }}>Captcha</span>
+			<label
+				style={{
+					cursor: 'pointer',
+					display: 'inline-flex',
+					alignItems: 'center',
+					gap: 3,
+					color: simulateFailure ? '#db3737' : undefined,
+				}}
+			>
+				<input
+					type="checkbox"
+					checked={simulateFailure}
+					onChange={handleToggleFailure}
+					style={{ margin: 0 }}
+				/>
+				fail
+			</label>
+			<button
+				type="button"
+				onClick={handleReset}
+				style={{
+					fontSize: 11,
+					padding: '1px 6px',
+					cursor: 'pointer',
+					border: '1px solid #ced9e0',
+					borderRadius: 3,
+					background: 'white',
+					lineHeight: '16px',
+				}}
+			>
+				reset
+			</button>
+		</div>
+	);
+});
+
+Altcha.displayName = 'Altcha';
+
+export default Altcha;

client/components/Altcha/index.ts

@@ -0,0 +1 @@
+export { type AltchaRef, default } from './Altcha';

client/components/GlobalControls/CreatePubButton.tsx

@@ -1,35 +1,77 @@
-import React, { useState } from 'react';
+import type * as types from 'types';
+
+import React, { useCallback, useRef, useState } from 'react';
 
 import { apiFetch } from 'client/utils/apiFetch';
+import { Altcha, Honeypot } from 'components';
 import { usePageContext } from 'utils/hooks';
 
 import GlobalControlsButton from './GlobalControlsButton';
 
 const CreatePubButton = () => {
 	const [isLoading, setIsLoading] = useState(false);
+	const formRef = useRef<HTMLFormElement>(null);
+	const altchaRef = useRef<import('components').AltchaRef>(null);
 	const { communityData } = usePageContext();
 
-	const handleCreatePub = () => {
+	const handleCreatePub = useCallback(async () => {
+		if (isLoading) {
+			return;
+		}
+
+		const formElement = formRef.current;
+		if (!formElement) {
+			return;
+		}
+
+		const formData = new FormData(formElement);
+		const honeypot = (formData.get('description') as string) ?? '';
 		setIsLoading(true);
-		return apiFetch
-			.post('/api/pubs', { communityId: communityData.id })
-			.then((newPub) => {
-				window.location.href = `/pub/${newPub.slug}`;
-			})
-			.catch((err) => {
-				console.error(err);
-				setIsLoading(false);
+		try {
+			const altchaPayload = await altchaRef.current?.verify();
+			if (!altchaPayload) return;
+			const newPub = await apiFetch.post<types.Pub>('/api/pubs/fromForm', {
+				communityId: communityData.id,
+				altcha: altchaPayload,
+				_honeypot: honeypot,
 			});
-	};
+			window.location.href = `/pub/${newPub.slug}`;
+		} catch (error) {
+			console.error('Error in handleCreatePub', error);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [communityData.id, isLoading]);
 
 	return (
-		<GlobalControlsButton
-			loading={isLoading}
-			aria-label="Create Pub"
-			onClick={handleCreatePub}
-			desktop={{ text: 'Create Pub' }}
-			mobile={{ icon: 'pubDocNew' }}
-		/>
+		// the form might feel a little superfluous here, but it's necessary form anchoring altcha correctly
+		<form
+			onSubmit={(evt) => {
+				// we don't use the `onSubmit` handler to actually create the pub,
+				// because otherwise the following happens:
+				// 1. click "Create Pub" button
+				// 2. altcha reacts to first interaction with form, stops the event from propagating, and starts verifying
+				// 3. altcha verifies succesfully, but the form is not submitted, so the pub is not created
+				// 4. user needs to click the button again to create the pub
+
+				// this kinda sucks, so instead we just do it through the onClick handler. not really nice form semantics, but should be fine accessibility-wise.
+				evt.preventDefault();
+			}}
+			ref={formRef}
+			// only relevant in dev
+			style={{ display: 'flex', alignItems: 'center', gap: '10px' }}
+		>
+			<Altcha ref={altchaRef} />
+			<Honeypot name="description" />
+			<GlobalControlsButton
+				onClick={handleCreatePub}
+				loading={isLoading}
+				aria-label="Create Pub"
+				type="submit"
+				desktop={{ text: 'Create Pub' }}
+				mobile={{ icon: 'pubDocNew' }}
+			/>
+		</form>
 	);
 };
 

client/components/Honeypot/Honeypot.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { usePageContext } from 'utils/hooks';
+
+import './honeypot.scss';
+
+type HoneypotProps = {
+	name: string;
+};
+
+const Honeypot = (props: HoneypotProps) => {
+	const { name } = props;
+	const { locationData } = usePageContext();
+	const devMode = !locationData.isProd;
+
+	if (devMode) {
+		return (
+			<label
+				style={{
+					display: 'inline-flex',
+					alignItems: 'center',
+					gap: 4,
+					fontSize: 11,
+					color: 'orange',
+					fontWeight: 600,
+					padding: '2px 6px',
+					border: '1px dashed orange',
+					borderRadius: 3,
+				}}
+			>
+				Honeypot
+				<input
+					type="text"
+					name={name}
+					autoComplete="off"
+					style={{ width: 80, fontSize: 11, padding: '1px 4px' }}
+				/>
+			</label>
+		);
+	}
+
+	return (
+		<input
+			type="text"
+			className="honeypot-input"
+			name={name}
+			tabIndex={-1}
+			autoComplete="off"
+			aria-hidden="true"
+		/>
+	);
+};
+
+export default Honeypot;

client/components/Honeypot/honeypot.scss

@@ -0,0 +1,8 @@
+.honeypot-input {
+	position: absolute;
+	left: -9999px;
+	width: 1px;
+	height: 1px;
+	opacity: 0;
+	pointer-events: none;
+}

client/components/Honeypot/index.ts

@@ -0,0 +1 @@
+export { default } from './Honeypot';