From 5178732c4c1205698d1846dd82896d9342558ac6 Mon Sep 17 00:00:00 2001 From: Ahmet Kilinc Date: Wed, 16 Jul 2025 00:44:42 +0100 Subject: csrf token and browser detection --- apps/web/src/components/landing/hero.tsx | 71 +++++++++++++++++--------------- 1 file changed, 38 insertions(+), 33 deletions(-) (limited to 'apps/web/src/components/landing/hero.tsx') diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 462e3ba7..54aba300 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/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,20 @@ import { Handlebars } from "./handlebars"; export function Hero() { const [email, setEmail] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); + const [csrfToken, setCsrfToken] = useState(null); + + useEffect(() => { + fetch("/api/waitlist/token", { + credentials: "include", + }) + .then((res) => res.json()) + .then((data) => { + if (data.token) { + setCsrfToken(data.token); + } + }) + .catch((err) => console.error("Failed to fetch CSRF token:", err)); + }, []); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -24,6 +38,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 +52,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 +65,15 @@ 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); + }); } 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 +87,7 @@ export function Hero() { return (
- landing-page.bg + landing-page.bg - 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. - -
+ +
setEmail(e.target.value)} - disabled={isSubmitting} + disabled={isSubmitting || !csrfToken} required />
- -- cgit v1.3.1 From ece9c78b16acd683f09b0fcd7c7b515c64da52f9 Mon Sep 17 00:00:00 2001 From: Ahmet Kilinc Date: Wed, 16 Jul 2025 01:05:42 +0100 Subject: coderabbit comments --- apps/web/src/app/api/waitlist/route.ts | 5 +---- apps/web/src/app/api/waitlist/token/route.ts | 13 ++++++------- apps/web/src/components/landing/hero.tsx | 15 +++++++++++++-- 3 files changed, 20 insertions(+), 13 deletions(-) (limited to 'apps/web/src/components/landing/hero.tsx') diff --git a/apps/web/src/app/api/waitlist/route.ts b/apps/web/src/app/api/waitlist/route.ts index 031ebd5a..076dd228 100644 --- a/apps/web/src/app/api/waitlist/route.ts +++ b/apps/web/src/app/api/waitlist/route.ts @@ -135,10 +135,7 @@ async function validateCSRFToken(request: NextRequest): Promise { const tokenTime = parseInt(timestamp); if (now - tokenTime > TOKEN_EXPIRY) return false; - const expectedSignature = crypto - .createHmac("sha256", env.BETTER_AUTH_SECRET || "fallback-secret") - .update(`${token}:${timestamp}`) - .digest("hex"); + const expectedSignature = crypto.createHmac("sha256", env.BETTER_AUTH_SECRET).update(`${token}:${timestamp}`).digest("hex"); return signature === expectedSignature; } diff --git a/apps/web/src/app/api/waitlist/token/route.ts b/apps/web/src/app/api/waitlist/token/route.ts index 76622fc5..4c7695fa 100644 --- a/apps/web/src/app/api/waitlist/token/route.ts +++ b/apps/web/src/app/api/waitlist/token/route.ts @@ -5,6 +5,7 @@ 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"); @@ -12,14 +13,11 @@ export async function GET(request: NextRequest) { if (referer) { const refererUrl = new URL(referer); - const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"]; if (!allowedHosts.some((allowed) => refererUrl.host === allowed || refererUrl.host.endsWith(allowed))) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }); } } else if (host) { - const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"]; - if (!allowedHosts.some((allowed) => host === allowed || host.endsWith(allowed))) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }); } @@ -27,12 +25,13 @@ export async function GET(request: NextRequest) { 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 || "fallback-secret") - .update(`${token}:${timestamp}`) - .digest("hex"); + 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}`, { diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 54aba300..b1910dc5 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -16,16 +16,24 @@ export function Hero() { const [csrfToken, setCsrfToken] = useState(null); useEffect(() => { + let isMounted = true; fetch("/api/waitlist/token", { credentials: "include", }) .then((res) => res.json()) .then((data) => { - if (data.token) { + if (isMounted && data.token) { setCsrfToken(data.token); } }) - .catch((err) => console.error("Failed to fetch CSRF token:", err)); + .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) => { @@ -70,6 +78,9 @@ export function Hero() { .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!", { -- cgit v1.3.1