feat: anti-bot filtering with reCAPTCHA v3

.env.example

@@ -21,3 +21,6 @@ APP_URL="http://localhost:3000"
 NEXT_PUBLIC_WS_URL="ws://localhost:3001"
 NEXT_PUBLIC_MOCK_AUTH="false"
 PLAYERS_PER_MATCH="2"
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY="add-recaptcha-site-key-here"
+RECAPTCHA_SECRET_KEY="add-recaptcha-secret-key-here"
+

package.json

@@ -60,6 +60,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/bad-words": "^3.0.3",
     "@types/eslint": "^8.44.2",
+    "@types/grecaptcha": "^3.0.7",
     "@types/jest": "^29.5.6",
     "@types/lodash": "^4.14.202",
     "@types/node": "^18.16.0",

src/assets/text/homepage.ts

@@ -8,4 +8,5 @@ export const homepage = {
     "The daily top 100 gets Aleo credits transferred to their wallets. Start playing now!",
   topRanked: (position: number, username: string, score: number) =>
     `${position + 1}. ${username} ${score} points`,
+  botDetected: "Recaptcha detected a bot. Please try again.",
 };

src/components/menu-dialog/menu-dialog.tsx

@@ -3,10 +3,11 @@ import { Button, Dialog, Slide, Stack } from "@mui/material";
 import { type TransitionProps } from "@mui/material/transitions";
 
 import { text } from "~/assets/text/index.js";
-
 import { styles } from "./styles.js";
 import { Footer } from "./footer.jsx";
 import { MenuOptions } from "./menu-options.jsx";
