Turnstile implementation

Author: jahooma

.env.example

@@ -33,6 +33,10 @@ DISCORD_PUBLIC_KEY=dummy_discord_public_key
 DISCORD_BOT_TOKEN=dummy_discord_bot_token
 DISCORD_APPLICATION_ID=dummy_discord_app_id
 
+# Cloudflare Turnstile (optional — bot protection on signup)
+TURNSTILE_SECRET_KEY=dummy_turnstile_secret_key
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=dummy_turnstile_site_key
+
 # Frontend/Public Variables
 NEXT_PUBLIC_CB_ENVIRONMENT=dev
 NEXT_PUBLIC_CODEBUFF_APP_URL=http://localhost:3000

common/src/env-schema.ts

@@ -11,6 +11,7 @@ export const clientEnvSchema = z.object({
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().min(1),
   NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL: z.url().min(1),
   NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION_ID: z.string().optional(),
+  NEXT_PUBLIC_TURNSTILE_SITE_KEY: z.string().optional(),
   NEXT_PUBLIC_WEB_PORT: z.coerce.number().min(1000),
 } satisfies Record<`${typeof CLIENT_ENV_PREFIX}${string}`, any>)
 export const clientEnvVars = clientEnvSchema.keyof().options
@@ -33,5 +34,6 @@ export const clientProcessEnv: ClientInput = {
     process.env.NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL,
   NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION_ID:
     process.env.NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION_ID,
+  NEXT_PUBLIC_TURNSTILE_SITE_KEY: process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY,
   NEXT_PUBLIC_WEB_PORT: process.env.NEXT_PUBLIC_WEB_PORT,
 }

freebuff/web/src/app/api/auth/verify-turnstile/route.ts

@@ -0,0 +1,78 @@
+import crypto from 'crypto'
+
+import { env } from '@codebuff/internal/env'
+import { NextResponse } from 'next/server'
+import { z } from 'zod/v4'
+
+import type { NextRequest } from 'next/server'
+
+import { logger } from '@/util/logger'
+
+const TURNSTILE_VERIFY_URL =
+  'https://challenges.cloudflare.com/turnstile/v0/siteverify'
+
+export async function POST(request: NextRequest) {
+  const secretKey = env.TURNSTILE_SECRET_KEY
+  if (!secretKey) {
+    return NextResponse.json({ success: true })
+  }
+
+  const body = await request.json()
+  const parsed = z.object({ token: z.string().min(1) }).safeParse(body)
+
+  if (!parsed.success) {
+    return NextResponse.json(
+      { success: false, error: 'Invalid token' },
+      { status: 400 },
+    )
+  }
+
+  const formData = new FormData()
+  formData.append('secret', secretKey)
+  formData.append('response', parsed.data.token)
+
+  const ip =
+    request.headers.get('CF-Connecting-IP') ??
+    request.headers.get('X-Forwarded-For') ??
+    ''
+  if (ip) {
+    formData.append('remoteip', ip)
+  }
+
+  const result = await fetch(TURNSTILE_VERIFY_URL, {
+    method: 'POST',
+    body: formData,
+  })
+  const outcome = (await result.json()) as {
+    success: boolean
+    'error-codes'?: string[]
+  }
+
+  if (!outcome.success) {
+    logger.warn(
+      { errorCodes: outcome['error-codes'] },
+      'Turnstile verification failed',
+    )
+    return NextResponse.json(
+      { success: false, error: 'Verification failed' },
+      { status: 403 },
+    )
+  }
+
+  const timestamp = Date.now().toString()
+  const signature = crypto
+    .createHmac('sha256', env.NEXTAUTH_SECRET)
+    .update(timestamp)
+    .digest('hex')
+
+  const response = NextResponse.json({ success: true })
+  response.cookies.set('turnstile_verified', `${timestamp}.${signature}`, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'lax',
+    maxAge: 300,
+    path: '/',
+  })
+
+  return response
+}

freebuff/web/src/components/login/login-card.tsx

@@ -3,9 +3,10 @@
 import Image from 'next/image'
 import { useSearchParams } from 'next/navigation'
 import { useSession, signIn } from 'next-auth/react'
-import { Suspense } from 'react'
+import { Suspense, useCallback, useRef, useState } from 'react'
 
 import { SignInCardFooter } from '@/components/sign-in/sign-in-card-footer'
+import { TurnstileWidget } from '@/components/turnstile-widget'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -15,9 +16,48 @@ import {
   CardFooter,
 } from '@/components/ui/card'
 
