Merge pull request #74 from kubetail-org/next15

Adds support for Next 15

.github/workflows/ci.yml

@@ -29,11 +29,40 @@ jobs:
       - uses: pnpm/action-setup@v3
         with:
           version: 9
-      - run: pnpm install
-      - run: pnpm -r test run -- --environment node
-      - run: pnpm -r test run -- --environment edge-runtime
-      - run: pnpm -r build # only necessary for miniflare
-      - run: pnpm -r test run -- --environment miniflare
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run tests
+        run: |
+          pnpm -r build # only necessary for miniflare
+          pnpm -r test run -- --environment node
+          pnpm -r test run -- --environment edge-runtime
+          pnpm -r test run -- --environment miniflare
+
+  test-nextjs:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        version: [13, 14, 15]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Next.js version
+        working-directory: packages/nextjs
+        run: pnpm install next@${{ matrix.version }}
+      - name: Run tests
+        working-directory: packages/nextjs
+        run: |
+          pnpm build # only necessary for miniflare
+          pnpm test run -- --environment node
+          pnpm test run -- --environment edge-runtime
+          pnpm test run -- --environment miniflare
 
   build:
     runs-on: ubuntu-latest

README.md

@@ -60,8 +60,10 @@ Now, all HTTP submission requests (e.g. POST, PUT, DELETE, PATCH) will be reject
 
 import { headers } from 'next/headers';
 
-export default function Page() {
-  const csrfToken = headers().get('X-CSRF-Token') || 'missing';
+export default async function Page() {
+  // NOTE: headers() don't need to be awaited in Next14
+  const h = await headers();
+  const csrfToken = h.get('X-CSRF-Token') || 'missing';
 
   return (
     <form action="/api/form-handler" method="post">
@@ -83,6 +85,8 @@ export async function POST() {
 }
 ```
 
+For more Next.js examples see the [package documentation](packages/nextjs).
+
 ## Quickstart (SvelteKit)
 
 First, install Edge-CSRF's SvelteKit integration library:
@@ -231,7 +235,7 @@ app.listen(port, () => {
 });
 ```
 
-With the middleware installed, all HTTP submission requests (e.g. POST, PUT, DELETE, PATCH) will be rejected if they do not include a valid CSRF token. 
+With the middleware installed, all HTTP submission requests (e.g. POST, PUT, DELETE, PATCH) will be rejected if they do not include a valid CSRF token.
 
 ## Quickstart (Node-HTTP)
 
@@ -313,7 +317,7 @@ server.listen(3000, () => {
 });
 ```
 
-With the CSRF protection method, all HTTP submission requests (e.g. POST, PUT, DELETE, PATCH) will be rejected if they do not include a valid CSRF token. 
+With the CSRF protection method, all HTTP submission requests (e.g. POST, PUT, DELETE, PATCH) will be rejected if they do not include a valid CSRF token.
 
 ## Development
 

examples/next15-approuter-html-submission/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next15-approuter-html-submission/README.md

@@ -0,0 +1,26 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, install dependencies:
+
+```bash
+npm install
+# or
+pnpm install
+# or
+yarn install
+```
+
+Next, run the development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+

examples/next15-approuter-html-submission/app/form-handler/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server';
+
+export async function POST() {
+  return NextResponse.json({ status: 'success' });
+}

examples/next15-approuter-html-submission/app/layout.tsx

@@ -0,0 +1,19 @@
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'edge-csrf html form submission example',
+};
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}

examples/next15-approuter-html-submission/app/page.tsx

@@ -0,0 +1,57 @@
+import { headers } from 'next/headers';
+
+import '../styles/globals.css';
+
+export default async function Page() {
+  const headersList = await headers();
+  const csrfToken = headersList.get('X-CSRF-Token') || 'missing';
+
+  return (
+    <>
+      <p>
+        CSRF token value:
+        {csrfToken}
+      </p>
+      <h2>HTML Form Submission Example:</h2>
+      <form action="/form-handler" method="post">
+        <legend>Form without CSRF (should fail):</legend>
+        <input type="text" name="input1" />
+        <button type="submit">Submit</button>
+      </form>
+      <br />
+      <form action="/form-handler" method="post">
+        <legend>Form with incorrect CSRF (should fail):</legend>
+        <input type="hidden" name="csrf_token" value="notvalid" />
+        <input type="text" name="input1" />
+        <button type="submit">Submit</button>
+      </form>
+      <br />
+      <form action="/form-handler" method="post">
+        <legend>Form with CSRF (should succeed):</legend>
+        <input type="hidden" name="csrf_token" value={csrfToken} />
+        <input type="text" name="input1" />
+        <button type="submit">Submit</button>
+      </form>
+      <h2>HTML File Upload Example:</h2>
+      <form action="/form-handler" method="post" encType="multipart/form-data">
+        <legend>Form without CSRF (should fail):</legend>
+        <input type="file" name="file1" />
+        <button type="submit">Submit</button>
+      </form>
+      <br />
+      <form action="/form-handler" method="post" encType="multipart/form-data">
+        <legend>Form with incorrect CSRF (should fail):</legend>
+        <input type="hidden" name="csrf_token" value="notvalid" />
+        <input type="file" name="file1" />
+        <button type="submit">Submit</button>
+      </form>
+      <br />
+      <form action="/form-handler" method="post" encType="multipart/form-data">
+        <legend>Form with CSRF (should succeed):</legend>
+        <input type="hidden" name="csrf_token" value={csrfToken} />
+        <input type="file" name="file1" />
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+}

examples/next15-approuter-html-submission/middleware.ts

@@ -0,0 +1,10 @@
+import { createCsrfMiddleware } from '@edge-csrf/nextjs';
+
+// initalize csrf protection middleware
+const csrfMiddleware = createCsrfMiddleware({
+  cookie: {
+    secure: process.env.NODE_ENV === 'production',
+  },
+});
+
+export const middleware = csrfMiddleware;

examples/next15-approuter-html-submission/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

examples/next15-approuter-html-submission/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig;

examples/next15-approuter-html-submission/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "edge-csrf-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@edge-csrf/nextjs": "^2.0.0",
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "eslint": "^8.52.0",
+    "eslint-config-next": "^15.0.0",
+    "next": "^15.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
+  }
+}

examples/next15-approuter-html-submission/styles/globals.css

@@ -0,0 +1,26 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: blue;
+  text-decoration: underline;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}

examples/next15-approuter-html-submission/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "target": "ES2017",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

examples/next15-approuter-js-submission-dynamic/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next15-approuter-js-submission-dynamic/README.md

@@ -0,0 +1,26 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, install dependencies:
+
+```bash
+npm install
+# or
+pnpm install
+# or
+yarn install
+```
+
+Next, run the development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+

examples/next15-approuter-js-submission-dynamic/app/form-handler/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server';
+
+export async function POST() {
+  return NextResponse.json({ status: 'success' });
+}

examples/next15-approuter-js-submission-dynamic/app/layout.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from 'next';
+import { headers } from 'next/headers';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const headersList = await headers();
+  const csrfToken = headersList.get('X-CSRF-Token') || 'missing';
+
+  return {
+    title: 'edge-csrf example',
+    other: {
+      'x-csrf-token': csrfToken,
+    },
+  };
+}
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}