chore(examples): Add Next.js app with Permit.io for dynamic Arcjet ru…

…les (#1067)

Here's the code to go with the blog post. README still needs a "how it works" section which I'll fill out when I get to the airport.

.github/dependabot.yml

@@ -313,6 +313,31 @@ updates:
       - dependency-name: eslint
         versions: [">=9"]
 
+  - package-ecosystem: npm
+    directory: /examples/nextjs-14-permit
+    schedule:
+      # Our dependencies should be checked daily
+      interval: daily
+    assignees:
+      - blaine-arcjet
+    reviewers:
+      - blaine-arcjet
+    commit-message:
+      prefix: deps(example)
+      prefix-development: deps(example)
+    groups:
+      dependencies:
+        patterns:
+          - "*"
+    ignore:
+      # Ignore updates to the @types/node package due to conflict between
+      # Headers in DOM.
+      - dependency-name: "@types/node"
+        versions: [">18.18"]
+      # TODO(#539): Upgrade to eslint 9
+      - dependency-name: eslint
+        versions: [">=9"]
+
   - package-ecosystem: npm
     directory: /examples/nextjs-14-react-hook-form
     schedule:

.github/workflows/reusable-examples.yml

@@ -419,6 +419,48 @@ jobs:
         working-directory: examples/nextjs-14-pages-wrap
         run: npm run build
 
+  nextjs-14-permit:
+    name: Next.js 14 + Permit
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      # Environment security
+      - name: Harden Runner
+        uses: step-security/harden-runner@63c24ba6bd7ba022e95695ff85de572c04a18142 # v2.7.0
+        with:
+          disable-sudo: true
+          egress-policy: block
+          allowed-endpoints: >
+            fonts.googleapis.com:443
+            fonts.gstatic.com:443
+            github.com:443
+            registry.npmjs.org:443
+
+      # Checkout
+      # Most toolchains require checkout first
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # Language toolchains
+      - name: Install Node
+        uses: actions/[email protected]
+        with:
+          node-version: 20
+
+      # Workflow
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install example dependencies
+        working-directory: examples/nextjs-14-permit
+        run: npm ci
+
+      - name: Build
+        working-directory: examples/nextjs-14-permit
+        run: npm run build
+
   nodejs-hono-rl:
     name: Node.js + Hono + Rate Limit
     runs-on: ubuntu-latest

examples/nextjs-14-permit/.env.local.example

@@ -0,0 +1,10 @@
+# Get your Arcjet key from https://app.arcjet.com
+ARCJET_KEY=
+
+# Get your Clerk keys from https://clerk.com/docs/quickstarts/nextjs
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=
+
+# Get your Permit key from https://app.permit.io
+PERMIT_TOKEN=
+PERMIT_PDP=https://cloudpdp.api.permit.io

examples/nextjs-14-permit/.eslintrc.json

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

examples/nextjs-14-permit/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-14-permit/README.md

@@ -0,0 +1,41 @@
+<a href="https://arcjet.com" target="_arcjet-home">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://arcjet.com/logo/arcjet-dark-lockup-voyage-horizontal.svg">
+    <img src="https://arcjet.com/logo/arcjet-light-lockup-voyage-horizontal.svg" alt="Arcjet Logo" height="128" width="auto">
+  </picture>
+</a>
+
+# Permissions-Based Security in Next.js Apps with Arcjet and Permit.io
+
+This example shows how to use [Arcjet](https://arcjet.com/) with a permissions system such as [Permit.io](https://www.permit.io/) to protect [Next.js](https://nextjs.org/) apps.
+
+## How to use
+
+1. From the root of the project, install the SDK dependencies.
+
+   ```bash
+   npm ci
+   ```
+
+2. Enter this directory and install the example's dependencies.
+
+   ```bash
+   cd examples/nextjs-14-permit
+   npm ci
+   ```
+
+3. Rename `.env.example` to `.env` and add your Arcjet key, Clerk keys, and Permit.io token.
+
+4. Set up Clerk and Permit.io per [the accompanying blog post](https://blog.arcjet.com/permissions-based-security-in-nextjs-with-arcjet-and-permitio/).
+
+4. Start the server.
+
+   ```bash
+   npm start
+   ```
+
+5. Visit `http://localhost:3000/` in a browser.
+
+6. Visit `http://localhost:3000/stats` in a browser and refresh the page to trigger the rate limit.
+
+7. Try logging in, changing your user's role in Permit.io, and see how that affects the rate limit.

examples/nextjs-14-permit/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;