+const TURNSTILE_SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
+
 export function LoginCard({ authCode }: { authCode?: string | null }) {
   const { data: session } = useSession()
   const searchParams = useSearchParams() ?? new URLSearchParams()
+  const [turnstileVerified, setTurnstileVerified] = useState(
+    !TURNSTILE_SITE_KEY,
+  )
+  const [turnstileError, setTurnstileError] = useState<string | null>(null)
+  const turnstileErrorShownRef = useRef(false)
+
+  const handleTurnstileVerify = useCallback(async (token: string) => {
+    try {
+      const response = await fetch('/api/auth/verify-turnstile', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token }),
+      })
+      const result = await response.json()
+      if (result.success) {
+        setTurnstileVerified(true)
+        setTurnstileError(null)
+        turnstileErrorShownRef.current = false
+      } else {
+        setTurnstileError('Verification failed. Please refresh and try again.')
+      }
+    } catch {
+      setTurnstileError('Verification failed. Please refresh and try again.')
+    }
+  }, [])
+
+  const handleTurnstileError = useCallback((errorCode: string) => {
+    console.error('Turnstile error:', errorCode)
+    if (!turnstileErrorShownRef.current) {
+      turnstileErrorShownRef.current = true
+      setTurnstileError('Verification error. Please refresh and try again.')
+    }
+  }, [])
+
+  const handleTurnstileExpired = useCallback(() => {
+    setTurnstileVerified(false)
+  }, [])
 
   const handleContinueAsUser = () => {
     const referralCode = searchParams.get('referral_code')
@@ -129,7 +169,22 @@ export function LoginCard({ authCode }: { authCode?: string | null }) {
                 </CardFooter>
               </>
             ) : (
-              <SignInCardFooter />
+              <>
+                {TURNSTILE_SITE_KEY && (
+                  <CardContent className="flex flex-col items-center gap-2">
+                    <TurnstileWidget
+                      siteKey={TURNSTILE_SITE_KEY}
+                      onVerify={handleTurnstileVerify}
+                      onError={handleTurnstileError}
+                      onExpired={handleTurnstileExpired}
+                    />
+                    {turnstileError && (
+                      <p className="text-sm text-red-400">{turnstileError}</p>
+                    )}
+                  </CardContent>
+                )}
+                <SignInCardFooter disabled={!turnstileVerified} />
+              </>
             )}
           </Card>
         </Suspense>

freebuff/web/src/components/sign-in/sign-in-button.tsx

