Add CSRF protection to contact form and home page; update dependencies

app/contact/page.tsx

@@ -2,21 +2,25 @@ import { Button } from "@/components/Button";
 import { ContactForm } from "@/components/client/ContactForm";
 import { Description, Header2 } from "@/components/Headers";
 import { contact } from "@/config";
+import { headers } from "next/headers";
 
 export const metadata = {
  title: "Contact",
  description: "If you have a project in mind, or just want to say hi, feel free to send me a message.",
 };
 
-export default function Page() {
+export default async function Page() {
+   const h = await headers();
+  const csrfToken = h.get('X-CSRF-Token') || 'missing';
+
  return (
   <div className="mb-16 mt-20">
    <section className="mb-12">
     <Header2 id="contact">Contact me</Header2>
     <Description>I’m always eager to explore new opportunities and take on exciting projects. If you have a project in mind, or just want to say hi, feel free to send me a message.</Description>
 
     <div className="my-6 flex w-full rounded-md border border-black/15 bg-white p-5 dark:border-neutral-800 dark:bg-[#161617]">
-     <ContactForm />
+     <ContactForm csrfToken={csrfToken} />
     </div>
     <Description>Or contact me with...</Description>
     <div className="mt-4 flex flex-wrap gap-4">

app/page.tsx

@@ -9,6 +9,7 @@ import { projects } from "@/config";
 import { header, contact, meta, technologies } from "@/config";
 import { GetUserData, getTotalContributionsForYears } from "@/lib/graphql";
 import { ConvertNumber } from "@/lib/utils";
+import { headers } from "next/headers";
 
 export const metadata = {
  title: header.title,
@@ -18,6 +19,8 @@ export const metadata = {
 export default async function HomePage() {
  const userData = await GetUserData();
  const contributions = await getTotalContributionsForYears();
+   const h = await headers();
+  const csrfToken = h.get('X-CSRF-Token') || 'missing';
 
  return (
   <>
@@ -103,7 +106,7 @@ export default async function HomePage() {
     <Description>I’m always eager to explore new opportunities and take on exciting projects. If you have a project in mind, or just want to say hi, feel free to send me a message.</Description>
 
     <div className="my-6 flex w-full rounded-md border border-black/15 bg-white p-5 dark:border-neutral-800 dark:bg-[#161617]">
-     <ContactForm />
+     <ContactForm csrfToken={csrfToken} />
     </div>
     <Description>Or contact me with...</Description>
     <div className="mt-4 flex flex-wrap gap-4">

components/client/ContactForm.tsx

@@ -7,7 +7,7 @@ import { useDebounce } from "@/lib/hooks";
 import { cn } from "@/lib/utils";
 import { contactFormSchema, ContactFormSchema } from "@/lib/validator";
 
-export function ContactForm() {
+export function ContactForm({ csrfToken }: { csrfToken: string }) {
  const [formData, setFormData] = useState<ContactFormSchema>({
   email: "",
   name: "",
@@ -88,6 +88,7 @@ export function ContactForm() {
    method: "POST",
    headers: {
     "Content-Type": "application/json",
+     "X-CSRF-Token": csrfToken,
    },
    body: JSON.stringify(data),
   });

middleware.ts

@@ -0,0 +1,13 @@
+import { createCsrfMiddleware } from '@edge-csrf/nextjs';
+
+const csrfMiddleware = createCsrfMiddleware({
+  cookie: {
+    secure: process.env.NODE_ENV === 'production',
+  },
+});
+
+export const middleware = csrfMiddleware;
+
+export const config = {
+  matcher: ['/', '/contact', '/api/contact'],
+};

package.json

@@ -19,6 +19,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "@edge-csrf/nextjs": "2.5.3-cloudflare-rc1",
     "@headlessui/react": "2.2.0",
     "@headlessui/tailwindcss": "0.2.1",
     "@vercel/analytics": "1.4.1",