🚨 Archived: Remix → React Router Transition

With the introduction of React Router v7, the Remix team has announced that the official upgrade path for existing Remix applications is to move to React Router v7, as described in their announcement.

This example application has been archived and is no longer being updated. However, we continue to fully support and maintain the Remix SDK (@arcjet/remix).

For an up-to-date reference implementation that follows the new recommended direction, please see our React Router example.

---

Arcjet Remix example app

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 Remix application demonstrating the use of multiple features. There is a version deployed at https://example.arcjet.com.

Features

• 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.
• Sensitive info protects against clients sending you sensitive information such as PII that you do not wish to handle.

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. If you want to test the rate limiting authentication, you will also need to add a GitHub app key and secret after creating a GitHub OAuth app.

4. Start the dev server

npm run dev

5. Open http://localhost:3000 in your browser.

Deploy

If you use this for production, edit the app/sessions.server.ts file to include your domain.

Need help?

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

Stack

• Auth: Auth.js
• App: Remix
• UI: shadcn/ui + Tailwind CSS
• Security: Arcjet