@@ -12,9 +12,11 @@ import type { OAuthProviderType } from 'next-auth/providers/oauth-types'
 export function SignInButton({
   providerName,
   providerDomain,
+  disabled,
 }: {
   providerName: OAuthProviderType
   providerDomain: string
+  disabled?: boolean
 }) {
   const [isPending, startTransition] = useTransition()
   const pathname = usePathname()
@@ -52,7 +54,7 @@ export function SignInButton({
   return (
     <Button
       onClick={handleSignIn}
-      disabled={isPending}
+      disabled={isPending || disabled}
       className="flex items-center gap-2 w-full bg-zinc-900 border border-zinc-700 text-white hover:bg-zinc-800 hover:border-acid-matrix/60 hover:shadow-[0_0_20px_rgba(124,255,63,0.15)] transition-all duration-300"
     >
       {isPending ? (

freebuff/web/src/components/sign-in/sign-in-card-footer.tsx

@@ -1,10 +1,10 @@
 import { SignInButton } from './sign-in-button'
 import { CardFooter } from '../ui/card'
 
-export function SignInCardFooter() {
+export function SignInCardFooter({ disabled }: { disabled?: boolean }) {
   return (
     <CardFooter className="flex flex-col space-y-3 pb-8">
-      <SignInButton providerDomain="github.com" providerName="github" />
+      <SignInButton providerDomain="github.com" providerName="github" disabled={disabled} />
     </CardFooter>
   )
 }

freebuff/web/src/components/turnstile-widget.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import Script from 'next/script'
+import { useEffect, useRef, useState } from 'react'
+
+export function TurnstileWidget({
+  siteKey,
+  onVerify,
+  onError,
+  onExpired,
+}: {
+  siteKey: string
+  onVerify: (token: string) => void
+  onError: (errorCode: string) => void
+  onExpired: () => void
+}) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const widgetIdRef = useRef<string | undefined>(undefined)
+  const onVerifyRef = useRef(onVerify)
+  const onErrorRef = useRef(onError)
+  const onExpiredRef = useRef(onExpired)
+  onVerifyRef.current = onVerify
+  onErrorRef.current = onError
+  onExpiredRef.current = onExpired
+
+  const [scriptLoaded, setScriptLoaded] = useState(false)
+
+  useEffect(() => {
+    if (
+      !scriptLoaded ||
+      !containerRef.current ||
+      !window.turnstile ||
+      widgetIdRef.current !== undefined
+    ) {
+      return
+    }
+
+    widgetIdRef.current = window.turnstile.render(containerRef.current, {
+      sitekey: siteKey,
+      callback: (token: string) => onVerifyRef.current(token),
+      'error-callback': (errorCode: string) => onErrorRef.current(errorCode),
+      'expired-callback': () => onExpiredRef.current(),
+    })
+
+    return () => {
+      if (widgetIdRef.current !== undefined && window.turnstile) {
+        window.turnstile.remove(widgetIdRef.current)
+        widgetIdRef.current = undefined
+      }
+    }
+  }, [scriptLoaded, siteKey])
+
+  return (
+    <>
+      <link rel="preconnect" href="https://challenges.cloudflare.com" />
+      <Script
+        src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+        onLoad={() => setScriptLoaded(true)}
+      />
+      <div ref={containerRef} />
+    </>
+  )
+}

freebuff/web/src/middleware.ts

@@ -0,0 +1,67 @@
+import { NextResponse } from 'next/server'
+
+import type { NextRequest } from 'next/server'
+
+const COOKIE_MAX_AGE_MS = 5 * 60 * 1000 // 5 minutes
+
+async function verifyHmac(
+  timestamp: string,
+  signature: string,
+  secret: string,
+): Promise<boolean> {
+  const encoder = new TextEncoder()
+  const key = await crypto.subtle.importKey(
+    'raw',
+    encoder.encode(secret),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign'],
+  )
+  const signed = await crypto.subtle.sign('HMAC', key, encoder.encode(timestamp))
+  const expected = Array.from(new Uint8Array(signed))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+  return expected === signature
+}
+
+export async function middleware(request: NextRequest) {
+  const turnstileSecret = process.env.TURNSTILE_SECRET_KEY
+  const nextauthSecret = process.env.NEXTAUTH_SECRET
+
+  if (!turnstileSecret || !nextauthSecret) {
+    return NextResponse.next()
+  }
+
+  const cookie = request.cookies.get('turnstile_verified')?.value
+  if (!cookie) {
+    const loginUrl = new URL('/login', request.url)
+    request.nextUrl.searchParams.forEach((value, key) => {
+      loginUrl.searchParams.set(key, value)
+    })
+    return NextResponse.redirect(loginUrl)
+  }
+
+  const [timestamp, signature] = cookie.split('.')
+  if (!timestamp || !signature) {
+    const loginUrl = new URL('/login', request.url)
+    return NextResponse.redirect(loginUrl)
+  }
+
+  const age = Date.now() - parseInt(timestamp, 10)
+  if (isNaN(age) || age > COOKIE_MAX_AGE_MS) {
+    const loginUrl = new URL('/login', request.url)
+    return NextResponse.redirect(loginUrl)
+  }
+
+  const valid = await verifyHmac(timestamp, signature, nextauthSecret)
+  if (!valid) {
+    const loginUrl = new URL('/login', request.url)
+    return NextResponse.redirect(loginUrl)
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: ['/api/auth/signin/:path*'],
+}

freebuff/web/src/types/turnstile.d.ts

@@ -0,0 +1,25 @@
+interface TurnstileRenderOptions {
+  sitekey: string
+  callback: (token: string) => void
+  'error-callback'?: (errorCode: string) => void
+  'expired-callback'?: () => void
+  theme?: 'light' | 'dark' | 'auto'
+  size?: 'normal' | 'flexible' | 'compact'
+  action?: string
+  execution?: 'render' | 'execute'
+  appearance?: 'always' | 'execute' | 'interaction-only'
+}
+
+interface TurnstileInstance {
+  render: (container: HTMLElement | string, options: TurnstileRenderOptions) => string
+  reset: (widgetId: string) => void
+  remove: (widgetId: string) => void
+  getResponse: (widgetId: string) => string | undefined
+  isExpired: (widgetId: string) => boolean
+  ready: (callback: () => void) => void
+  execute: (container: HTMLElement | string) => void
+}
+
+interface Window {
+  turnstile?: TurnstileInstance
+}

packages/internal/src/env-schema.ts

@@ -30,6 +30,7 @@ export const serverEnvSchema = clientEnvSchema.extend({
   DISCORD_PUBLIC_KEY: z.string().min(1),
   DISCORD_BOT_TOKEN: z.string().min(1),
   DISCORD_APPLICATION_ID: z.string().min(1),
+  TURNSTILE_SECRET_KEY: z.string().optional(),
 })
 export const serverEnvVars = serverEnvSchema.keyof().options
 export type ServerEnvVar = (typeof serverEnvVars)[number]
@@ -75,4 +76,5 @@ export const serverProcessEnv: ServerInput = {
   DISCORD_PUBLIC_KEY: process.env.DISCORD_PUBLIC_KEY,
   DISCORD_BOT_TOKEN: process.env.DISCORD_BOT_TOKEN,
   DISCORD_APPLICATION_ID: process.env.DISCORD_APPLICATION_ID,
+  TURNSTILE_SECRET_KEY: process.env.TURNSTILE_SECRET_KEY,
 }