Added google captcha

Author: said7388

.env.example

@@ -1,3 +1,7 @@
 NEXT_PUBLIC_EMAILJS_SERVICE_ID = 
 NEXT_PUBLIC_EMAILJS_TEMPLATE_ID = 
-NEXT_PUBLIC_EMAILJS_PUBLIC_KEY = 
+NEXT_PUBLIC_EMAILJS_PUBLIC_KEY = 
+NEXT_PUBLIC_GTM = 
+NEXT_PUBLIC_APP_URL = "http://127.0.0.1:3000"
+NEXT_PUBLIC_RECAPTCHA_SECRET_KEY = 
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY = 

app/api/google/route.js

@@ -0,0 +1,29 @@
+import axios from "axios";
+import { NextResponse } from "next/server";
+
+export async function POST(request) {
+  const reqBody = await request.json();
+  const secret_key = process.env.NEXT_PUBLIC_RECAPTCHA_SECRET_KEY;
+
+  try {
+    const url = `https://www.google.com/recaptcha/api/siteverify?secret=${secret_key}&response=${reqBody.token}`;
+
+    const res = await axios.post(url);
+    if (res.data.success) {
+      return NextResponse.json({
+        message: "Captcha verification success!!",
+        success: true,
+      })
+    };
+
+    return NextResponse.json({
+      error: "Captcha verification failed!",
+      success: false,
+    }, { status: 500 });
+  } catch (error) {
+    return NextResponse.json({
+      error: "Captcha verification failed!",
+      success: false,
+    }, { status: 500 });
+  }
+}

app/components/homepage/contact/contact-form.jsx

@@ -2,7 +2,9 @@
 // @flow strict
 import { isValidEmail } from '@/utils/check-email';
 import emailjs from '@emailjs/browser';
+import axios from 'axios';
 import { useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
 import { TbMailForward } from "react-icons/tb";
 import { toast } from 'react-toastify';
 
@@ -12,6 +14,7 @@ function ContactForm() {
     email: '',
     message: '',
   });
+  const [captcha, setCaptcha] = useState(null);
   const [error, setError] = useState({
     email: false,
     required: false,
@@ -24,6 +27,21 @@ function ContactForm() {
   };
 
   const handleSendMail = async (e) => {
+    if (!captcha) {
+      toast.error('Please complete the captcha!');
+      return;
+    } else {
+      const res = await axios.post(`${process.env.NEXT_PUBLIC_APP_URL}/api/google`, {
+        token: captcha
+      });
+
+      setCaptcha(null);
+      if (!res.data.success) {
+        toast.error('Captcha verification failed!');
+        return;
+      };
+    };
+
     e.preventDefault();
     if (!input.email || !input.message || !input.name) {
       setError({ ...error, required: true });
@@ -109,6 +127,10 @@ function ContactForm() {
               value={input.message}
             />
           </div>
+          <ReCAPTCHA
+            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
+            onChange={(code) => setCaptcha(code)}
+          />
           <div className="flex flex-col items-center gap-2">
             {error.required &&
               <p className="text-sm text-red-400">

package-lock.json

@@ -12,11 +12,13 @@
   "dependencies": {
     "@emailjs/browser": "^4.3.1",
     "@next/third-parties": "^14.1.3",
+    "axios": "^1.6.8",
     "lottie-react": "^2.4.0",
     "next": "^14.1.3",
     "react": "latest",
     "react-dom": "latest",
     "react-fast-marquee": "^1.6.2",
+    "react-google-recaptcha": "^3.1.0",
     "react-icons": "^4.11.0",
     "react-toastify": "^10.0.4"
   },