add Turnstile captcha to login flow

Author: jnsdls

apps/dashboard/src/app/login/LoginPage.tsx

@@ -4,9 +4,11 @@ import { redirectToCheckout } from "@/actions/billing";
 import { getRawAccountAction } from "@/actions/getAccount";
 import { ToggleThemeButton } from "@/components/color-mode-toggle";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { TURNSTILE_SITE_KEY } from "@/constants/env";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { Turnstile } from "@marsidev/react-turnstile";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { Suspense, lazy, useEffect, useState } from "react";
@@ -216,36 +218,49 @@ function CustomConnectEmbed(props: {
 }) {
   const { theme } = useTheme();
   const client = useThirdwebClient();
+  const [turnstileToken, setTurnstileToken] = useState("");
 
   return (
-    <ConnectEmbed
-      auth={{
-        getLoginPayload,
-        doLogin: async (params) => {
-          try {
-            await doLogin(params);
-            props.onLogin();
-          } catch (e) {
-            console.error("Failed to login", e);
-            throw e;
-          }
-        },
-        doLogout,
-        isLoggedIn: async (x) => {
-          const isLoggedInResult = await isLoggedIn(x);
-          if (isLoggedInResult) {
-            props.onLogin();
-          }
-          return isLoggedInResult;
-        },
-      }}
-      wallets={wallets}
-      client={client}
-      modalSize="wide"
-      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
-      className="shadow-lg"
-      privacyPolicyUrl="/privacy-policy"
-      termsOfServiceUrl="/terms"
-    />
+    <div className="flex flex-col items-center gap-4">
+      <ConnectEmbed
+        auth={{
+          getLoginPayload,
+          doLogin: async (params) => {
+            try {
+              await doLogin(params, turnstileToken);
+              props.onLogin();
+            } catch (e) {
+              console.error("Failed to login", e);
+              throw e;
+            }
+          },
+          doLogout,
+          isLoggedIn: async (x) => {
+            const isLoggedInResult = await isLoggedIn(x);
+            if (isLoggedInResult) {
+              props.onLogin();
+            }
+            return isLoggedInResult;
+          },
+        }}
+        wallets={wallets}
+        client={client}
+        modalSize="wide"
+        theme={getSDKTheme(theme === "light" ? "light" : "dark")}
+        className="shadow-lg"
+        privacyPolicyUrl="/privacy-policy"
+        termsOfServiceUrl="/terms"
+      />
+      <Turnstile
+        options={{
+          // only show if interaction is required
+          appearance: "interaction-only",
+          // match the theme of the rest of the app
+          theme: theme === "light" ? "light" : "dark",
+        }}
+        siteKey={TURNSTILE_SITE_KEY}
+        onSuccess={(token) => setTurnstileToken(token)}
+      />
+    </div>
   );
 }

apps/dashboard/src/app/login/auth-actions.ts

@@ -3,7 +3,8 @@ import "server-only";
 
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { API_SERVER_URL, THIRDWEB_API_SECRET } from "@/constants/env";
-import { cookies } from "next/headers";
+import { ipAddress } from "@vercel/functions";
+import { cookies, headers } from "next/headers";
 import { getAddress } from "thirdweb";
 import type {
   GenerateLoginPayloadParams,
@@ -36,11 +37,48 @@ export async function getLoginPayload(
   return (await res.json()).data.payload;
 }
 
-export async function doLogin(payload: VerifyLoginPayloadParams) {
+export async function doLogin(
+  payload: VerifyLoginPayloadParams,
+  turnstileToken: string,
+) {
   if (!THIRDWEB_API_SECRET) {
     throw new Error("API_SERVER_SECRET is not set");
   }
 
+  if (!turnstileToken) {
+    throw new Error("Missing Turnstile token.");
+  }
+
+  // get the request headers
+  const requestHeaders = await headers();
+  // CF header, fallback to req.ip, then X-Forwarded-For
+  const ip =
+    requestHeaders.get("CF-Connecting-IP") ||
+    ipAddress(requestHeaders) ||
+    requestHeaders.get("X-Forwarded-For");
+
+  // https://developers.cloudflare.com/turnstile/get-started/server-side-validation/
+  // Validate the token by calling the "/siteverify" API endpoint.
+  const result = await fetch(
+    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
+    {
+      body: JSON.stringify({
+        secret: process.env.TURNSTILE_SECRET_KEY,
+        response: turnstileToken,
+        remoteip: ip,
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+
+  const outcome = await result.json();
+  if (!outcome.success) {
+    throw new Error("Could not validate captcha.");
+  }
+
   const cookieStore = await cookies();
   const utmCookies = cookieStore
     .getAll()