feat: add captcha (#53)

Author: omfj

.github/workflows/ci.yaml

@@ -19,6 +19,8 @@ env:
   PUBLIC_VAPID_PUBLIC_KEY: ${{ secrets.PUBLIC_VAPID_PUBLIC_KEY }}
   VAPID_PRIVATE_KEY: ${{ secrets.VAPID_PRIVATE_KEY }}
   VAPID_SUBJECT: "mailto:web@programmerbar.no"
+  PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY: 1x00000000000000000000AA
+  CLOUDFLARE_TURNSTILE_SITE_SECRET: 1x0000000000000000000000000000000AA
 
 jobs:
   ci:

pnpm-lock.yaml

@@ -57,4 +57,14 @@ PUBLIC_GITHUB_SHA="development"
 #
 # Enable Sentry error tracking and performance monitoring
 # --------------------------------------------------------
-SENTRY_AUTH_TOKEN=
+SENTRY_AUTH_TOKEN=
+
+# --------------------------------------------------------
+# Cloudflare Turnstile
+#
+# Site key and secret key for Cloudflare Turnstile CAPTCHA
+# Values for testing can be found at:
+# https://developers.cloudflare.com/turnstile/troubleshooting/testing/
+# --------------------------------------------------------
+PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=1x00000000000000000000AA
+CLOUDFLARE_TURNSTILE_SITE_SECRET=1x0000000000000000000000000000000AA

programmerbar-web/.env.example

@@ -84,6 +84,7 @@
 		"react-dom": "19.2.3",
 		"resend": "6.8.0",
 		"svelte-sonner": "1.0.7",
+		"svelte-turnstile": "^0.11.0",
 		"tailwind-merge": "3.4.0",
 		"web-push": "^3.6.7",
 		"zod": "4.3.6",

programmerbar-web/package.json

@@ -2,6 +2,8 @@
 	import { toast } from 'svelte-sonner';
 	import { createContactSubmissionAction } from '../../../../routes/(app)/common.remote';
 	import CLIWindow from '$lib/components/app/CLIWindow.svelte';
+	import { Turnstile } from 'svelte-turnstile';
+	import { env } from '$env/dynamic/public';
 </script>
 
 <CLIWindow title="nano kontakt.txt" class="h-full">
@@ -53,6 +55,8 @@
 				></textarea>
 			</label>
 
+			<Turnstile siteKey={env.PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY!} class="my-2" />
+
 			<button
 				type="submit"
 				class="border-border bg-card-muted hover:bg-card-hover hover:border-primary focus:border-primary text-foreground-primary w-full border-2 px-4 py-2 text-center font-mono text-sm font-semibold transition-all focus:ring-0 focus:outline-none"

programmerbar-web/src/lib/components/app/landing/ContactForm.svelte

@@ -0,0 +1,28 @@
+import { env } from '$env/dynamic/private';
+
+export const validateTurnstile = async (
+	token: FormDataEntryValue | null,
+	remoteip: string
+): Promise<{ success: boolean; 'error-codes'?: string[] }> => {
+	if (!token) {
+		return { success: false, 'error-codes': ['missing-input-response'] };
+	}
+
+	const formData = new FormData();
+	formData.append('secret', env.CLOUDFLARE_TURNSTILE_SITE_SECRET!);
+	formData.append('response', token);
+	formData.append('remoteip', remoteip);
+
+	try {
+		const response = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+			method: 'POST',
+			body: formData
+		});
+
+		const result = (await response.json()) as { success: boolean; 'error-codes'?: string[] };
+		return result;
+	} catch (error) {
+		console.error('Turnstile validation error:', error);
+		return { success: false, 'error-codes': ['internal-error'] };
+	}
+};

programmerbar-web/src/lib/server/turnstile.ts

@@ -1,4 +1,5 @@
 import { form, getRequestEvent, query } from '$app/server';
+import { validateTurnstile } from '$lib/server/turnstile';
 import { fail } from '@sveltejs/kit';
 import z from 'zod';
 
@@ -45,12 +46,13 @@ const ContanctSubmissionSchema = z.object({
 	// Actual fields
 	namekjkj: z.string().min(1, 'Name is required'),
 	emailkjkj: z.email('Invalid email address'),
-	messagekjkj: z.string().min(1, 'Message is required')
+	messagekjkj: z.string().min(1, 'Message is required'),
+	'cf-turnstile-response': z.string().min(1, 'CAPTCHA verification is required')
 });
 
 export const createContactSubmissionAction = form(
 	ContanctSubmissionSchema,
-	async ({ name, email, namekjkj, emailkjkj, messagekjkj }) => {
+	async ({ name, email, namekjkj, emailkjkj, messagekjkj, 'cf-turnstile-response': token }) => {
 		const event = getRequestEvent();
 		const { locals, getClientAddress } = event;
 		const ip = getClientAddress();
@@ -61,6 +63,12 @@ export const createContactSubmissionAction = form(
 			return fail(400, { success: false });
 		}
 
+		const validation = await validateTurnstile(token, ip);
+		if (!validation.success) {
+			console.log(`[ContactForm] 🚫 Turnstile validation failed from IP: ${ip}`);
+			return fail(400, { success: false, error: 'CAPTCHA verification failed' });
+		}
+
 		// Check for spam in message content
 		if (isSpamMessage(messagekjkj)) {
 			console.log(`[ContactForm] 🚫 Spam detected from IP: ${ip}`);