feat(webapp): optional Cloudflare Turnstile check on magic-link sign-in

Adds an optional Cloudflare Turnstile bot check to magic-link sign-in.
Set `TURNSTILE_SITE_KEY` and `TURNSTILE_SECRET_KEY` and the login page's
email form shows a Turnstile widget, invisible for most visitors. The
server verifies its token before sending a magic link. Requests with a
missing or invalid token are refused. If Cloudflare can't be reached,
the request is allowed and an error is logged, so email sign-in keeps
working during an outage. It's off unless both keys are set.

Mono-RevId: d220edeb85b98f7afb3e2074e004769c198f88e7

Author: ericallam

.server-changes/magic-link-turnstile.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Self-hosted instances can add a Cloudflare Turnstile bot check to the magic-link sign-in form by setting `TURNSTILE_SITE_KEY` and `TURNSTILE_SECRET_KEY`. It's off unless both are set.

apps/webapp/app/components/TurnstileWidget.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from "react";
+
+export type TurnstileStatus = "pending" | "ready" | "error";
+
+type TurnstileApi = {
+  render(container: HTMLElement, options: Record<string, unknown>): string | undefined;
+  remove(widgetId: string): void;
+};
+
+declare global {
+  interface Window {
+    turnstile?: TurnstileApi;
+  }
+}
+
+const SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+
+let scriptPromise: Promise<TurnstileApi> | undefined;
+
+function loadTurnstile(): Promise<TurnstileApi> {
+  if (window.turnstile) {
+    return Promise.resolve(window.turnstile);
+  }
+
+  scriptPromise ??= new Promise<TurnstileApi>((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = SCRIPT_SRC;
+    script.async = true;
+    script.onload = () => {
+      if (window.turnstile) {
+        resolve(window.turnstile);
+      } else {
+        scriptPromise = undefined;
+        reject(new Error("Turnstile didn't initialize"));
+      }
+    };
+    script.onerror = () => {
+      scriptPromise = undefined;
+      script.remove();
+      reject(new Error("Turnstile failed to load"));
+    };
+    document.head.appendChild(script);
+  });
+
+  return scriptPromise;
+}
+
+/**
+ * Renders a Cloudflare Turnstile widget inside the surrounding form. Turnstile
+ * adds a hidden `cf-turnstile-response` input to the container, so the token is
+ * submitted with the form. Tokens are single use: remount the widget (change its
+ * `key`) after each submission.
+ */
+export function TurnstileWidget({
+  siteKey,
+  action,
+  onStatusChange,
+}: {
+  siteKey: string;
+  action: string;
+  onStatusChange?: (status: TurnstileStatus) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const onStatusChangeRef = useRef(onStatusChange);
+
+  useEffect(() => {
+    onStatusChangeRef.current = onStatusChange;
+  }, [onStatusChange]);
+
+  useEffect(() => {
+    let cancelled = false;
+    let widgetId: string | undefined;
+    const report = (status: TurnstileStatus) => {
+      if (!cancelled) onStatusChangeRef.current?.(status);
+    };
+
+    report("pending");
+    loadTurnstile()
+      .then((turnstile) => {
+        if (cancelled || !containerRef.current) return;
+        widgetId = turnstile.render(containerRef.current, {
+          sitekey: siteKey,
+          action,
+          theme: "dark",
+          appearance: "interaction-only",
+          "refresh-expired": "auto",
+          callback: () => report("ready"),
+          "expired-callback": () => report("pending"),
+          "error-callback": () => report("error"),
+        });
+      })
+      .catch(() => report("error"));
+
+    return () => {
+      cancelled = true;
+      if (widgetId) {
+        window.turnstile?.remove(widgetId);
+      }
+    };
+  }, [siteKey, action]);
+
+  return <div ref={containerRef} className="flex w-full justify-center empty:hidden" />;
+}

apps/webapp/app/env.server.ts

@@ -406,6 +406,8 @@ const EnvironmentSchema = z
       .refine(isValidRegex, "WHITELISTED_EMAILS must be a valid regex.")
       .optional(),
     BLOCKED_EMAIL_DOMAINS: z.string().optional(),
+    TURNSTILE_SITE_KEY: z.string().optional(),
+    TURNSTILE_SECRET_KEY: z.string().optional(),
     ADMIN_EMAILS: z.string().refine(isValidRegex, "ADMIN_EMAILS must be a valid regex.").optional(),
     // Instance-level kill switch for the admin dashboard and user impersonation.
     ADMIN_DASHBOARD_ENABLED: BoolEnv.default(true),

apps/webapp/app/routes/login._index/route.tsx

@@ -3,6 +3,7 @@ import { parseWithZod } from "@conform-to/zod/v4";
 import { EnvelopeIcon, LockClosedIcon } from "@heroicons/react/20/solid";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Form, useNavigation } from "@remix-run/react";
+import { useEffect, useRef, useState } from "react";
 import { GitHubLightIcon } from "@trigger.dev/companyicons";
 import { motion, useReducedMotion } from "framer-motion";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -18,6 +19,8 @@ import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Spinner } from "~/components/primitives/Spinner";
+import { TurnstileWidget, type TurnstileStatus } from "~/components/TurnstileWidget";
+import { env } from "~/env.server";
 import { TextLink } from "~/components/primitives/TextLink";
 import { isGithubAuthSupported, isGoogleAuthSupported } from "~/services/auth.server";
 import { getLastAuthMethod } from "~/services/lastAuthMethod.server";
@@ -101,6 +104,9 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const prefilledEmail = getAuthorizationEmail(redirectTo);
   const lastAuthMethod = await getLastAuthMethod(request);
 
