Merge pull request #333 from ixartz/arcjet

fix: update Arcjet integration and improve security checks

.env

@@ -12,8 +12,9 @@ NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 ######## Please create a new file named `.env.local`, all environment files ending with `.local` won't be tracked by Git.
 ######## After creating the file, you can add the following variables.
 # Arcjet security
-# Get your key from https://app.arcjet.com
-#ARCJET_KEY=
+# Get your key from https://launch.arcjet.com/Q6eLbRE
+# ARCJET_KEY=
+
 # Clerk authentication
 CLERK_SECRET_KEY=your_clerk_secret_key
 ######## [END] SENSITIVE DATA

.env.production

@@ -14,8 +14,8 @@ NEXT_PUBLIC_SENTRY_DSN=
 ######## Please create a new file named `.env.production.local`, all environment files ending with `.local` won't be tracked by Git.
 ######## After creating the file, you can add the following variables.
 # Arcjet security
-# Get your key from https://app.arcjet.com
-#ARCJET_KEY=
+# Get your key from https://launch.arcjet.com/Q6eLbRE
+# ARCJET_KEY=
 
 # Database
 # Using an incorrect DATABASE_URL value, Next.js build will timeout and you will get the following error: "because it took more than 60 seconds"

README.md

@@ -4,7 +4,7 @@
   <a href="https://demo.nextjs-boilerplate.com"><img height="300" src="public/assets/images/nextjs-starter-banner.png?raw=true" alt="Next js starter banner"></a>
 </p>
 
-🚀 Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), and more.
+🚀 Boilerplate and Starter for Next.js with App Router, Tailwind CSS, and TypeScript ⚡️ Prioritizing developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Vitest (replacing Jest), Testing Library, Playwright, Commitlint, VSCode, Tailwind CSS, Authentication with [Clerk](https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate), Database with DrizzleORM (PostgreSQL, SQLite, and MySQL), Error Monitoring with [Sentry](https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo), Logging with Pino.js and Log Management, Monitoring as Code, Storybook, Multi-language (i18n), Secure with [Arcjet](https://launch.arcjet.com/Q6eLbRE) (Bot detection, Rate limiting, Attack protection, etc.) and more.
 
 Clone this project and use it to create your own Next.js project. You can check out the live demo at [Next.js Boilerplate](https://demo.nextjs-boilerplate.com), which includes a working authentication system.
 
@@ -48,6 +48,15 @@ Clone this project and use it to create your own Next.js project. You can check
     </td>
   </tr>
   <tr height="187px">
+    <td align="center" width="33%">
+      <a href="https://launch.arcjet.com/Q6eLbRE">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/arcjet-dark.svg?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/arcjet-light.svg?raw=true">
+          <img alt="Arcjet" src="public/assets/images/arcjet-light.svg?raw=true">
+        </picture>
+      </a>
+    </td>
     <td align="center" width="33%">
       <a href="https://posthog.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
         <picture>
@@ -66,6 +75,8 @@ Clone this project and use it to create your own Next.js project. You can check
         </picture>
       </a>
     </td>
+  </tr>
+  <tr height="187px">
     <td align="center" width="33%">
       <a href="https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
         <picture>
@@ -75,8 +86,6 @@ Clone this project and use it to create your own Next.js project. You can check
         </picture>
       </a>
     </td>
-  </tr>
-  <tr height="187px">
     <td align="center" style=width="33%">
       <a href="https://nextjs-boilerplate.com/pro-saas-starter-kit">
         <img src="public/assets/images/nextjs-boilerplate-saas.png?raw=true" alt="Next.js SaaS Boilerplate with React" />
@@ -362,14 +371,14 @@ To complete the setup, update the `checkly.config.ts` file with your own email a
 
 The project uses [Arcjet](https://launch.arcjet.com/Q6eLbRE), a security as code product that includes several features that can be used individually or combined to provide defense in depth for your site.
 
-To set up Arcjet, [create a free account]((https://launch.arcjet.com/Q6eLbRE)) and get your API key. Then add it to the `ARCJET_KEY` environment variable.
+To set up Arcjet, [create a free account](https://launch.arcjet.com/Q6eLbRE) and get your API key. Then add it to the `ARCJET_KEY` environment variable.
 
 Arcjet is configured with two main features: bot detection and the Arcjet Shield WAF:
 
 - [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]/(auth)/layout.tsx` and `src/app/[locale]/(marketing)/page.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 configured in `src/app/[locale]/layout.tsx` based on the page type.
 
 ### Useful commands
 
@@ -451,6 +460,15 @@ See [LICENSE](LICENSE) for more information.
     </td>
   </tr>
   <tr height="187px">
+    <td align="center" width="33%">
+      <a href="https://launch.arcjet.com/Q6eLbRE">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/arcjet-dark.svg?raw=true">
+          <source media="(prefers-color-scheme: light)" srcset="public/assets/images/arcjet-light.svg?raw=true">
+          <img alt="Arcjet" src="public/assets/images/arcjet-light.svg?raw=true">
+        </picture>
+      </a>
+    </td>
     <td align="center" width="33%">
       <a href="https://posthog.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
         <picture>
@@ -469,6 +487,8 @@ See [LICENSE](LICENSE) for more information.
         </picture>
       </a>
     </td>
+  </tr>
+  <tr height="187px">
     <td align="center" width="33%">
       <a href="https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
         <picture>
@@ -478,16 +498,6 @@ See [LICENSE](LICENSE) for more information.
         </picture>
       </a>
     </td>
-  </tr>
-  <tr height="187px">
-  <td align="center" width="33%">
-      <a href="https://launch.arcjet.com/Q6eLbRE" target="_arcjet-home">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="public/assets/images/arcjet-dark.svg">
-    <img src="public/assets/images/arcjet-light.svg" alt="Arcjet Logo" height="128" width="auto">
-  </picture>
-</a>
-    </td>
     <td align="center" style=width="33%">
       <a href="https://nextjs-boilerplate.com/pro-saas-starter-kit">
         <img src="public/assets/images/nextjs-boilerplate-saas.png?raw=true" alt="Next.js SaaS Boilerplate with React" />