Merge pull request #308 from enkeii64/feat/display-all-contributors

feat: display all contributors

apps/web/next.config.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from "next";
+import { withBotId } from "botid/next/config";
 
 const nextConfig: NextConfig = {
   compiler: {
@@ -21,4 +22,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
+export default withBotId(nextConfig);

apps/web/package.json

@@ -27,6 +27,7 @@
     "@upstash/redis": "^1.35.0",
     "@vercel/analytics": "^1.4.1",
     "better-auth": "^1.2.7",
+    "botid": "^1.4.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",

apps/web/src/app/api/waitlist/route.ts

@@ -1,54 +1,77 @@
 import { NextRequest, NextResponse } from "next/server";
 import { db, eq } from "@opencut/db";
 import { waitlist } from "@opencut/db/schema";
+import { checkBotId } from "botid/server";
 import { nanoid } from "nanoid";
 import { waitlistRateLimit } from "@/lib/rate-limit";
 import { z } from "zod";
+import { env } from "@/env";
+import { cookies } from "next/headers";
+import crypto from "crypto";
 
 const waitlistSchema = z.object({
   email: z.string().email("Invalid email format").min(1, "Email is required"),
 });
 
+const CSRF_TOKEN_NAME = "waitlist-csrf";
+const TOKEN_EXPIRY = 60 * 60 * 1000;
+
+async function validateCSRFToken(request: NextRequest): Promise<boolean> {
+  const clientToken = request.headers.get("x-csrf-token");
+  if (!clientToken) return false;
+
+  const cookieStore = await cookies();
+  const cookieValue = cookieStore.get(CSRF_TOKEN_NAME)?.value;
+  if (!cookieValue) return false;
+
+  const [token, timestamp, signature] = cookieValue.split(":");
+  if (!token || !timestamp || !signature) return false;
+
+  if (clientToken !== token) return false;
+
+  const now = Date.now();
+  const tokenTime = parseInt(timestamp);
+  if (now - tokenTime > TOKEN_EXPIRY) return false;
+
+  const expectedSignature = crypto.createHmac("sha256", env.BETTER_AUTH_SECRET).update(`${token}:${timestamp}`).digest("hex");
+
+  return signature === expectedSignature;
+}
+
 export async function POST(request: NextRequest) {
-  // Rate limit check
+  const verification = await checkBotId();
+
+  if (verification.isBot) {
+    return NextResponse.json({ error: "Access denied" }, { status: 403 });
+  }
+
   const identifier = request.headers.get("x-forwarded-for") ?? "127.0.0.1";
   const { success } = await waitlistRateLimit.limit(identifier);
 
   if (!success) {
-    return NextResponse.json(
-      { error: "Too many requests. Please try again later." },
-      { status: 429 }
-    );
+    return NextResponse.json({ error: "Too many requests. Please try again later." }, { status: 429 });
+  }
+  const isValidToken = await validateCSRFToken(request);
+  if (!isValidToken) {
+    return NextResponse.json({ error: "Invalid security token" }, { status: 403 });
   }
 
   try {
     const body = await request.json();
     const { email } = waitlistSchema.parse(body);
 
-    // Check if email already exists
-    const existingEmail = await db
-      .select()
-      .from(waitlist)
-      .where(eq(waitlist.email, email.toLowerCase()))
-      .limit(1);
+    const existingEmail = await db.select().from(waitlist).where(eq(waitlist.email, email.toLowerCase())).limit(1);
 
     if (existingEmail.length > 0) {
-      return NextResponse.json(
-        { error: "Email already registered" },
-        { status: 409 }
-      );
+      return NextResponse.json({ error: "Email already registered" }, { status: 409 });
     }
 
-    // Add to waitlist
     await db.insert(waitlist).values({
       id: nanoid(),
       email: email.toLowerCase(),
     });
 
-    return NextResponse.json(
-      { message: "Successfully joined waitlist!" },
-      { status: 201 }
-    );
+    return NextResponse.json({ message: "Successfully joined waitlist!" }, { status: 201 });
   } catch (error) {
     if (error instanceof z.ZodError) {
       const firstError = error.errors[0];
@@ -56,9 +79,6 @@ export async function POST(request: NextRequest) {
     }
 
     console.error("Waitlist signup error:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
   }
 }

apps/web/src/app/api/waitlist/token/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import crypto from "crypto";
+import { env } from "@/env";
+
+const CSRF_TOKEN_NAME = "waitlist-csrf";
+const TOKEN_EXPIRY = 60 * 60 * 1000;
+const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"];
+
+export async function GET(request: NextRequest) {
+  const referer = request.headers.get("referer");
+  const host = request.headers.get("host");
+
+  if (referer) {
+    const refererUrl = new URL(referer);
+
+    if (!allowedHosts.some((allowed) => refererUrl.host === allowed || refererUrl.host.endsWith(allowed))) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+  } else if (host) {
+    if (!allowedHosts.some((allowed) => host === allowed || host.endsWith(allowed))) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+  } else {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  if (!env.BETTER_AUTH_SECRET) {
+    throw new Error("BETTER_AUTH_SECRET must be configured");
+  }
+
+  const token = crypto.randomBytes(32).toString("hex");
+  const timestamp = Date.now();
+  const signature = crypto.createHmac("sha256", env.BETTER_AUTH_SECRET).update(`${token}:${timestamp}`).digest("hex");
+
+  const cookieStore = await cookies();
+  cookieStore.set(CSRF_TOKEN_NAME, `${token}:${timestamp}:${signature}`, {
+    httpOnly: true,
+    secure: env.NODE_ENV === "production",
+    sameSite: "strict",
+    maxAge: TOKEN_EXPIRY / 1000,
+    path: "/",
+  });
+
+  return NextResponse.json({ token });
+}

apps/web/src/app/contributors/page.tsx

@@ -32,7 +32,7 @@ interface Contributor {
 async function getContributors(): Promise<Contributor[]> {
   try {
     const response = await fetch(
-      "https://api.github.com/repos/OpenCut-app/OpenCut/contributors",
+      "https://api.github.com/repos/OpenCut-app/OpenCut/contributors?per_page=100",
       {
         headers: {
           Accept: "application/vnd.github.v3+json",

apps/web/src/app/layout.tsx

@@ -7,9 +7,17 @@ import { TooltipProvider } from "../components/ui/tooltip";
 import { StorageProvider } from "../components/storage-provider";
 import { baseMetaData } from "./metadata";
 import { defaultFont } from "../lib/font-config";
+import { BotIdClient } from "botid/client";
 
 export const metadata = baseMetaData;
 
+const protectedRoutes = [
+  {
+    path: "/api/waitlist",
+    method: "POST",
+  },
+];
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -17,6 +25,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <BotIdClient protect={protectedRoutes} />
+      </head>
       <body className={`${defaultFont.className} font-sans antialiased`}>
         <ThemeProvider attribute="class" forcedTheme="dark">
           <TooltipProvider>

apps/web/src/components/landing/hero.tsx

@@ -4,7 +4,7 @@ import { motion } from "motion/react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { ArrowRight } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { toast } from "sonner";
 
 import Image from "next/image";
@@ -13,6 +13,28 @@ import { Handlebars } from "./handlebars";
 export function Hero() {
   const [email, setEmail] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [csrfToken, setCsrfToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+    fetch("/api/waitlist/token", {
+      credentials: "include",
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (isMounted && data.token) {
+          setCsrfToken(data.token);
+        }
+      })
+      .catch((err) => {
+        console.error("Failed to fetch CSRF token:", err);
+        if (isMounted) {
+          toast.error("Security initialization failed", {
+            description: "Please refresh the page to continue.",
+          });
+        }
+      });
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -24,6 +46,13 @@ export function Hero() {
       return;
     }
 
+    if (!csrfToken) {
+      toast.error("Security error", {
+        description: "Please refresh the page and try again.",
+      });
+      return;
+    }
+
     setIsSubmitting(true);
 
     try {
@@ -31,7 +60,9 @@ export function Hero() {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "X-CSRF-Token": csrfToken,
         },
+        credentials: "include",
         body: JSON.stringify({ email: email.trim() }),
       });
 
@@ -42,11 +73,18 @@ export function Hero() {
           description: "You'll be notified when we launch.",
         });
         setEmail("");
+
+        fetch("/api/waitlist/token", { credentials: "include" })
+          .then((res) => res.json())
+          .then((data) => {
+            if (data.token) setCsrfToken(data.token);
+          })
+          .catch((err) => {
+            console.error("Failed to refresh CSRF token:", err);
+          });
       } else {
         toast.error("Oops!", {
-          description:
-            (data as { error: string }).error ||
-            "Something went wrong. Please try again.",
+          description: (data as { error: string }).error || "Something went wrong. Please try again.",
         });
       }
     } catch (error) {
@@ -60,13 +98,7 @@ export function Hero() {
 
   return (
     <div className="min-h-[calc(100vh-4.5rem)] supports-[height:100dvh]:min-h-[calc(100dvh-4.5rem)] flex flex-col justify-between items-center text-center px-4">
-      <Image
-        className="absolute top-0 left-0 -z-50 size-full object-cover"
-        src="/landing-page-bg.png"
-        height={1903.5}
-        width={1269}
-        alt="landing-page.bg"
-      />
+      <Image className="absolute top-0 left-0 -z-50 size-full object-cover" src="/landing-page-bg.png" height={1903.5} width={1269} alt="landing-page.bg" />
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -89,20 +121,11 @@ export function Hero() {
           animate={{ opacity: 1 }}
           transition={{ delay: 0.4, duration: 0.8 }}
         >
-          A simple but powerful video editor that gets the job done. Works on
-          any platform.
+          A simple but powerful video editor that gets the job done. Works on any platform.
         </motion.p>
 
-        <motion.div
-          className="mt-12 flex gap-8 justify-center"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.6, duration: 0.8 }}
-        >
-          <form
-            onSubmit={handleSubmit}
-            className="flex gap-3 w-full max-w-lg flex-col sm:flex-row"
-          >
+        <motion.div className="mt-12 flex gap-8 justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6, duration: 0.8 }}>
+          <form onSubmit={handleSubmit} className="flex gap-3 w-full max-w-lg flex-col sm:flex-row">
             <div className="relative w-full">
               <Input
                 type="email"
@@ -110,19 +133,12 @@ export function Hero() {
                 className="h-11 text-base flex-1"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                disabled={isSubmitting}
+                disabled={isSubmitting || !csrfToken}
                 required
               />
             </div>
-            <Button
-              type="submit"
-              size="lg"
-              className="px-6 h-11 text-base !bg-foreground"
-              disabled={isSubmitting}
-            >
-              <span className="relative z-10">
-                {isSubmitting ? "Joining..." : "Join waitlist"}
-              </span>
+            <Button type="submit" size="lg" className="px-6 h-11 text-base !bg-foreground" disabled={isSubmitting || !csrfToken}>
+              <span className="relative z-10">{isSubmitting ? "Joining..." : "Join waitlist"}</span>
               <ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
             </Button>
           </form>

apps/web/src/lib/rate-limit.ts

@@ -12,4 +12,5 @@ export const waitlistRateLimit = new Ratelimit({
   redis,
   limiter: Ratelimit.slidingWindow(5, "1 m"), // 5 requests per minute
   analytics: true,
+  prefix: "waitlist-rate-limit",
 });

bun.lock

@@ -28,6 +28,7 @@
         "@upstash/redis": "^1.35.0",
         "@vercel/analytics": "^1.4.1",
         "better-auth": "^1.2.7",
+        "botid": "^1.4.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
@@ -507,6 +508,8 @@
 
     "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
 
+    "botid": ["botid@1.4.2", "", { "peerDependencies": { "next": "*", "react": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["next"] }, "sha512-yiRWEdxXa5QhxzJW4lTk0lRZkbqPsVWdGrhnHLLihZf0xBEtsTUGtxLqK++IY80FX/Ye/rNMnGqBp2pl4yYU8w=="],
+
     "brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],