Arcjet helps developers protect their apps in just a few lines of code. This is an example application demonstrating the use of multiple features.
This example is deployed at https://example.arcjet.com.
- Signup form protection uses Arcjet's server-side email verification configured to block disposable providers and ensure that the domain has a valid MX record. It also includes rate limiting and bot protection to prevent automated abuse.
- Bot protection shows how a page can be protected from automated clients.
- Rate limiting shows the use of different rate limit configurations depending on the authenticated user. A logged-in user can make more requests than an anonymous user.
- Attack protection demonstrates Arcjet Shield, which detects suspicious behavior, such as SQL injection and cross-site scripting attacks.
-
Install dependencies:
npm ci
-
Rename
.env.local.example
to.env.local
and add your Arcjet key. If you want to test the rate limiting authentication, you will also need to add an Auth.js secret and create a GitHub OAuth app. -
Start the dev server
npm run dev
- Open http://localhost:3000 in your browser.
- Auth: Auth.js
- App: Next.js
- UI: shadcn/ui
- Form handling: React Hook Form (see also our full form protection example)
- Client-side validation: Zod
- Security: Arcjet
- Platform: Vercel (see our integration)