verified works with next 14, added next14 to peer deps, refactored ex…

…amples, bumped version number
kubetail-org · Nov 6, 2023 · c220c45 · c220c45
1 parent a2da8e3
commit c220c45
Show file tree

Hide file tree

Showing 148 changed files with 18,570 additions and 3,844 deletions.
diff --git a/README.md b/README.md
@@ -6,14 +6,16 @@ This library uses the cookie strategy from [expressjs/csurf](https://github.com/
 
 # Features
 
-- Supports Next.js 13
+- Supports app-router and pages-router Next.js 13 and Next.js 14
 - Runs in edge runtime
 - Implements cookie strategy from [expressjs/csurf](https://github.com/expressjs/csurf) and the crypto logic from [pillarjs/csrf](https://github.com/pillarjs/csrf)
 - Gets token from HTTP request header (`X-CSRF-Token`) or from request body field (`csrf_token`)
 - Handles form-urlencoded, multipart/form-data or json-encoded HTTP request bodies
 - Customizable cookie options
 - TypeScript definitions included
 
+**Note: There's an issue with Next.js middleware in v13.3.X and v13.4.X that prevents edge-csrf from working properly with the pages-router in a dev environment (https://github.com/vercel/next.js/issues/48083, https://github.com/vercel/next.js/issues/48546)**
+
 # Quickstart
 
 To use Edge-CSRF, first add it as a dependency to your app:
@@ -57,8 +59,6 @@ export async function middleware(request: NextRequest) {
 }
 ```
 
-:boom: Note: the example above sends a response directly from middleware. This feature is enabled by default in Next.js 13.1+. To enable this in Next.js 13.0.X you must set the `allowMiddlewareResponseBody` flag in the Next.js config file. Alternatively, you can use `NextResponse.rewrite()` to handle the response.
-
 Now, all HTTP submission requests (e.g. POST, PUT, DELETE, PATCH) will be rejected if they do not include a valid CSRF token. To add the CSRF token to your forms, you can fetch it from the `X-CSRF-Token` HTTP response header server-side or client-side. For example:
 
 ```typescript
@@ -104,6 +104,10 @@ export default function handler(req: NextApiRequest, res: NextApiResponse<Data>)
 }
 ```
 
+# Examples
+
+See more examples in the [/examples](examples) directory in this repository.
+
 # Configuration
 
 To configure the CSRF middleware function just pass an object containing your options to the initialization method:

diff --git a/example-ts-appdir/app/page.tsx b/example-ts-appdir/app/page.tsx
diff --git a/example-ts-appdir/package.json b/example-ts-appdir/package.json
diff --git a/example-ts/package.json b/example-ts/package.json
diff --git a/example/package.json b/example/package.json
diff --git a/example/pages/_app.js b/example/pages/_app.js
diff --git a/example/pages/api/form-handler.js b/example/pages/api/form-handler.js
diff --git a/example-ts-appdir/.eslintrc.json → ...-approuter-html-submission/.eslintrc.json b/example-ts-appdir/.eslintrc.json → ...-approuter-html-submission/.eslintrc.json
diff --git a/example-ts-appdir/.vscode/settings.json → ...ter-html-submission/.vscode/settings.json b/example-ts-appdir/.vscode/settings.json → ...ter-html-submission/.vscode/settings.json
diff --git a/example-ts-appdir/README.md → ...ext13-approuter-html-submission/README.md b/example-ts-appdir/README.md → ...ext13-approuter-html-submission/README.md
diff --git a/example-ts-appdir/app/form-handler/route.ts → ...html-submission/app/form-handler/route.ts b/example-ts-appdir/app/form-handler/route.ts → ...html-submission/app/form-handler/route.ts
diff --git a/example-ts-appdir/app/html-example/page.tsx → ...html-submission/app/html-example/page.tsx b/example-ts-appdir/app/html-example/page.tsx → ...html-submission/app/html-example/page.tsx
diff --git a/examples/next13-approuter-html-submission/app/layout.tsx b/examples/next13-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>
+  );
+}
diff --git a/examples/next13-approuter-html-submission/app/page.tsx b/examples/next13-approuter-html-submission/app/page.tsx
@@ -0,0 +1,53 @@
+import { headers } from 'next/headers';
+
+import '../styles/globals.css';
+
+export default function Page() {
+  const csrfToken = headers().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>
+    </>
+  );
+}
diff --git a/example-ts/middleware.ts → ...3-approuter-html-submission/middleware.ts b/example-ts/middleware.ts → ...3-approuter-html-submission/middleware.ts
diff --git a/example-ts-appdir/next-env.d.ts → ...3-approuter-html-submission/next-env.d.ts b/example-ts-appdir/next-env.d.ts → ...3-approuter-html-submission/next-env.d.ts
diff --git a/example-ts-appdir/next.config.js → ...-approuter-html-submission/next.config.js b/example-ts-appdir/next.config.js → ...-approuter-html-submission/next.config.js
@@ -2,10 +2,6 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-  experimental: {
-    appDir: true,
-    serverActions: true
-  }
 }
 
 module.exports = nextConfig;
diff --git a/examples/next13-approuter-html-submission/package.json b/examples/next13-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": {
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "edge-csrf": "1.0.6-rc1",
+    "eslint": "^8.52.0",
+    "eslint-config-next": "^13.5.6",
+    "next": "^13.5.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
+  }
+}