fix(arcjet): move Arcjet to middleware to prevent re-renders in layout

Author: davidmytton

README.md

@@ -380,7 +380,7 @@ Arcjet is configured with two main features: bot detection and the Arcjet Shield
 - [Bot detection](https://docs.arcjet.com/bot-protection/concepts) is configured to allow search engines, preview link generators e.g. Slack and Twitter previews, and to allow common uptime monitoring services. All other bots, such as scrapers and AI crawlers, will be blocked. You can [configure additional bot types](https://docs.arcjet.com/bot-protection/identifying-bots) to allow or block.
 - [Arcjet Shield WAF](https://docs.arcjet.com/shield/concepts) will detect and block common attacks such as SQL injection, cross-site scripting, and other OWASP Top 10 vulnerabilities.
 
-Arcjet is configured with a central client at `src/libs/Arcjet.ts` that includes the Shield WAF rules. Additional rules are configured in `src/app/[locale]/layout.tsx` based on the page type.
+Arcjet is configured with a central client at `src/libs/Arcjet.ts` that includes the Shield WAF rules. Additional rules are applied when Arcjet is called in `middleware.ts`.
 
 ### Useful commands
 

package-lock.json

@@ -30,7 +30,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@arcjet/next": "1.0.0-beta.3",
+    "@arcjet/next": "1.0.0-beta.4",
     "@clerk/localizations": "^3.13.1",
     "@clerk/nextjs": "^6.12.9",
     "@electric-sql/pglite": "^0.2.17",

package.json

@@ -1,8 +1,6 @@
 import type { Metadata } from 'next';
 import { PostHogProvider } from '@/components/analytics/PostHogProvider';
 import { DemoBadge } from '@/components/DemoBadge';
-import arcjet, { detectBot, request } from '@/libs/Arcjet';
-import { Env } from '@/libs/Env';
 import { routing } from '@/libs/i18nNavigation';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, setRequestLocale } from 'next-intl/server';
@@ -38,20 +36,6 @@ export function generateStaticParams() {
   return routing.locales.map(locale => ({ locale }));
 }
 
-// Improve security with Arcjet
-const aj = arcjet.withRule(
-  detectBot({
-    mode: 'LIVE',
-    // Block all bots except the following
-    allow: [
-      // See https://docs.arcjet.com/bot-protection/identifying-bots
-      'CATEGORY:SEARCH_ENGINE', // Allow search engines
-      'CATEGORY:PREVIEW', // Allow preview links to show OG images
-      'CATEGORY:MONITOR', // Allow uptime monitoring services
-    ],
-  }),
-);
-
 export default async function RootLayout(props: {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
@@ -64,22 +48,6 @@ export default async function RootLayout(props: {
 
   setRequestLocale(locale);
 
-  // Verify the request with Arcjet
-  if (Env.ARCJET_KEY) {
-    const req = await request();
-    const decision = await aj.protect(req);
-
-    // These errors are handled by the global error boundary, but you could also
-    // redirect or show a custom error page
-    if (decision.isDenied()) {
-      if (decision.reason.isBot()) {
-        throw new Error('No bots allowed');
-      }
-
-      throw new Error('Access denied');
-    }
-  }
-
   // Using internationalization in Client Components
   const messages = await getMessages();
 

src/app/[locale]/layout.tsx

@@ -1,6 +1,5 @@
 import arcjet, { shield } from '@arcjet/next';
 import { Env } from './Env';
-import { logger } from './Logger';
 
 // Re-export the rules to simplify imports inside handlers
 export {
@@ -26,5 +25,4 @@ export default arcjet({
     }),
     // Other rules are added in different routes
   ],
-  log: logger,
 });

src/libs/Arcjet.ts

@@ -1,4 +1,6 @@
 import type { NextFetchEvent, NextRequest } from 'next/server';
+import arcjet, { detectBot } from '@/libs/Arcjet';
+import { Env } from '@/libs/Env';
 import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 import createMiddleware from 'next-intl/middleware';
 import { NextResponse } from 'next/server';
@@ -18,10 +20,39 @@ const isAuthPage = createRouteMatcher([
   '/:locale/sign-up(.*)',
 ]);
 
-export default function middleware(
+// Improve security with Arcjet
+const aj = arcjet.withRule(
+  detectBot({
+    mode: 'LIVE',
+    // Block all bots except the following
+    allow: [
+      // See https://docs.arcjet.com/bot-protection/identifying-bots
+      'CATEGORY:SEARCH_ENGINE', // Allow search engines
+      'CATEGORY:PREVIEW', // Allow preview links to show OG images
+      'CATEGORY:MONITOR', // Allow uptime monitoring services
+    ],
+  }),
+);
+
+export default async function middleware(
   request: NextRequest,
   event: NextFetchEvent,
 ) {
+  // Verify the request with Arcjet
+  if (Env.ARCJET_KEY) {
+    const decision = await aj.protect(request);
+
+    // These errors are handled by the global error boundary, but you could also
+    // redirect or show a custom error page
+    if (decision.isDenied()) {
+      if (decision.reason.isBot()) {
+        throw new Error('No bots allowed');
+      }
+
+      throw new Error('Access denied');
+    }
+  }
+
   // Run Clerk middleware only when it's necessary
   if (
     isAuthPage(request) || isProtectedRoute(request)