+  const turnstileSiteKey =
+    env.TURNSTILE_SITE_KEY && env.TURNSTILE_SECRET_KEY ? env.TURNSTILE_SITE_KEY : null;
+
   const notice =
     url.searchParams.get("reason") === SSO_SESSION_EXPIRED_REASON
       ? "Your SSO session expired. Please sign in again."
@@ -157,6 +163,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
         authError,
         notice,
         prefilledEmail,
+        turnstileSiteKey,
         isVercelMarketplace: redirectTo.startsWith("/vercel/callback"),
       },
       { headers }
@@ -172,6 +179,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
         authError,
         notice,
         prefilledEmail,
+        turnstileSiteKey,
         isVercelMarketplace: false,
       },
       { headers }
@@ -204,6 +212,19 @@ export default function LoginPage() {
     navigation.formAction === "/login/magic" &&
     navigation.formData?.get("action") === "send";
 
+  const [turnstileStatus, setTurnstileStatus] = useState<TurnstileStatus>("pending");
+  const [turnstileKey, setTurnstileKey] = useState(0);
+  const wasSendingRef = useRef(false);
+  useEffect(() => {
+    if (isEmailLoading) {
+      wasSendingRef.current = true;
+    } else if (wasSendingRef.current) {
+      wasSendingRef.current = false;
+      setTurnstileKey((key) => key + 1);
+    }
+  }, [isEmailLoading]);
+  const waitingForTurnstile = data.turnstileSiteKey !== null && turnstileStatus !== "ready";
+
   const [emailForm, emailFields] = useForm({
     id: "login-email",
     defaultValue: {
@@ -323,12 +344,26 @@ export default function LoginPage() {
                           {emailFields.email.errors}
                         </FormError>
                       </InputGroup>
+                      {data.turnstileSiteKey && (
+                        <TurnstileWidget
+                          key={turnstileKey}
+                          siteKey={data.turnstileSiteKey}
+                          action="magic-link"
+                          onStatusChange={setTurnstileStatus}
+                        />
+                      )}
+                      {data.turnstileSiteKey && turnstileStatus === "error" && (
+                        <FormError>
+                          We couldn't load the verification check. Refresh the page or use another
+                          sign-in option.
+                        </FormError>
+                      )}
                       <div className="relative w-full">
                         {data.lastAuthMethod === "email" && <LastUsedBadge />}
                         <Button
                           type="submit"
                           variant="primary/large"
-                          disabled={isEmailLoading}
+                          disabled={isEmailLoading || waitingForTurnstile}
                           fullWidth
                           data-action="continue with email"
                         >

apps/webapp/app/routes/login.magic/route.tsx

@@ -32,10 +32,12 @@ import {
   canonicalizeEmailForRateLimit,
 } from "~/services/magicLinkRateLimiter.server";
 import { ssoRedirectForEmail } from "~/services/ssoAutoDiscovery.server";
-import { logger, tryCatch } from "@trigger.dev/core/v3";
+import { tryCatch } from "@trigger.dev/core/v3";
+import { logger } from "~/services/logger.server";
 import { env } from "~/env.server";
 import { extractClientIp } from "~/utils/extractClientIp.server";
 import { magicLinkEmailCookie } from "./magicLinkEmailCookie.server";
+import { TURNSTILE_RESPONSE_FIELD, verifyTurnstileToken } from "~/services/turnstile.server";
 import { keepFlashedErrorOnTimezoneSave } from "~/utils/flashedErrorRevalidation";
 
 export const shouldRevalidate = keepFlashedErrorOnTimezoneSave;
@@ -166,11 +168,53 @@ export async function action({ request }: ActionFunctionArgs) {
   switch (data.action) {
     case "send": {
       const { email } = data;
+      const clientIp = extractClientIp(request.headers.get("x-forwarded-for"));
+
+      if (env.TURNSTILE_SITE_KEY && env.TURNSTILE_SECRET_KEY) {
+        const token = payload[TURNSTILE_RESPONSE_FIELD];
+        const verification = await verifyTurnstileToken({
+          secretKey: env.TURNSTILE_SECRET_KEY,
+          token: typeof token === "string" ? token : undefined,
+          remoteIp: clientIp,
+        });
 
-      if (env.LOGIN_RATE_LIMITS_ENABLED) {
-        const xff = request.headers.get("x-forwarded-for");
-        const clientIp = extractClientIp(xff);
+        if (verification.outcome === "failed") {
+          if (verification.misconfigured) {
+            logger.error(
+              "Login magic link Turnstile secret is misconfigured, refusing the request",
+              {
+                clientIp,
+                errorCodes: verification.errorCodes,
+              }
+            );
+          } else {
+            logger.warn("Login magic link Turnstile check failed", {
+              clientIp,
+              errorCodes: verification.errorCodes,
+            });
+          }
+
+          const session = await getUserSession(request);
+          session.flash("auth:error", {
+            message: "We couldn't verify this request. Please try again.",
+          });
 
+          return redirect("/login", {
+            headers: {
+              "Set-Cookie": await commitSession(session),
+            },
+          });
+        }
+
+        if (verification.outcome === "unavailable") {
+          logger.error("Login magic link Turnstile check unavailable, allowing the request", {
+            clientIp,
+            reason: verification.reason,
+          });
+        }
+      }
+
+      if (env.LOGIN_RATE_LIMITS_ENABLED) {
         // Key the buckets on the canonical address so `+tag` aliases (and
         // Gmail dot variants) of one inbox share it. Delivery still uses the
         // raw submitted address below.