feat: integrate reCAPTCHA v3 (#24)

Author: jayantkageri

app/admin/register/page.tsx

@@ -2,18 +2,21 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/use-auth";
+import { useRecaptcha } from "@/hooks/use-recaptcha";
 import { useToast } from "@/hooks/use-toast";
 import { FormInput } from "@/components/registration/form-input";
 import { Button } from "@/components/registration/button";
 import { Card } from "@/components/registration/card";
 import { StickyAlert } from "@/components/registration/sticky-alert";
+import { RecaptchaNotice } from "@/components/registration/recaptcha-notice";
 import { DotPattern } from "@/components/registration/dot-pattern";
 import { Spinner } from "@/components/ui/spinner";
 import { UserPlus, LogIn } from "lucide-react";
 import Link from "next/link";
 
 export default function AdminRegisterPage() {
   const { isAuthenticated, isLoading } = useAuth();
+  const { executeRecaptcha } = useRecaptcha();
   const { toast } = useToast();
   const router = useRouter();
 
@@ -157,6 +160,7 @@ export default function AdminRegisterPage() {
     setAlert(null);
 
     try {
+      const recaptchaToken = await executeRecaptcha("admin_register");
       const response = await fetch('/api/admin/register', {
         method: 'POST',
         headers: {
@@ -167,6 +171,7 @@ export default function AdminRegisterPage() {
           email: formData.email.trim(),
           password: formData.password,
           adminCode: formData.adminCode.trim(),
+          recaptcha_token: recaptchaToken,
         }),
       });
 
@@ -451,6 +456,7 @@ export default function AdminRegisterPage() {
                   <LogIn className="w-[16px] h-[16px]" />
                   <span>Login</span>
                 </Link>
+                <RecaptchaNotice className="mt-[16px]" />
               </div>
             </Card>
           </div>

app/api/admin/register/route.ts

@@ -4,6 +4,7 @@ import { createUserWithEmailAndPassword } from "firebase/auth";
 import dbConnect from "@/lib/db";
 import User, { IUser } from "@/models/User";
 import { getAuth } from "@/lib/firebase-admin";
+import { verifyRecaptcha } from "@/lib/recaptcha";
 
 export const dynamic = 'force-dynamic';
 export const runtime = 'nodejs';
@@ -21,7 +22,21 @@ const validatePassword = (password: string) => {
 export async function POST(request: Request) {
   try {
     const body = await request.json();
-    const { name, email, password, adminCode } = body;
+    const { name, email, password, adminCode, recaptcha_token } = body;
+
+    // reCAPTCHA v3 background score check — reject likely-bot traffic.
+    const captcha = await verifyRecaptcha(recaptcha_token, "admin_register");
+    if (!captcha.ok) {
+      console.warn("[admin/register] reCAPTCHA rejected:", captcha.reason, captcha.score);
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Security check failed. Please try again.",
+          error: { code: "recaptcha_failed", message: "reCAPTCHA verification failed" },
+        },
+        { status: 400 }
+      );
+    }
 
     const errors: Record<string, string> = {};
 

app/api/evaluator/register/route.ts

@@ -5,6 +5,7 @@ import Evaluator from "@/models/Evaluator";
 import User from "@/models/User";
 import { getAuth } from "@/lib/firebase-admin";
 import { checkRateLimit } from "@/lib/rate-limit";
+import { verifyRecaptcha } from "@/lib/recaptcha";
 
 export const dynamic = 'force-dynamic';
 
@@ -54,7 +55,20 @@ export async function POST(request: NextRequest) {
         const uid = decodedToken.uid;
         const email = decodedToken.email || "";
         const body = await request.json();
-        const { name, evaluatorCode } = body;
+        const { name, evaluatorCode, recaptcha_token } = body;
+
+        // reCAPTCHA v3 background score check. The Firebase user was created
+        // client-side before this call, so clean it up if the check fails.
+        const captcha = await verifyRecaptcha(recaptcha_token, "evaluator_register");
+        if (!captcha.ok) {
+            console.warn("[evaluator/register] reCAPTCHA rejected:", captcha.reason, captcha.score);
+            try {
+                await getAuth().deleteUser(uid);
+            } catch (deleteError) {
+                console.error(`Failed to delete user ${uid} after reCAPTCHA failure:`, deleteError);
+            }
+            return createErrorResponse("Security check failed. Please try again.", "RECAPTCHA_FAILED", 400);
+        }
 
         if (!name) {
             return createErrorResponse("Name is required", "VALIDATION_ERROR", 400);

app/api/user/login/route.ts

@@ -5,6 +5,7 @@ import { FirebaseError } from "firebase/app";
 import dbConnect from "@/lib/db";
 import User from "@/models/User";
 import { getAuth } from "@/lib/firebase-admin";
+import { verifyRecaptcha } from "@/lib/recaptcha";
 
 const ADMIN_EMAIL_DOMAIN = process.env.ADMIN_EMAIL_DOMAIN;
 const SECRET_CODE = process.env.SECRET_CODE;
@@ -27,7 +28,7 @@ async function authenticateUser(email: string, password: string, isAdminAttempt:
 
 export async function POST(request: Request) {
   try {
-    const { email, password } = await request.json();
+    const { email, password, recaptcha_token } = await request.json();
 
     if (!email || !password) {
       return NextResponse.json(
@@ -36,6 +37,20 @@ export async function POST(request: Request) {
       );
     }
 
+    // reCAPTCHA v3 background score check — reject likely-bot traffic.
+    const captcha = await verifyRecaptcha(recaptcha_token, "login");
+    if (!captcha.ok) {
+      console.warn("[login] reCAPTCHA rejected:", captcha.reason, captcha.score);
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Security check failed. Please try again.",
+          error: { code: "recaptcha_failed", message: "reCAPTCHA verification failed" },
+        },
+        { status: 400 }
+      );
+    }
+
     const isAdminAttempt = ADMIN_EMAIL_DOMAIN && SECRET_CODE &&
       email.endsWith(ADMIN_EMAIL_DOMAIN) &&
       password === SECRET_CODE;

app/api/user/register/route.ts

@@ -7,6 +7,7 @@ import {
 import { cloudinaryV2 } from "@/c";
 import dbConnect from "@/lib/db";
 import User, { IUser } from "@/models/User";
+import { verifyRecaptcha } from "@/lib/recaptcha";
 
 // Configure route
 export const dynamic = "force-dynamic";
@@ -85,6 +86,22 @@ export async function POST(request: Request) {
 
     const formData = await request.formData();
 
+    // reCAPTCHA v3 background score check — reject likely-bot registrations
+    // before doing any Firebase/Cloudinary/DB work.
+    const recaptchaToken = formData.get("recaptcha_token") as string | null;
+    const captcha = await verifyRecaptcha(recaptchaToken, "register");
+    if (!captcha.ok) {
+      console.warn("[register] reCAPTCHA rejected:", captcha.reason, captcha.score);
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Security check failed. Please try again.",
+          error: { code: "recaptcha_failed", message: "reCAPTCHA verification failed" },
+        },
+        { status: 400 },
+      );
+    }
+
     // Helper to convert File to base64
     const fileToBase64 = async (file: File): Promise<string> => {
       const arrayBuffer = await file.arrayBuffer();

app/evaluator/register/page.tsx

@@ -3,10 +3,12 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/use-auth";
+import { useRecaptcha } from "@/hooks/use-recaptcha";
 import { FormSection } from "@/components/registration/form-section";
 import { FormInput } from "@/components/registration/form-input";
 import { Button } from "@/components/registration/button";
 import { StickyAlert } from "@/components/registration/sticky-alert";
+import { RecaptchaNotice } from "@/components/registration/recaptcha-notice";
 import { DotPattern } from "@/components/registration/dot-pattern";
 import { Spinner } from "@/components/ui/spinner";
 import { ShieldPlus } from "lucide-react";
@@ -16,6 +18,7 @@ import { auth } from "@/Firebase";
 
 export default function EvaluatorRegisterPage() {
     const { isAuthenticated, isLoading, user } = useAuth();
+    const { executeRecaptcha } = useRecaptcha();
     const [formData, setFormData] = useState({
         name: "",
         email: "",
@@ -63,6 +66,9 @@ export default function EvaluatorRegisterPage() {
         }
 
         try {
+            // reCAPTCHA v3 background token — scored server-side, no user interaction.
+            const recaptchaToken = await executeRecaptcha("evaluator_register");
+
             // Create user in Firebase directly to avoid /api/registration requirements
             const userCredential = await createUserWithEmailAndPassword(
                 auth,
@@ -81,7 +87,8 @@ export default function EvaluatorRegisterPage() {
                     },
                     body: JSON.stringify({
                         name: formData.name,
-                        evaluatorCode: formData.evaluatorCode
+                        evaluatorCode: formData.evaluatorCode,
+                        recaptcha_token: recaptchaToken
                     })
                 });
 
@@ -219,6 +226,8 @@ export default function EvaluatorRegisterPage() {
                                         ← Back to Main Registration
                                     </button>
                                 </div>
+
+                                <RecaptchaNotice />
                             </form>
                         </FormSection>
                     </div>

app/globals.css

@@ -404,3 +404,9 @@ input[type="number"] { -moz-appearance: textfield; }
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid var(--border-hairline);
 }
+
+/* Hide the floating reCAPTCHA v3 badge. Per Google's terms, the required
+   disclosure is shown inline on each auth form instead (see RecaptchaNotice). */
+.grecaptcha-badge {
+  visibility: hidden;
+}

app/login/page.tsx

@@ -3,16 +3,19 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/use-auth";
+import { useRecaptcha } from "@/hooks/use-recaptcha";
 import { FormSection } from "@/components/registration/form-section";
 import { FormInput } from "@/components/registration/form-input";
 import { Button } from "@/components/registration/button";
 import { StickyAlert } from "@/components/registration/sticky-alert";
+import { RecaptchaNotice } from "@/components/registration/recaptcha-notice";
 import { DotPattern } from "@/components/registration/dot-pattern";
 import { Spinner } from "@/components/ui/spinner";
 import { ArrowRight, LogIn } from "lucide-react";
 
 export default function LoginPage() {
   const { login, isAuthenticated, isLoading } = useAuth();
+  const { executeRecaptcha } = useRecaptcha();
   const [loginData, setLoginData] = useState({ email: "", password: "" });
   const [error, setError] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -27,7 +30,8 @@ export default function LoginPage() {
     setIsSubmitting(true);
     setError("");
     try {
-      await login(loginData.email, loginData.password);
+      const recaptchaToken = await executeRecaptcha("login");
+      await login(loginData.email, loginData.password, recaptchaToken);
       router.push("/dashboard");
     } catch (err: any) {
       setError(err?.message || "Login failed. Please try again.");
@@ -116,6 +120,8 @@ export default function LoginPage() {
                   Register here
                 </button>
               </div>
+
+              <RecaptchaNotice className="pt-1" />
             </form>
           </FormSection>
         </div>

components/providers/auth-provider.tsx

@@ -47,7 +47,7 @@ interface AuthContextType {
     // session — without waiting for /api/user/profile to also come back.
     firebaseUser: FirebaseUser | null;
     loading: boolean;
-    login: (email: string, password: string) => Promise<void>;
+    login: (email: string, password: string, recaptchaToken?: string | null) => Promise<void>;
     register: (formData: FormData) => Promise<void>;
     logout: () => Promise<void>;
     refreshUser: () => Promise<void>;
@@ -155,15 +155,15 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         return () => unsubscribe();
     }, []);
 
-    const login = useCallback(async (email: string, password: string) => {
+    const login = useCallback(async (email: string, password: string, recaptchaToken?: string | null) => {
         try {
             setLoading(true); // Start loading immediately
             const response = await fetch(API_ENDPOINTS.login, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify({ email, password }),
+                body: JSON.stringify({ email, password, recaptcha_token: recaptchaToken ?? null }),
             });
 
             const data = await response.json();

components/registration/recaptcha-notice.tsx

@@ -0,0 +1,34 @@
+/**
+ * Inline reCAPTCHA disclosure.
+ *
+ * The floating reCAPTCHA badge is hidden via CSS (see globals.css). Google's
+ * terms require that, when the badge is hidden, this disclosure is shown to
+ * users wherever reCAPTCHA is active. Drop this near each auth form's submit.
+ */
+export function RecaptchaNotice({ className = "" }: { className?: string }) {
+  return (
+    <p
+      className={`text-[11px] leading-[1.5] text-ink-muted text-center ${className}`}
+    >
+      This site is protected by reCAPTCHA and the Google{" "}
+      <a
+        href="https://policies.google.com/privacy"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-brand/80 hover:text-brand underline underline-offset-2"
+      >
+        Privacy Policy
+      </a>{" "}
+      and{" "}
+      <a
+        href="https://policies.google.com/terms"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-brand/80 hover:text-brand underline underline-offset-2"
+      >
+        Terms of Service
+      </a>{" "}
+      apply.
+    </p>
+  );
+}