chore: add captcha ui component

Author: psmyrdek

.env.example

@@ -3,6 +3,9 @@ PUBLIC_ENV_NAME=###
 SUPABASE_URL=https://PROJECT_ID.supabase.co
 SUPABASE_PUBLIC_KEY=###
 
+CF_CAPTCHA_SITE_KEY=###
+CF_CAPTCHA_SECRET_KEY=###
+
 # Include in .env.test
 E2E_USERNAME_ID=###
 E2E_USERNAME=###

README.md

@@ -37,6 +37,36 @@ Create so called "rules for AI" written in Markdown, used by tools such as GitHu
    ```bash
    npm run build
    ```
+## Local Supabase Setup
+
+1. Install Supabase CLI
+
+   ```bash
+   brew install supabase
+   ```
+
+2. Start Supabase (requires local Docker)
+
+   ```bash
+   supabase start
+   ```
+
+3. Verify Supabase is running
+
+   ```bash
+   supabase status
+   ```
+
+## Dotenv
+
+Create `.env.local` file and add the following variables:
+
+```bash
+PUBLIC_ENV_NAME=local
+SUPABASE_URL=http://localhost:54321
+SUPABASE_PUBLIC_KEY=your_supabase_anon_key
+SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
+```
 
 ## Tech Stack
 

astro.config.mjs

@@ -16,6 +16,12 @@ export default defineConfig({
       SUPABASE_URL: envField.string({ context: 'server', access: 'secret' }),
       SUPABASE_PUBLIC_KEY: envField.string({ context: 'server', access: 'secret' }),
       SUPABASE_SERVICE_ROLE_KEY: envField.string({ context: 'server', access: 'secret' }),
+      CF_CAPTCHA_SITE_KEY: envField.string({
+        context: 'server',
+        access: 'public',
+        default: '1x00000000000000000000AA',
+      }),
+      CF_CAPTCHA_SECRET_KEY: envField.string({ context: 'server', access: 'secret' }),
     },
   },
   vite: {

package-lock.json

@@ -32,6 +32,7 @@
     "@tailwindcss/vite": "4.0.14",
     "@types/react-dom": "18.3.5",
     "astro": "^5.5.2",
+    "axios": "1.9.0",
     "clsx": "^2.1.1",
     "fflate": "^0.8.2",
     "lucide-react": "0.479.0",

package.json

@@ -7,7 +7,11 @@ import { loginSchema } from '../../types/auth';
 import type { LoginFormData } from '../../types/auth';
 import { useAuth } from '../../hooks/useAuth';
 
-export const LoginForm: React.FC = () => {
+interface LoginFormProps {
+  cfCaptchaSiteKey: string;
+}
+
+export const LoginForm: React.FC<LoginFormProps> = ({ cfCaptchaSiteKey }) => {
   const { login, error: apiError, isLoading } = useAuth();
   const {
     register,
@@ -55,6 +59,10 @@ export const LoginForm: React.FC = () => {
         {...register('password')}
       />
 
+      <div className="flex flex-row justify-center">
+        <div className="cf-turnstile" data-sitekey={cfCaptchaSiteKey} data-size="normal"></div>
+      </div>
+
       <div className="flex items-center justify-between">
         <div className="text-sm">
           <a

src/components/auth/LoginForm.tsx

@@ -7,7 +7,11 @@ import { resetPasswordSchema } from '../../types/auth';
 import type { ResetPasswordFormData } from '../../types/auth';
 import { useAuth } from '../../hooks/useAuth';
 
-export const ResetPasswordForm: React.FC = () => {
+interface ResetPasswordFormProps {
+  cfCaptchaSiteKey: string;
+}
+
+export const ResetPasswordForm: React.FC<ResetPasswordFormProps> = ({ cfCaptchaSiteKey }) => {
   const { resetPassword, error: apiError, isLoading } = useAuth();
   const [error, setError] = useState<string | null>(null);
   const {
@@ -78,6 +82,10 @@ export const ResetPasswordForm: React.FC = () => {
         {...register('email')}
       />
 
+      <div className="flex flex-row justify-center">
+        <div className="cf-turnstile" data-sitekey={cfCaptchaSiteKey} data-size="normal"></div>
+      </div>
+
       <button
         type="submit"
         disabled={isLoading}

src/components/auth/ResetPasswordForm.tsx

@@ -7,7 +7,11 @@ import { signupSchema } from '../../types/auth';
 import type { SignupFormData } from '../../types/auth';
 import { useAuth } from '../../hooks/useAuth';
 
-export const SignupForm: React.FC = () => {
+interface SignupFormProps {
+  cfCaptchaSiteKey: string;
+}
+
+export const SignupForm: React.FC<SignupFormProps> = ({ cfCaptchaSiteKey }) => {
   const { signup, error: apiError, isLoading } = useAuth();
   const {
     register,
@@ -83,6 +87,10 @@ export const SignupForm: React.FC = () => {
         {...register('confirmPassword')}
       />
 
+      <div className="flex flex-row justify-center">
+        <div className="cf-turnstile" data-sitekey={cfCaptchaSiteKey} data-size="normal"></div>
+      </div>
+
       <div className="space-y-2">
         <div className="flex items-start">
           <div className="flex items-center h-5">

src/components/auth/SignupForm.tsx

@@ -21,6 +21,8 @@ interface ImportMetaEnv {
   readonly SUPABASE_URL: string;
   readonly SUPABASE_PUBLIC_KEY: string;
   readonly SUPABASE_SERVICE_ROLE_KEY: string;
+  readonly CF_CAPTCHA_SITE_KEY: string;
+  readonly CF_CAPTCHA_SECRET_KEY: string;
 }
 
 interface ImportMeta {

src/env.d.ts

@@ -5,6 +5,8 @@ import LoginForm from '../../components/auth/LoginForm';
 import { createSupabaseServerInstance } from '../../db/supabase.client';
 import { isFeatureEnabled } from '../../features/featureFlags';
 
+import { CF_CAPTCHA_SITE_KEY } from 'astro:env/server';
+
 // Check if auth feature is enabled
 if (!isFeatureEnabled('auth')) {
   return Astro.redirect('/');
@@ -30,8 +32,9 @@ if (user) {
   <div class="flex flex-col h-screen max-h-screen bg-gray-950">
     <main class="flex-grow">
       <AuthLayout title="Welcome back" subtitle="Sign in to your account to continue">
-        <LoginForm client:only="react" />
+        <LoginForm client:only="react" cfCaptchaSiteKey={CF_CAPTCHA_SITE_KEY} />
       </AuthLayout>
     </main>
   </div>
+  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" defer></script>
 </Layout>