add reCaptcha

Author: vmcodes

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - decoration components
 - nav component styling and intersection api
 - CardsColumns.js and Card.js
+- reCAPTCHA
 
 ### Fixed
 

components/mailchimp/NewsletterForm.js

@@ -1,11 +1,48 @@
-import { useState } from 'react';
+import { createRef, useState } from 'react';
 import { decode } from 'html-entities';
 import Container from '../Container';
 import newsletterStyles from '../../styles/Newsletter.module.scss';
+import ReCAPTCHA from 'react-google-recaptcha';
+
+const SITE_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
 
 const NewsletterForm = ({ status, message, onValidated }) => {
   const [error, setError] = useState(null);
-  const [email, setEmail] = useState(null);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const recaptchaRef = createRef();
+
+  const onReCAPTCHAChange = async captchaCode => {
+    // If the reCAPTCHA code is null or undefined indicating that
+    // the reCAPTCHA was expired then return early
+    if (!captchaCode) {
+      return;
+    }
+    try {
+      const response = await fetch('/api/register', {
+        method: 'POST',
+        body: JSON.stringify({ email, name, captcha: captchaCode }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      if (response.ok) {
+        // If the response is ok than show the success console.log
+        console.log('Email registered successfully');
+      } else {
+        // Else throw an error with the message returned
+        const error = await response.json();
+        throw new Error(error.message);
+      }
+    } catch (error) {
+      console.log(error?.message || 'Something went wrong');
+    } finally {
+      // Reset the reCAPTCHA when the request has failed or succeeded
+      recaptchaRef.current.reset();
+      setEmail('');
+      setName('');
+    }
+  };
 
   /**
    * Handle form submit.
@@ -17,17 +54,24 @@ const NewsletterForm = ({ status, message, onValidated }) => {
 
     setError(null);
 
+    if (!name) {
+      setError('Please enter a name');
+      return null;
+    }
+
     if (!email) {
       setError('Please enter a valid email address');
       return null;
     }
 
+    recaptchaRef.current.execute();
+
     const isFormValidated = onValidated({ EMAIL: email });
 
     event.target.reset();
 
     // On success return true
-    return email && email.indexOf('@') > -1 && isFormValidated;
+    return name && email && email.indexOf('@') > -1 && isFormValidated;
   };
 
   /**
@@ -77,22 +121,36 @@ const NewsletterForm = ({ status, message, onValidated }) => {
           >
             <input
               className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__name}`}
+              onChange={event => setName(event?.target?.value ?? '')}
               type="text"
               name="name"
+              value={name}
               placeholder="name"
             />
             <input
               className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__email}`}
               onChange={event => setEmail(event?.target?.value ?? '')}
               type="email"
               name="email"
+              value={email}
               placeholder="email"
               onKeyUp={event => handleInputKeyEvent(event)}
             />
-            <button className={newsletterStyles.newsletter__button}>
+            <button
+              className={newsletterStyles.newsletter__button}
+              type="submit"
+            >
               Subscribe
             </button>
+
+            <ReCAPTCHA
+              ref={recaptchaRef}
+              size="invisible"
+              sitekey={SITE_KEY}
+              onChange={onReCAPTCHAChange}
+            />
           </form>
+
           <div className={newsletterStyles.newsletterFormInfo}>
             {status === 'sending' && (
               <div className={newsletterStyles.newsletterFormSending}>

package.json

@@ -15,6 +15,7 @@
     "next": "^12.0.10",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-google-recaptcha": "^2.1.0",
     "react-mailchimp-subscribe": "^2.1.3",
     "sass": "^1.35.1"
   }

pages/api/register.js

@@ -0,0 +1,56 @@
+const sleep = () =>
+  new Promise(resolve => {
+    setTimeout(() => {
+      resolve();
+    }, 350);
+  });
+
+export default async function handler(req, res) {
+  const SECRET_KEY = process.env.RECAPTCHA_SECRET_KEY;
+
+  const { body, method } = req;
+
+  // Extract the email, name, and captcha code from the request body
+  const { email, name, captcha } = body;
+
+  if (method === 'POST') {
+    // If email or captcha are missing return an error
+    if (!email || !name || !captcha) {
+      return res.status(422).json({
+        message: 'Unprocessable request, please provide the required fields',
+      });
+    }
+
+    try {
+      // Ping the google recaptcha verify API to verify the captcha code you received
+      const response = await fetch(
+        `https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEY}&response=${captcha}`,
+        {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
+          },
+          method: 'POST',
+        }
+      );
+      const captchaValidation = await response.json();
+
+      if (captchaValidation.success) {
+        // Replace this with the API that will save the data received
+        // to your backend
+        await sleep();
+        // Return 200 if everything is successful
+        return res.status(200).send('OK');
+      }
+
+      return res.status(422).json({
+        message: 'Unprocessable request, Invalid captcha code',
+      });
+    } catch (error) {
+      console.log(error);
+      return res.status(422).json({ message: 'Something went wrong' });
+    }
+  }
+  // Return 404 if someone pings the API with a method other than
+  // POST
+  return res.status(404).send('Not found');
+}