Add recaptcha validation to join form

.env.sample

@@ -15,3 +15,6 @@ COMPOSE_EXTERNAL_NETWORK=false
 # Set this to traefik-net in prod
 COMPOSE_NETWORK_NAME=
 
+# Not required for local dev, unless the backend is configured to require captchas
+RECAPTCHA_V2_KEY=
+RECAPTCHA_V3_KEY=

.github/workflows/playwright.yml

@@ -34,7 +34,7 @@ jobs:
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
     - name: Run Playwright tests
-      run: npx playwright test --grep-invert 'fail meshdb hard down and s3 hard down'
+      run: npx playwright test
       env:
         NEXT_PUBLIC_MESHDB_URL: https://127.0.0.1:8000 # Throwaway to make the mock work
         MESHDB_URL: https://127.0.0.1:8000 # Throwaway to make the mock work

package.json

@@ -28,6 +28,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.12",
+    "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.53.0",
     "react-phone-number-input": "^3.3.9",
     "react-select": "^5.8.0",
@@ -39,6 +40,7 @@
   "devDependencies": {
     "@playwright/test": "^1.45.3",
     "@types/react": "^18.2.48",
+    "@types/react-google-recaptcha": "^2.1.9",
     "dotenv": "^16.4.5"
   }
 }

src/components/JoinForm/JoinForm.module.scss

@@ -105,3 +105,15 @@
 .hidden {
   display: none;
 }
+
+.captchaDisclaimer {
+  font-size: 80%;
+  color: #9a9a9a;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.captchaDisclaimer > a {
+  color: #000;
+  margin-left: 3px;
+}

