From 660009f17d0b100f94449c6ebb21be8a80b0a974 Mon Sep 17 00:00:00 2001
From: Vijesh Shetty <vijeshsshetty@gmail.com>
Date: Sun, 2 Jun 2024 10:39:11 +0530
Subject: [PATCH] added captcha to login and register page

---
 app/app/login/page.tsx       | 50 +++++++++++++++++-------------------
 app/app/register/page.tsx    | 22 ++++++++++++++--
 lib/actions/captchaVerify.ts | 25 ++++++++++++++++++
 package-lock.json            | 10 ++++++++
 package.json                 |  1 +
 5 files changed, 79 insertions(+), 29 deletions(-)
 create mode 100644 lib/actions/captchaVerify.ts

diff --git a/app/app/login/page.tsx b/app/app/login/page.tsx
index 72fabe1..2544e1e 100644
--- a/app/app/login/page.tsx
+++ b/app/app/login/page.tsx
@@ -17,7 +17,8 @@ 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("");
@@ -25,6 +26,7 @@ const LoginPage = () => {
   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>
diff --git a/app/app/register/page.tsx b/app/app/register/page.tsx
index 9a125a9..431ba4b 100644
--- a/app/app/register/page.tsx
+++ b/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>
diff --git a/lib/actions/captchaVerify.ts b/lib/actions/captchaVerify.ts
new file mode 100644
index 0000000..7bc5f21
--- /dev/null
+++ b/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
+    }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0e1647d..471604a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "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",
@@ -334,6 +335,15 @@
         "node-pre-gyp": "bin/node-pre-gyp"
       }
     },
+    "node_modules/@marsidev/react-turnstile": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.6.1.tgz",
+      "integrity": "sha512-xsWFqmdccmZ09MX72t2cppQJlxeBH8kdiZNLpYRBHMbKgXhU0ucOCnaOsM0eXv65ripeXiXQcfxu78QIKklRGA==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
diff --git a/package.json b/package.json
index a8b7d3e..12fe2b1 100644
--- a/package.json
+++ b/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",