Added captcha (#415)

* Added captcha

* Added captcha

Author: nang-dev

components/auth/signup.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Link from "next/link";
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { signinWithOAuth } from "@/app/(auth)/actions";
 import { AdminUserAttributes, Provider } from "@supabase/supabase-js";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -22,9 +22,12 @@ import { useRouter } from "next/navigation";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { useToggle } from "@/hooks/useToggle";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 
 export default function SignUp() {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+  const captcha = useRef<HCaptcha>(null);
   const form = useForm<SignUpFormData>({
     resolver: zodResolver(signUpSchema),
     defaultValues: {
@@ -42,14 +45,20 @@ export default function SignUp() {
     setIsSubmitting(true);
 
     try {
-      const formData: AdminUserAttributes = {
+      if (!captchaToken) {
+        toast.error("Please complete the captcha challenge");
+        return;
+      }
+
+      const formData = {
         email: data.email,
         password: data.password,
         user_metadata: {
           full_name: data.full_name,
           company_name: data.company_name,
           heard_about_us: data.heard_about_us,
         },
+        captchaToken: captchaToken,
       };
       const response = await fetch("/api/signup", {
         method: "POST",
@@ -73,6 +82,8 @@ export default function SignUp() {
       toast.error("An unexpected error occurred. Please try again.");
     } finally {
       setIsSubmitting(false);
+      captcha.current?.resetCaptcha();
+      setCaptchaToken(null);
     }
   };
 
@@ -252,6 +263,14 @@ export default function SignUp() {
                   )}
                 />
 
+                <HCaptcha
+                  ref={captcha}
+                  sitekey="fa6c8c52-7694-45b0-97ec-7814072256b4"
+                  onVerify={(token) => {
+                    setCaptchaToken(token);
+                  }}
+                />
+
                 <div className="text-center text-sm text-gray-600">
                   <Link
                     href="/privacy"

package.json

@@ -11,6 +11,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@hcaptcha/react-hcaptcha": "^1.11.2",
     "@headlessui/react": "^1.7.17",
     "@hookform/resolvers": "^3.6.0",
     "@radix-ui/react-accordion": "^1.2.0",

yarn.lock

@@ -864,6 +864,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.17.9":
+  version "7.26.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.9.tgz#aa4c6facc65b9cb3f87d75125ffd47781b475433"
+  integrity sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.25.7":
   version "7.25.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.7.tgz#27f69ce382855d915b14ab0fe5fb4cbf88fa0769"
@@ -1215,6 +1222,19 @@
     protobufjs "^7.2.5"
     yargs "^17.7.2"
 
+"@hcaptcha/loader@^1.2.1":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@hcaptcha/loader/-/loader-1.2.4.tgz#541714395a82e27ec0f0e8bd80ef1a0bea141cc3"
+  integrity sha512-3MNrIy/nWBfyVVvMPBKdKrX7BeadgiimW0AL/a/8TohNtJqxoySKgTJEXOQvYwlHemQpUzFrIsK74ody7JiMYw==
+
+"@hcaptcha/react-hcaptcha@^1.11.2":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@hcaptcha/react-hcaptcha/-/react-hcaptcha-1.11.2.tgz#269556e312e579d0443084b00e3edc196a638757"
+  integrity sha512-F6+aZknrpTHoAhKIP80wWNJI5nhOJg0qyazM3pAw0bCyvVLSsveWeZyTK7W8EhO6nvovTE061gehlC+bmS/vMw==
+  dependencies:
+    "@babel/runtime" "^7.17.9"
+    "@hcaptcha/loader" "^1.2.1"
+
 "@headlessui/react@^1.7.17":
   version "1.7.19"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40"