src/components/JoinForm/JoinForm.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import styles from "./JoinForm.module.scss";
+import "./hide_recaptcha_badge.css";
 import { parsePhoneNumberFromString } from "libphonenumber-js";
 import {
   CircularProgress,
@@ -14,11 +15,12 @@ import {
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { saveJoinRecordToS3 } from "@/lib/join_record";
-import { getMeshDBAPIEndpoint } from "@/lib/endpoint";
+import { getMeshDBAPIEndpoint, getRecaptchaKeys } from "@/lib/endpoint";
 import InfoConfirmationDialog from "../InfoConfirmation/InfoConfirmation";
 import { JoinRecord } from "@/lib/types";
 import { useTranslations } from "next-intl";
 import LocaleSwitcher from "../LocaleSwitcher";
+import ReCAPTCHA from "react-google-recaptcha";
 
 export class JoinFormValues {
   constructor(
@@ -77,16 +79,37 @@ export default function JoinForm() {
     defaultValues: defaultFormValues,
   });
 
+  const recaptchaV3Ref = React.useRef<ReCAPTCHA>(null);
+  const recaptchaV2Ref = React.useRef<ReCAPTCHA>(null);
+
   const [isLoading, setIsLoading] = useState(false);
+  const [isProbablyABot, setIsProbablyABot] = useState(false);
+  const [checkBoxCaptchaToken, setCheckBoxCaptchaToken] = useState("");
   const [isInfoConfirmationDialogueOpen, setIsInfoConfirmationDialogueOpen] =
     useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [isMeshDBProbablyDown, setIsMeshDBProbablyDown] = useState(false);
   const [isBadPhoneNumber, setIsBadPhoneNumber] = useState(false);
   const [joinRecordKey, setJoinRecordKey] = useState("");
 
+  const [recaptchaV2Key, setRecaptchaV2Key] = useState<string | undefined>(
+    undefined,
+  );
+  const [recaptchaV3Key, setRecaptchaV3Key] = useState<string | undefined>(
+    undefined,
+  );
+  const [reCaptchaError, setReCaptchaError] = useState<boolean>(false);
+
   const isBeta = true;
 
+  useEffect(() => {
+    (async () => {
+      const [v2_key, v3_key] = await getRecaptchaKeys();
+      setRecaptchaV2Key(v2_key);
+      setRecaptchaV3Key(v3_key);
+    })();
+  }, [setRecaptchaV2Key, setRecaptchaV3Key]);
+
   // Store the values submitted by the user or returned by the server
   const [infoToConfirm, setInfoToConfirm] = useState<Array<ConfirmationField>>([
     { key: "" as keyof JoinFormValues, original: "", new: "" },
@@ -177,11 +200,32 @@ export default function JoinForm() {
 
     // Attempt to submit the Join Form
     try {
+      // Get the v3 captcha token. Per the google docs, the implicit token must be retrieved on form submission,
+      // so that the token doesn't expire before server side validation
+      let recaptchaInvisibleToken = "";
+      if (recaptchaV3Ref?.current && !reCaptchaError) {
+        recaptchaInvisibleToken =
+          (await recaptchaV3Ref.current.executeAsync()) ?? "";
+        recaptchaV3Ref.current.reset();
+      } else {
+        console.warn(
+          "No ref found for the recaptchaV3 component, or component is in error state, not including captcha token in HTTP request",
+        );
+      }
+
       const response = await fetch(
         `${await getMeshDBAPIEndpoint()}/api/v1/join/`,
         {
           method: "POST",
           body: JSON.stringify(joinFormSubmission),
+          headers: {
+            "X-Recaptcha-V2-Token": checkBoxCaptchaToken
+              ? checkBoxCaptchaToken
+              : "",
+            "X-Recaptcha-V3-Token": recaptchaInvisibleToken
+              ? recaptchaInvisibleToken
+              : "",
+          },
         },
       );
       const j = await response.json();
@@ -215,6 +259,7 @@ export default function JoinForm() {
         console.debug("Join Form submitted successfully");
         setIsLoading(false);
         setIsSubmitted(true);
+        setIsProbablyABot(false);
         return;
       }
 
@@ -250,6 +295,23 @@ export default function JoinForm() {
           return;
         }
 
+        // If the server said the recaptcha token indicates this was a bot (HTTP 401), prompt the user with the
+        // interactive "checkbox" V2 captcha. However, if they have already submitted a checkbox captcha
+        // and are still seeing a 401, something has gone wrong - fall back to the generic 4xx error handling logic below
+        if (record.code == 401 && !checkBoxCaptchaToken) {
+          toast.warning(
+            "Please complete an additional verification step to confirm your submission",
+          );
+          setIsProbablyABot(true);
+          setIsSubmitted(false);
+          setIsLoading(false);
+
+          console.error(
+            "Request failed invisible captcha verification, user can try again with checkbox validation",
+          );
+          return;
+        }
+
         if (record.code !== null && 500 <= record.code && record.code <= 599) {
           // If it was the server's fault, then just accept the record and move
           // on.
@@ -269,6 +331,13 @@ export default function JoinForm() {
         toast.error(`Could not submit Join Form: ${detail}`);
         console.error(`An error occurred: ${detail}`);
         setIsLoading(false);
+
+        // Clear the checkbox captcha if it exists, to allow the user to retry if needed
+        if (recaptchaV2Ref.current) {
+          recaptchaV2Ref.current.reset();
+          setCheckBoxCaptchaToken("");
+        }
+
         return;
       }
 
@@ -434,6 +503,45 @@ export default function JoinForm() {
               ),
             })}
           </label>
+          {/* This first captcha isn't actually displayed, it just silently collects user metrics and generates a token */}
+          {recaptchaV3Key ? (
+            <ReCAPTCHA
+              ref={recaptchaV3Ref}
+              sitekey={recaptchaV3Key}
+              size="invisible"
+              onErrored={() => {
+                console.error(
+                  "Encountered an error while initializing or querying captcha. " +
+                    "Disabling some frontend captcha features to avoid hangs. " +
+                    "Are the recaptcha keys set correctly in the env variables?",
+                );
+                setReCaptchaError(true);
+              }}
+            />
+          ) : (
+            <></>
+          )}
+          {/* This second captcha is the traditional "I'm not a robot" checkbox,
+          only shown if the user gets 401'ed due to a low score on the above captcha */}
+          {isProbablyABot && recaptchaV2Key ? (
+            <ReCAPTCHA
+              className={styles.centered}
+              style={{ marginTop: "15px" }}
+              ref={recaptchaV2Ref}
+              sitekey={recaptchaV2Key}
+              onChange={(newToken) => setCheckBoxCaptchaToken(newToken ?? "")}
+              onErrored={() => {
+                console.error(
+                  "Encountered an error while initializing or querying captcha. " +
+                    "Disabling all frontend captcha features to avoid hangs. " +
+                    "Are the recaptcha keys set correctly in the env variables?",
+                );
+                setReCaptchaError(true);
+              }}
+            />
+          ) : (
+            <></>
+          )}
           {/*
           <div>
             <p>State Debugger</p>
@@ -447,7 +555,11 @@ export default function JoinForm() {
             <Button
               type="submit"
               disabled={
-                isLoading || isSubmitted || isBadPhoneNumber || !isValid
+                isLoading ||
+                isSubmitted ||
+                isBadPhoneNumber ||
+                !isValid ||
+                (isProbablyABot && !checkBoxCaptchaToken)
               }
               variant="contained"
               size="large"
@@ -465,6 +577,14 @@ export default function JoinForm() {
               <CircularProgress />
             </div>
           </div>
+          <div className={styles.captchaDisclaimer}>
+            This site is protected by reCAPTCHA and the Google
+            <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+            <a href="https://policies.google.com/terms">
+              Terms of Service
+            </a>{" "}
+            apply.
+          </div>
         </form>
       </div>
       <div data-testid="toasty" className="toasty">

src/components/JoinForm/hide_recaptcha_badge.css

@@ -0,0 +1,3 @@
+.grecaptcha-badge {
+  visibility: hidden;
+}

src/lib/endpoint.ts

@@ -7,3 +7,8 @@ export async function getMeshDBAPIEndpoint() {
   }
   return process.env.MESHDB_URL;
 }
+
+// Literally just ask the server what captcha keys to use
+export async function getRecaptchaKeys() {
+  return [process.env.RECAPTCHA_V2_KEY, process.env.RECAPTCHA_V3_KEY];
+}