From 656c1f52d8f14ea3e55dbf24e095aa3f57bcdc8e Mon Sep 17 00:00:00 2001
From: Nang <nathanang2000@gmail.com>
Date: Mon, 17 Feb 2025 13:26:40 -0500
Subject: [PATCH] Sign in captcha auth (#418)

* Progress

* Progress

* Added public key

* Center align
---
 app/(auth)/actions.ts      |  1 +
 components/auth/signin.tsx | 25 ++++++++++++++++++++++++-
 components/auth/signup.tsx | 17 ++++++++++-------
 utils/constants.ts         |  2 ++
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/app/(auth)/actions.ts b/app/(auth)/actions.ts
index 72e6fc8f8..778175be2 100644
--- a/app/(auth)/actions.ts
+++ b/app/(auth)/actions.ts
@@ -21,6 +21,7 @@ export async function signin(
   const data: SignInWithPasswordCredentials = {
     email: formData.get("email") as string,
     password: formData.get("password") as string,
+    options: { captchaToken: formData.get("captchaToken") as string },
   };
 
   const { data: res, error } = await supabase.auth.signInWithPassword(data);
diff --git a/components/auth/signin.tsx b/components/auth/signin.tsx
index 59c66c037..a08492626 100644
--- a/components/auth/signin.tsx
+++ b/components/auth/signin.tsx
@@ -1,9 +1,11 @@
 "use client";
 import Link from "next/link";
-import { useState } from "react";
+import { useState, useRef } from "react";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { signin, signinWithOAuth } from "@/app/(auth)/actions";
+import { HCAPTCHA_SITE_KEY_PUBLIC } from "@/utils/constants";
 import { Provider } from "@supabase/supabase-js";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -25,6 +27,8 @@ import { useToggle } from "@/hooks/useToggle";
 export default function SignIn() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [captchaToken, setCaptchaToken] = useState<string>();
+  const captcha = useRef<HCaptcha>(null);
   const searchParams = useSearchParams();
   const callbackForDesktopApp = searchParams?.get("callback") ?? "";
 
@@ -42,9 +46,15 @@ export default function SignIn() {
     setErrorMessage(null);
 
     try {
+      if (!captchaToken) {
+        setErrorMessage("Please complete the CAPTCHA");
+        return;
+      }
+
       const formData = new FormData();
       formData.append("email", data.email);
       formData.append("password", data.password);
+      formData.append("captchaToken", captchaToken);
 
       const response = await signin(formData, callbackForDesktopApp);
       if (response?.error) {
@@ -56,6 +66,8 @@ export default function SignIn() {
       setErrorMessage("An unexpected error occurred. Please try again.");
     } finally {
       setIsSubmitting(false);
+      captcha.current?.resetCaptcha();
+      setCaptchaToken(undefined);
     }
   };
 
@@ -193,6 +205,17 @@ export default function SignIn() {
                     Forgot Password?
                   </Link>
                 </div>
+
+                <div className="flex justify-center">
+                  <HCaptcha
+                    ref={captcha}
+                    sitekey={HCAPTCHA_SITE_KEY_PUBLIC}
+                    onVerify={(token) => {
+                      setCaptchaToken(token);
+                    }}
+                  />
+                </div>
+
                 <Button
                   type="submit"
                   size="lg"
diff --git a/components/auth/signup.tsx b/components/auth/signup.tsx
index 75a86209a..be99482bd 100644
--- a/components/auth/signup.tsx
+++ b/components/auth/signup.tsx
@@ -2,6 +2,7 @@
 import Link from "next/link";
 import { useState, useRef } from "react";
 import { signinWithOAuth } from "@/app/(auth)/actions";
+import { HCAPTCHA_SITE_KEY_PUBLIC } from "@/utils/constants";
 import { AdminUserAttributes, Provider } from "@supabase/supabase-js";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
@@ -263,13 +264,15 @@ export default function SignUp() {
                   )}
                 />
 
-                <HCaptcha
-                  ref={captcha}
-                  sitekey="fa6c8c52-7694-45b0-97ec-7814072256b4"
-                  onVerify={(token) => {
-                    setCaptchaToken(token);
-                  }}
-                />
+                <div className="flex justify-center">
+                  <HCaptcha
+                    ref={captcha}
+                    sitekey={HCAPTCHA_SITE_KEY_PUBLIC}
+                    onVerify={(token) => {
+                      setCaptchaToken(token);
+                    }}
+                  />
+                </div>
 
                 <div className="text-center text-sm text-gray-600">
                   <Link
diff --git a/utils/constants.ts b/utils/constants.ts
index 23709bfb7..3a9bfc85f 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -211,6 +211,8 @@ export const footerSections = [
   },
 ];
 
+export const HCAPTCHA_SITE_KEY_PUBLIC = "fa6c8c52-7694-45b0-97ec-7814072256b4";
+
 export const socialMediaLinks = [
   {
     icon: GitHubLogo,