feat: anti-bot filtering with reCAPTCHA v3

.env.example

@@ -21,4 +21,7 @@ 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"
+
 HUGGING_FACE_TOKEN="<your_token>"

deployment/staging/deployment.yaml

@@ -42,5 +42,11 @@ spec:
             - name: NEXT_PUBLIC_WS_URL
               value: wss://bot-busters.staging.kryha.dev
             - name: PLAYERS_PER_MATCH
-              # TODO: set to correct value
               value: "3"
+            - name: NEXT_PUBLIC_RECAPTCHA_SITE_KEY
+              value: "6LdpdiEpAAAAAJ6HKbT9Dmax-Li-SipyWdTcV0qW"
+            - name: RECAPTCHA_SECRET_KEY
+              valueFrom:
+                 secretKeyRef:
+                   name: backend-secrets
+                   key: recaptcha_secret_key

deployment/staging/secrets.template.yaml

@@ -7,3 +7,4 @@ data:
   db_password: $DB_PASSWORD
   nextauth_secret: $NEXTAUTH_SECRET
   hugging_face_token: $HUGGING_FACE_TOKEN
+  recaptcha_secret_key: $RECAPTCHA_SECRET_KEY

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,16 +3,17 @@ 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.js";
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
     children: ReactElement;
   },
-  ref: Ref<unknown>
+  ref: Ref<unknown>,
 ) {
   return <Slide direction="left" ref={ref} {...props} />;
 });
@@ -24,6 +25,13 @@ interface Props {
 }
 
 export const MenuDialog: FC<Props> = ({ open, setOpen }) => {
+  const { push } = useRouter();
+
+  const goHome = () => {
+    setOpen(false);
+    void push(pages.home);
+  };
+
   const handleClose = () => {
     setOpen(false);
   };
@@ -37,6 +45,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,28 +1,42 @@
 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";
 
-import { text } from "~/assets/text/index.js";
+import { useRecaptcha } from "~/service/index.js";
 import { TopRanked } from "~/components/index.js";
+import { isValidSession } from "~/utils/session.js";
+import Script from "next/script";
 import { api } from "~/utils/api.js";
+import { text } from "~/assets/text/index.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";
 
 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 { scriptProps, executeRecaptcha, ...props } = useRecaptcha();
 
   const handleGameStart = async () => {
+    const captchaToken = await executeRecaptcha("start_game");
+
     try {
       if (!isValidSession(sessionData)) {
-        await signIn("credentials", { callbackUrl: pages.lobby });
+        const result = await verifyCaptcha.mutateAsync({ captchaToken });
+        if (!result) {
+          await signIn("credentials", {
+            callbackUrl: pages.lobby,
+          });
+        } else {
+          setIsRecaptchaFailed(true);
+          return;
+        }
       } else {
-        await push(pages.lobby);
+        void push(pages.lobby);
       }
     } catch (error) {
       console.error(error);
@@ -38,6 +52,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
@@ -61,6 +80,14 @@ export const Homepage = () => {
         </Button>
       </Stack>
       <TopRanked players={TOP_RANKED_PLAYERS} />
+      <Script
+        id={scriptProps.id}
+        src={scriptProps.src}
+        strategy={scriptProps.strategy}
+        onLoad={scriptProps.onLoad}
+        onError={scriptProps.onError}
+        {...props}
+      />
     </Stack>
   );
 };

src/containers/home/index.ts

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

src/env.mjs

@@ -23,6 +23,7 @@ export const env = createEnv({
       .default("5")
       .transform((val) => Number(val)),
     HUGGING_FACE_TOKEN: z.string(),
+    RECAPTCHA_SECRET_KEY: z.string().min(1),
   },
 
   /**
@@ -39,6 +40,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),
   },
 
   /**
@@ -57,6 +59,8 @@ export const env = createEnv({
     NEXT_PUBLIC_MOCK_AUTH: process.env.NEXT_PUBLIC_MOCK_AUTH,
     PLAYERS_PER_MATCH: process.env.PLAYERS_PER_MATCH,
     HUGGING_FACE_TOKEN: process.env.HUGGING_FACE_TOKEN,
+    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,4 +1,4 @@
-import { Homepage } from "~/containers/home/index.jsx";
+import { Homepage } from "~/containers/home/index.js";
 
 export default function Home() {
   return <Homepage />;

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";

src/server/api/routers/recaptcha.ts

@@ -0,0 +1,55 @@
+import { createTRPCRouter, protectedProcedure } from "../trpc.js";
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+import { env } from "~/env.mjs";
+import { type RecaptchaResponse } from "~/types/recaptcha";
+
+const SCORE_THRESHOLD = 0.5;
+export const recaptchaRouter = createTRPCRouter({
+  verify: protectedProcedure
+    .input(z.object({ captchaToken: z.string() }))
+    .mutation(async ({ input }) => {
+      const { captchaToken } = input;
+
+      // Check if it's (development mode)
+      if (env.NODE_ENV === "development") {
+        return false;
+      }
+
+      try {
+        // Verify the Google reCaptcha token v3
+        const response = await fetch(
+          "https://www.google.com/recaptcha/api/siteverify",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type":
+                "application/x-www-form-urlencoded; charset=utf-8",
+            },
+            body: `secret=${env.RECAPTCHA_SECRET_KEY}&response=${captchaToken}`,
+          },
+        );
+
+        /**
+         * The structure of response from the verify API is
+         * {
+         *  "success": true | false,    // whether this request was a valid reCAPTCHA token for your site
+         *  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
+         *  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
+         *  "error-codes": [...]        // optional
+         }
+         */
+        const json = (await response.json()) as RecaptchaResponse;
+
+        if (!json.success) {
+          console.log(`Recaptcha token is not valid`);
+          throw new TRPCError({ code: "BAD_REQUEST" });
+        }
+
+        // If the score is below < SCORE_THRESHOLD, return true
+        return json.score < SCORE_THRESHOLD;
+      } catch (error) {
+        console.log(`Recaptcha cannot be verified`);
+      }
+    }),
+});

src/service/index.ts

@@ -1 +1,2 @@
 export * from "./profanity-filter/index.js";
+export * from "./recaptcha/index.js";

src/service/recaptcha/index.ts

@@ -0,0 +1 @@
+export * from "./recaptcha.js";