Sign in captcha auth (#418)

* Progress

* Progress

* Added public key

* Center align

Author: nang-dev

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);

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"

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

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,