feat: integrate Turnstile captcha for enhanced login security & enhance metadata for blogs & whole project :)

Author: sanderhd

app/api/login/route.ts

@@ -1,31 +1,55 @@
 import { NextRequest, NextResponse } from "next/server";
 import { verifyAdminPassword, createSession } from "@/lib/auth";
+import { error } from "console";
+
+async function verifyTurnstile(token: string, remoteip?: string) {
+  const secret = process.env.TURNSTILE_SECRET_KEY;
+  if (!secret) return false;
+
+  const body = new URLSearchParams();
+  body.append("secret", secret);
+  body.append("response", token);
+  if (remoteip) body.append("remoteip", remoteip);
+
+  const res = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body,
+  });
+
+  if (!res.ok) return false;
+  const data = await res.json();
+  return data.success === true;
+}
 
 export async function POST(request: NextRequest) {
   try {
-    const { password } = await request.json();
+    const { password, turnstileToken } = await request.json();
 
-    if (!password) {
+    if (!password || !turnstileToken) {
       return NextResponse.json(
-        { error: "Password is required" },
+        error({ error: "Password and Turnstile token are required" }),
         { status: 400 }
-      );
+      )
     }
 
-    const isValid = await verifyAdminPassword(password);
+    const ip = request.headers.get("x-forwarder-for")?.split(",")[0].trim();
+    const turnstileOk = await verifyTurnstile(turnstileToken, ip);
 
-    if (!isValid) {
-      return NextResponse.json(
-        { error: "Invalid password" },
-        { status: 401 }
-      );
+    if (!turnstileOk) {
+      return NextResponse.json({
+        error: "Capcha verification failed. Please try again."
+      }, { status: 401 })
     }
 
+    const isValid = await verifyAdminPassword(password);
+    if (!isValid) {
+      return NextResponse.json({ error: "Invalid password" }, { status: 401 });
+    }
     await createSession();
 
     return NextResponse.json({ success: true });
   } catch (error) {
-    console.error("Login error:", error);
     return NextResponse.json(
       { error: "Internal server error" },
       { status: 500 }

app/blog/[slug]/page.tsx

@@ -4,13 +4,49 @@ import { notFound } from "next/navigation";
 import { prisma } from "@/lib/prisma"
 import Link from "next/link";
 import { ArrowBigLeftDash } from "lucide-react";
+import { Metadata } from "next";
 
 type BlogPageProps = {
     params: Promise<{
         slug: string;
     }>;
 };
 
+export async function generateMetadata({
+    params,
+}: {
+    params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+    const { slug } = await params;
+    const blog = await prisma.blog.findFirst({
+        where: { slug, published: true },
+    });
+
+    if (!blog) {
+        return { title: "Blog not found" };
+    }
+
+    const description = blog.summary || blog.content?.slice(0, 160) || "";
+
+    return {
+        title: blog.title,
+        description,
+        openGraph: {
+            title: blog.title,
+            description,
+            images: blog.thumbnail ? [{ url: blog.thumbnail }] : [],
+            type: "article",
+            publishedTime: blog.createdAt.toISOString(),
+        },
+        twitter: {
+            card: "summary_large_image",
+            title: blog.title,
+            description,
+            images: blog.thumbnail ? [blog.thumbnail] : [],
+        },
+    };
+}
+
 export default async function BlogDetailPage({ params }: BlogPageProps) {
     const { slug } = await params;
 

app/layout.tsx

@@ -14,7 +14,24 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: "sander.tf",
-  description: "sander.tf",
+  description: "This is my personal website! Explore my projects, blogs, and more.",
+  keywords: ["blog", "projects"],
+
+  openGraph: {
+    title: "sander.tf",
+    description: "This is my personal website! Explore my projects, blogs, and more.",
+    url: "https://sander.tf/",
+    siteName: "sander.tf",
+    images: [{ url: "https://sander.tf/sander-tf.png" }],
+    type: "website",
+  },
+
+  twitter: {
+    card: "summary_large_image",
+    title: "sander.tf",
+    description: "This is my personal website! Explore my projects, blogs, and more.",
+    images: ["https://sander.tf/sander-tf.png"]
+  },
 };
 
 export default function RootLayout({

app/login/page.tsx

@@ -3,10 +3,11 @@
 import { FormEvent, useState } from "react";
 import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
+import { Turnstile } from "@marsidev/react-turnstile";
 
 export default function LoginPage() {
 	const router = useRouter();
-
+	const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
 	const [password, setPassword] = useState("");
 	const [error, setError] = useState<string | null>(null);
 	const [loading, setLoading] = useState(false);
@@ -16,11 +17,17 @@ export default function LoginPage() {
 		setLoading(true);
 		setError(null);
 
+		if(!turnstileToken) {
+			setError("Please complete the captcha.");
+			setLoading(false);
+			return;
+		}
+
 		try {
 			const response = await fetch("/api/login", {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ password }),
+				body: JSON.stringify({ password, turnstileToken }),
 			});
 
 			const data = await response.json();
@@ -84,7 +91,22 @@ export default function LoginPage() {
 						</div>
 
 						{error ? <p className="text-sm text-red-600 dark:text-red-400">{error}</p> : null}
-
+						
+						<div className="rounded-2xl border border-slate-200/80 bg-slate-50/70 p-3 dark:border-slate-800 dark:bg-slate-900/40">
+							<Turnstile
+								className="mx-auto"
+								siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!}
+								options={{
+									size: "flexible",
+									theme: "auto",
+									appearance: "interaction-only",
+								}}
+								onSuccess={(token) => setTurnstileToken(token)}
+								onExpire={() => setTurnstileToken(null)}
+								onError={() => setTurnstileToken(null)}
+							/>
+						</div>
+					
 						<motion.button
 							type="submit"
 							disabled={loading}

package-lock.json

@@ -11,6 +11,7 @@
     "reset-admin-password": "tsx scripts/reset-admin-password.ts"
   },
   "dependencies": {
+    "@marsidev/react-turnstile": "^1.4.2",
     "@prisma/client": "^6.19.2",
     "bcryptjs": "^3.0.3",
     "framer-motion": "^12.35.0",