Arcjet example: React Router middleware

Arcjet helps developers protect their apps in just a few lines of code. Bot detection. Rate limiting. Email validation. Attack protection. Data redaction. A developer-first approach to security.

This is an example React Router application demonstrating how to protect an app using React Router v8 middleware. A root middleware function runs arcjet.protect() once per request and stashes the resulting decision in a typed context, which loaders and actions then read to decide whether to allow the request.

Features

• Rate limiting shows a fixed window rate limit that blocks a client after too many requests.
• Attack protection demonstrates Arcjet Shield, which detects suspicious behavior, such as SQL injection and cross-site scripting attacks.

The middleware deliberately omits Arcjet's sensitive info rule because middleware should not read the request body. See the react-router example for a non-middleware app that uses sensitiveInfo.

Run locally

1. Register for a free Arcjet account.

2. Install dependencies:

npm ci

3. Rename .env.example to .env and add your Arcjet key.

4. Start the dev server

npm run dev

5. Open http://localhost:5173 in your browser. npm run dev and the example's compose service both use Vite's port 5173. npm start (the production image) listens on port 3000.

Need help?

Check out the docs, contact support, or join our Discord server.

Contributing

All development for Arcjet examples is done in the arcjet/examples repository.

You are welcome to open an issue here or in arcjet/examples directly. However, please direct all pull requests to arcjet/examples. Take a look at our contributing guide for more information.