add recaptcha

.env.example

@@ -4,4 +4,5 @@ GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 NEXT_PUBLIC_SECRET=secret
 NEXT_PUBLIC_BASE_PATH="/portal"
-NEXTAUTH_URL=https://localhost:3000/portal/api/auth
+NEXTAUTH_URL=https://localhost:3000/portal/api/auth
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY=

package.json

@@ -67,6 +67,7 @@
     "react-cool-onclickoutside": "^1.7.0",
     "react-dom": "latest",
     "react-google-button": "^0.7.2",
+    "react-google-recaptcha": "^3.1.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
     "react-modal": "^3.16.1",

src/components/loginForms/recruiterSignup.tsx

@@ -32,6 +32,8 @@ import { MultiSelect } from "../ui/multiselect";
 import Link from "next/link";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
+import ReCAPTCHA from "react-google-recaptcha";
+import { validateCaptcha } from "@/helpers/api";
 
 const Collapsible = dynamic(() => import("@/components/ui/collapsible"), {
   ssr: false,
@@ -252,6 +254,7 @@ export const RecruiterForm = ({
 export default function RecruiterSignup() {
   const [companies, setCompanies] = useState([]);
   const [createCompany, setCreateCompany] = useState(false);
+  const [captchaToken, setCaptchaToken] = useState("");
   const router = useRouter();
 
   const [companyFormData, setCompanyFormData] = useState<CompanyPostFC>({
@@ -302,6 +305,19 @@ export default function RecruiterSignup() {
   };
 
   const handleSubmit = async () => {
+    if (!captchaToken) return toast.error("Please complete the captcha");
+
+    try {
+      const captchaRes = await validateCaptcha(captchaToken);
+      console.log("Captcha response:", captchaRes);
+
+      if (!captchaRes) {
+        return toast.error("Captcha verification failed");
+      }
+    } catch (error) {
+      return toast.error("Captcha verification failed");
+    }
+
     if (createCompany) {
       try {
         const data = await postCompany(companyFormData);
@@ -455,6 +471,11 @@ export default function RecruiterSignup() {
             </Collapsible>
           )}
         </form>
+        <hr className="my-4" />
+        <ReCAPTCHA
+          sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ""}
+          onChange={(token) => setCaptchaToken(token)}
+        />
       </CardContent>
       <CardFooter>
         <div className="flex justify-end space-x-1">

src/helpers/api.ts

@@ -550,26 +550,25 @@ export const createJobEvent = async (
 };
 
 export const updateEvent = async (
-  body:
-[
-   {
-    id: string;
-    jobId: string;
-    roundNumber: number;
-    type: string;
-    metadata: string;
-    startDateTime: string;
-    endDateTime: string;
-    visibleToRecruiter: boolean;
-  }]
+  body: [
+    {
+      id: string;
+      jobId: string;
+      roundNumber: number;
+      type: string;
+      metadata: string;
+      startDateTime: string;
+      endDateTime: string;
+      visibleToRecruiter: boolean;
+    },
+  ],
 ) => {
   return apiCall(`/events`, {
     method: "PATCH",
     body: body,
   });
 };
 
-
 export const login = async (email: string, role: string) => {
   const response = await apiCall("/auth/login/", {
     method: "POST",
@@ -697,3 +696,12 @@ export const fetchcompanies = async () => {
 export const fetchClashes = async (jobId: string) => {
   return apiCall(`/clashes/${jobId}`);
 };
+
+export const validateCaptcha = async (captcha: string) => {
+  const res = await apiCall("/auth/verify-captcha", {
+    method: "POST",
+    body: { token: captcha },
+    isAuth: false,
+  });
+  return res;
+};

yarn.lock

@@ -5837,7 +5837,7 @@ progress@^2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.0, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6282,6 +6282,14 @@ rc-virtual-list@^3.14.2, rc-virtual-list@^3.5.1, rc-virtual-list@^3.5.2:
     rc-resize-observer "^1.0.0"
     rc-util "^5.36.0"
 
+react-async-script@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
+  integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.0"
+
 react-chartjs-2@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d"
@@ -6320,6 +6328,14 @@ react-google-button@^0.7.2:
   dependencies:
     prop-types "^15.7.2"
 
+react-google-recaptcha@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz#44aaab834495d922b9d93d7d7a7fb2326315b4ab"
+  integrity sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==
+  dependencies:
+    prop-types "^15.5.0"
+    react-async-script "^1.2.0"
+
 react-hot-toast@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"