CSRF Protection

1// CSRF protection is automatic for NextAuth routes:
2// - /api/auth/signin
3// - /api/auth/signout
4// - /api/auth/callback/*
5// - /api/auth/session
6
7// The middleware in src/middleware.ts handles validation

1"use client";
2
3import { getCsrfToken } from "next-auth/react";
4import { useEffect, useState } from "react";
5
6export function SecureForm() {
7  const [csrfToken, setCsrfToken] = useState<string>("");
8
9  useEffect(() => {
10    getCsrfToken().then((token) => {
11      if (token) setCsrfToken(token);
12    });
13  }, []);
14
15  return (
16    <form action="/api/your-endpoint" method="POST">
17      <input
18        type="hidden"
19        name="csrfToken"
20        value={csrfToken}
21      />
22      <input type="text" name="data" />
23      <button type="submit">Submit</button>
24    </form>
25  );
26}

1// src/lib/csrf.ts
2
3import { cookies } from "next/headers";
4import { createHash } from "crypto";
5
6export async function validateCsrfToken(token: string): Promise<boolean> {
7  const cookieStore = await cookies();
8  const sessionToken = cookieStore.get("next-auth.session-token")?.value;
9
10  if (!sessionToken || !token) {
11    return false;
12  }
13
14  // Validate token matches session
15  const expectedToken = createHash("sha256")
16    .update(`${sessionToken}csrf`)
17    .digest("hex");
18
19  return token === expectedToken;
20}
21
22// Usage in API route
23// src/app/api/secure-action/route.ts
24
25import { NextRequest, NextResponse } from "next/server";
26import { validateCsrfToken } from "@/lib/csrf";
27
28export async function POST(request: NextRequest) {
29  const body = await request.json();
30
31  const isValid = await validateCsrfToken(body.csrfToken);
32
33  if (!isValid) {
34    return NextResponse.json(
35      { error: "Invalid CSRF token" },
36      { status: 403 }
37    );
38  }
39
40  // Process secure action
41  return NextResponse.json({ success: true });
42}

1// src/lib/security.ts
2
3import { NextRequest, NextResponse } from "next/server";
4
5export function validateOrigin(request: NextRequest): boolean {
6  const origin = request.headers.get("origin");
7  const referer = request.headers.get("referer");
8
9  const allowedOrigins = [
10    process.env.NEXT_PUBLIC_APP_URL,
11    "http://localhost:3000",
12  ].filter(Boolean);
13
14  // Check origin header
15  if (origin && !allowedOrigins.includes(origin)) {
16    return false;
17  }
18
19  // Check referer header as fallback
20  if (!origin && referer) {
21    const refererUrl = new URL(referer);
22    if (!allowedOrigins.includes(refererUrl.origin)) {
23      return false;
24    }
25  }
26
27  return true;
28}
29
30// Usage in API route
31export async function POST(request: NextRequest) {
32  if (!validateOrigin(request)) {
33    return NextResponse.json(
34      { error: "Invalid request origin" },
35      { status: 403 }
36    );
37  }
38
39  // Process request
40}

1// src/lib/auth.ts
2
3import NextAuth from "next-auth";
4
5export const { handlers, auth, signIn, signOut } = NextAuth({
6  // ... other config
7
8  cookies: {
9    sessionToken: {
10      name: "next-auth.session-token",
11      options: {
12        httpOnly: true,
13        sameSite: "lax",
14        path: "/",
15        secure: process.env.NODE_ENV === "production",
16      },
17    },
18    csrfToken: {
19      name: "next-auth.csrf-token",
20      options: {
21        httpOnly: true,
22        sameSite: "lax",
23        path: "/",
24        secure: process.env.NODE_ENV === "production",
25      },
26    },
27  },
28});

1"use client";
2
3import { getCsrfToken } from "next-auth/react";
4
5async function secureApiCall(data: unknown) {
6  const csrfToken = await getCsrfToken();
7
8  const response = await fetch("/api/secure-action", {
9    method: "POST",
10    headers: {
11      "Content-Type": "application/json",
12      "X-CSRF-Token": csrfToken || "",
13    },
14    body: JSON.stringify(data),
15  });
16
17  return response.json();
18}
19
20// Custom hook for secure API calls
21import { useState, useCallback } from "react";
22
23export function useSecureApi() {
24  const [loading, setLoading] = useState(false);
25  const [error, setError] = useState<string | null>(null);
26
27  const call = useCallback(async (url: string, data: unknown) => {
28    setLoading(true);
29    setError(null);
30
31    try {
32      const csrfToken = await getCsrfToken();
33
34      const response = await fetch(url, {
35        method: "POST",
36        headers: {
37          "Content-Type": "application/json",
38          "X-CSRF-Token": csrfToken || "",
39        },
40        body: JSON.stringify(data),
41      });
42
43      if (!response.ok) {
44        throw new Error("Request failed");
45      }
46
47      return await response.json();
48    } catch (err) {
49      setError(err instanceof Error ? err.message : "Unknown error");
50      throw err;
51    } finally {
52      setLoading(false);
53    }
54  }, []);
55
56  return { call, loading, error };
57}