+import { useRouter } from "next/router";
+import { pages } from "~/router";
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -24,6 +25,12 @@ interface Props {
 }
 
 export const MenuDialog: FC<Props> = ({ open, setOpen }) => {
+  const { push } = useRouter();
+
+  const goHome = () => {
+    void push(pages.home);
+    setOpen(false);
+  };
   const handleClose = () => {
     setOpen(false);
   };
@@ -37,6 +44,9 @@ export const MenuDialog: FC<Props> = ({ open, setOpen }) => {
       sx={styles.dialog}
     >
       <Stack sx={styles.buttonWrapper}>
+        <Button variant="contained" sx={styles.button} onClick={goHome}>
+          {text.general.home}
+        </Button>
         <Button variant="contained" sx={styles.button} onClick={handleClose}>
           {text.general.close}
         </Button>

src/components/menu-dialog/styles.ts

@@ -9,8 +9,11 @@ export const styles = {
   },
   buttonWrapper: {
     alignItems: "flex-end",
+    flexDirection: "row",
+    justifyContent: "space-between",
     pt: 3,
     pr: 3,
+    pl: 3,
     width: "100vw",
   },
   button: {

src/containers/home/index.tsx → src/containers/home/home.tsx

@@ -1,5 +1,5 @@
 import { Button, Stack, Typography } from "@mui/material";
-import React from "react";
+import React, { useState } from "react";
 import { signIn, useSession } from "next-auth/react";
 import { useRouter } from "next/router.js";
 
@@ -9,20 +9,32 @@ import { api } from "~/utils/api.js";
 import { pages } from "~/router.js";
 import { TOP_RANKED_PLAYERS } from "~/constants/index.js";
 import { isValidSession } from "~/utils/session.js";
-
 import { styles } from "./styles.js";
+import { useReCaptcha } from "~/service/use-reCaptcha.js";
 
 export const Homepage = () => {
   const { push } = useRouter();
+  const [isRecaptchaFailed, setIsRecaptchaFailed] = useState<boolean>(false);
+  const verifyCaptcha = api.recaptcha.verify.useMutation();
   const join = api.lobby.join.useMutation();
   const { data: sessionData } = useSession();
+  const { executeRecaptcha } = useReCaptcha();
 
   const handleGameStart = async () => {
+    const captchaToken = await executeRecaptcha("start_game");
     try {
       if (!isValidSession(sessionData)) {
-        await signIn("credentials", { callbackUrl: pages.lobby });
+        await signIn("credentials", {
+          callbackUrl: pages.lobby,
+        });
       } else {
-        await push(pages.lobby);
+        const result = await verifyCaptcha.mutateAsync({ captchaToken });
+        if (!result) {
+          void push(pages.lobby);
+        } else {
+          setIsRecaptchaFailed(true);
+          return;
+        }
       }
     } catch (error) {
       console.error(error);
@@ -38,6 +50,11 @@ export const Homepage = () => {
       <Stack sx={styles.description}>
         <Typography variant="h5">{text.homepage.descriptionPart1}</Typography>
         <Typography variant="h5">{text.homepage.descriptionPart2}</Typography>
+        {isRecaptchaFailed && (
+          <Typography variant="h6" color={"error"}>
+            {text.homepage.botDetected}
+          </Typography>
+        )}
       </Stack>
       <Stack sx={styles.actions}>
         <Button

src/containers/home/index.ts

@@ -0,0 +1 @@
+export * from "./home.jsx";

src/containers/reCaptcha/index.ts

@@ -0,0 +1,2 @@
+export * from "./reCaptcha";
+export * from "./utils.js";

src/containers/reCaptcha/reCaptcha.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Script, { type ScriptProps } from "next/script.js";
+
+import { getRecaptchaScriptSrc } from "./utils.js";
+import { type IReCaptcha } from "~/types/recaptcha";
+import { env } from "~/env.mjs";
+
+interface ReCaptchaContextProps {
+  /** reCAPTCHA_site_key */
+  readonly reCaptchaKey: string | null;
+  /** Global ReCaptcha object */
+  readonly grecaptcha: IReCaptcha | null;
+  /** Is ReCaptcha script loaded */
+  readonly loaded: boolean;
+  /** Is ReCaptcha failed to load */
+  readonly error: boolean;
+}
+
+const ReCaptchaContext = createContext<ReCaptchaContextProps>({
+  reCaptchaKey: null,
+  grecaptcha: null,
+  loaded: false,
+  error: false,
+});
+
+const useReCaptchaContext = () => {
+  const values = useContext(ReCaptchaContext);
+  useDebugValue(`grecaptcha available: ${values?.loaded ? "Yes" : "No"}`);
+  useDebugValue(
+    `ReCaptcha Script: ${values?.loaded ? "Loaded" : "Not Loaded"}`,
+  );
+  useDebugValue(`Failed to load Script: ${values?.error ? "Yes" : "No"}`);
+  return values;
+};
+
+interface ReCaptchaProviderProps extends Partial<Omit<ScriptProps, "onLoad">> {
+  reCaptchaKey?: string;
+  language?: string;
+  useRecaptchaNet?: boolean;
+  useEnterprise?: boolean;
+  children?: React.ReactNode;
+  onLoad?: (grecaptcha: IReCaptcha, e: undefined) => void;
+}
+
+const ReCaptchaProvider: React.FC<ReCaptchaProviderProps> = ({
+  reCaptchaKey: passedReCaptchaKey,
+
+  useEnterprise = false,
+  useRecaptchaNet = false,
+  language,
+  children,
+
+  id = "google-recaptcha-v3",
+  strategy = "beforeInteractive",
+
+  src: passedSrc,
+  onLoad: passedOnLoad,
+  onError: passedOnError,
+
+  ...props
+}) => {
+  const [grecaptcha, setGreCaptcha] = useState<IReCaptcha | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  const reCaptchaKey =
+    (passedReCaptchaKey ?? env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY) || "";
+
+  const src =
+    passedSrc ??
+    getRecaptchaScriptSrc({
+      reCaptchaKey,
+      language,
+      useRecaptchaNet,
+      useEnterprise,
+    });
+
+  // Reset state when script src is changed
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    if (mounted.current) {
+      setLoaded(false);
+      setError(false);
+    }
+    mounted.current = true;
+  }, [src]);
+
+  // Handle script load
+  const onLoad = useCallback(
+    (e?: never) => {
+      const grecaptcha = useEnterprise
+        ? window?.grecaptcha?.enterprise
+        : window?.grecaptcha;
+
+      if (grecaptcha) {
+        grecaptcha.ready(() => {
+          setGreCaptcha(grecaptcha);
+          setLoaded(true);
+          passedOnLoad?.(grecaptcha, e);
+        });
+      }
+    },
+    [passedOnLoad, useEnterprise],
+  );
+
+  // Run 'onLoad' function once just in case if grecaptcha is already globally available in window
+  useEffect(() => onLoad(), [onLoad]);
+
+  // Handle script error
+  const onError = useCallback(
+    (e: ErrorEvent) => {
+      setError(true);
+      passedOnError?.(e);
+    },
+    [passedOnError],
+  );
+
+  // Prevent unnecessary rerenders
+  const value = useMemo(
+    () => ({ reCaptchaKey, grecaptcha, loaded, error }),
+    [reCaptchaKey, grecaptcha, loaded, error],
+  );
+
+  return (
+    <ReCaptchaContext.Provider value={value}>
+      {children}
+      <Script
+        id={id}
+        src={src}
+        strategy={strategy}
+        onLoad={onLoad}
+        onError={onError}
+        {...props}
+      />
+    </ReCaptchaContext.Provider>
+  );
+};
+
+export { ReCaptchaContext, useReCaptchaContext, ReCaptchaProvider };
+export type { ReCaptchaContextProps, ReCaptchaProviderProps };

src/containers/reCaptcha/utils.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useLayoutEffect } from "react";
+
+/**
+ * Function to generate the src for the script tag
+ * Refs: https://developers.google.com/recaptcha/docs/loading
+ */
+export const getRecaptchaScriptSrc = ({
+  reCaptchaKey,
+  language,
+  useRecaptchaNet = false,
+  useEnterprise = false,
+}: {
+  reCaptchaKey?: string;
+  language?: string;
+  useRecaptchaNet?: boolean;
+  useEnterprise?: boolean;
+} = {}): string => {
+  const hostName = useRecaptchaNet ? "recaptcha.net" : "google.com";
+  const script = useEnterprise ? "enterprise.js" : "api.js";
+
+  let src = `https://www.${hostName}/recaptcha/${script}?`;
+  if (reCaptchaKey) src += `render=${reCaptchaKey}`;
+  if (language) src += `&hl=${language}`;
+
+  return src;
+};
+
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;

src/env.mjs

@@ -22,6 +22,7 @@ export const env = createEnv({
       .string()
       .default("5")
       .transform((val) => Number(val)),
+    RECAPTCHA_SECRET_KEY: z.string().min(1),
   },
 
   /**
@@ -38,6 +39,7 @@ export const env = createEnv({
       .enum(["true", "false"])
       .default("false")
       .transform((val) => (val === "true" ? true : false)),
+    NEXT_PUBLIC_RECAPTCHA_SITE_KEY: z.string().min(1),
   },
 
   /**
@@ -55,6 +57,8 @@ export const env = createEnv({
     NEXT_PUBLIC_WS_URL: process.env.NEXT_PUBLIC_WS_URL,
     NEXT_PUBLIC_MOCK_AUTH: process.env.NEXT_PUBLIC_MOCK_AUTH,
     PLAYERS_PER_MATCH: process.env.PLAYERS_PER_MATCH,
+    NEXT_PUBLIC_RECAPTCHA_SITE_KEY: process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY,
+    RECAPTCHA_SECRET_KEY: process.env.RECAPTCHA_SECRET_KEY,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.

src/pages/index.tsx

@@ -1,5 +1,10 @@
-import { Homepage } from "~/containers/home/index.jsx";
+import { Homepage } from "~/containers/home/index.js";
+import { ReCaptchaProvider } from "~/containers/reCaptcha";
 
 export default function Home() {
-  return <Homepage />;
+  return (
+    <ReCaptchaProvider>
+      <Homepage />
+    </ReCaptchaProvider>
+  );
 }

src/server/api/root.ts

@@ -1,4 +1,9 @@
-import { userRouter, matchRouter, lobbyRouter } from "./routers/index.js";
+import {
+  lobbyRouter,
+  matchRouter,
+  recaptchaRouter,
+  userRouter,
+} from "./routers/index.js";
 import { createTRPCRouter } from "./trpc.js";
 
 /**
@@ -10,6 +15,7 @@ export const appRouter = createTRPCRouter({
   lobby: lobbyRouter,
   match: matchRouter,
   user: userRouter,
+  recaptcha: recaptchaRouter,
 });
 
 // export type definition of API

src/server/api/routers/index.ts

@@ -1,3 +1,4 @@
 export * from "./lobby.js";
 export * from "./match.js";
 export * from "./user.js";
+export * from "./recaptcha.js";