antibot

src/pages/signup/[id].tsx

@@ -23,6 +23,9 @@ const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
 
 const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   const router = useRouter();
+
+  const [honeypot, setHoneypot] = useState("");
+
   const id = String(initialForm?.id ?? "");
   const SUBMIT_ID = uuid(); // Submission key, generated on page refresh
   const URL = `${FORM_URL}${id}/`;
@@ -44,6 +47,13 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   }
 
   const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
+
+    if (honeypot !== "") {
+      console.log("bot cought in honeypot cought lacking");
+      toast.success("Sign-up submitted successfully 😎");
+      return;
+    }
+
     const payload: Signup = {
       submit_id: SUBMIT_ID, // This is for preventing duplicate requests; NOT RELATED TO THE SIGNUP ID IN DATABASE
       signupForm_id: signupForm.id,
@@ -66,6 +76,23 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
         <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/signup/${signupForm.id}`} />
       </Head>
       <PageWrapper>
+        {/* 3. HONEYPOT INPUT FIELD */}
+        <div
+          style={{ position: "absolute", top: "-9999px", left: "-9999px", opacity: 0 }}
+          aria-hidden="true"
+        >
+          <label htmlFor="website_url">Do not fill this out if you are human</label>
+          <input
+            id="website_url"
+            type="text"
+            name="website_url"
+            value={honeypot}
+            onChange={(e) => setHoneypot(e.target.value)}
+            tabIndex={-1} // Removes it from the "tab" cycle so keyboard users don't hit it
+            autoComplete="off"
+          />
+        </div>
+
         <SignUpPageView
           signUpForm={signupForm}
           formData={{}}