added captcha to login and register page

app/app/login/page.tsx

@@ -17,14 +17,16 @@ import { useState } from "react";
 import { useToast } from "@/components/ui/use-toast";
 import { useRouter } from "next/navigation";
 import { SkeletonCard } from "@/components/CardComponents/SkeletonCard";
-import { KeyRound } from "lucide-react";
+import { Turnstile } from '@marsidev/react-turnstile'
+import { captchaVerify } from "@/lib/actions/captchaVerify";
 
 const LoginPage = () => {
   const [email, setEmail] = useState("");
   const [pass, setPass] = useState("");
   const { toast } = useToast();
   const router = useRouter();
   const [loading, setLoading] = useState(true);
+  const [token,setToken] = useState<string>("")
 
   const { data } = useSession();
   useEffect(() => {
@@ -43,21 +45,6 @@ const LoginPage = () => {
       </div>
     );
 
-  const handleGoogleLogin = async () => {
-    const res: any = await signIn("google");
-    if (res && res.status == 200) {
-      toast({
-        title: "User logged in successfully !!",
-      });
-      router.push("/app/home");
-    } else {
-      toast({
-        title: "Error while logging in!!",
-        variant: "destructive",
-      });
-    }
-  }
-
   return (
     <div className="flex w-full h-screen justify-center items-center px-4">
       <Card className="w-[400px]">
@@ -85,13 +72,30 @@ const LoginPage = () => {
           />
         </CardContent>
         <CardFooter>
-          <div className="flex flex-col items-center w-full">
-            <Button className="w-32"
+        <div className="flex flex-col items-center w-full">
+
+        <Turnstile onSuccess={(token) => {
+        setToken(token)
+      }} siteKey='0x4AAAAAAAbu8T-y1tAsroOZ' />
+
+            <Button disabled={token==""} className="w-32 mt-4"
               onClick={async () => {
+                const verify = await captchaVerify(token);
+
+                if(verify == 403){
+                    toast({
+                      title:"Captcha invalid",
+                      description: "Please try again",
+                      variant:"destructive"
+                    })
+                    return;
+                }
+
                 const res: any = await signIn("credentials", {
                   email: email,
                   password: pass,
                   redirect: false,
+                  token:token
                 });
                 if (res.status == 200) {
                   toast({
@@ -107,16 +111,8 @@ const LoginPage = () => {
               }}
             >
               Login
-            </Button>
-            {/* <div className="flex justify-center">
-              <Button className="mt-4" onClick={handleGoogleLogin}>
-                <KeyRound size={18}/>
-                <h1 className="ml-2">Sign in with google</h1>
-              </Button>
-            </div> */}
-
+            </Button> 
           </div>
-
         </CardFooter>
       </Card>
     </div>

app/app/register/page.tsx

@@ -17,14 +17,29 @@ import { toast } from "@/components/ui/use-toast";
 import { redirect } from "next/navigation";
 import { useSession } from "next-auth/react";
 import { SkeletonCard } from "@/components/CardComponents/SkeletonCard";
+import { Turnstile } from "@marsidev/react-turnstile";
+import { captchaVerify } from "@/lib/actions/captchaVerify";
 
 
 
 const RegisterPage = () => {
   const [loading, setLoading] = useState(true);
+  const [token,setToken] = useState<string>("")
 
   const registerUser = async (formData: FormData) => {
+    const verify = await captchaVerify(token);
+
+    if(verify == 403){
+        toast({
+          title:"Invalid Captcha",
+          description: "Please try again",
+          variant:"destructive"
+        })
+        return;
+    }
+
     const status = await register(formData);
+
     if (status == 200) {
       toast({
         title: "User registered successfully !!",
@@ -86,8 +101,11 @@ const RegisterPage = () => {
             />
           </CardContent>
           <CardFooter>
-            <div className="flex justify-center w-full">
-              <Button>Register</Button>
+            <div className="flex flex-col items-center w-full">
+            <Turnstile onSuccess={(token) => {
+              setToken(token)
+            }} siteKey='0x4AAAAAAAbu8T-y1tAsroOZ' />
+              <Button className="mt-4" disabled={token == ""}>Register</Button>
             </div>
           </CardFooter>
         </form>

lib/actions/captchaVerify.ts

@@ -0,0 +1,25 @@
+'use server'
+import { HTTP_STATUS } from "../constants";
+
+export async function captchaVerify (token:string) {
+    const SECRET_KEY = "0x4AAAAAAAbu8XnHHmSbg9kLI3T3HziPSuI"
+
+    let formData = new FormData();
+	formData.append('secret', SECRET_KEY);
+	formData.append('response', token);
+
+    const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
+	const result = await fetch(url, {
+		body: formData,
+		method: 'POST',
+	});
+
+    const challengeSucceeded = (await result.json()).success;
+
+    if (!challengeSucceeded) {
+        return HTTP_STATUS.FORBIDDEN
+    }
+    else{
+        return HTTP_STATUS.OK
+    }
+}

package.json

@@ -10,6 +10,7 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@marsidev/react-turnstile": "^0.6.1",
     "@prisma/client": "^5.13.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.0.3",