@arcjet/remix

Arcjet helps developers protect their apps in just a few lines of code. Implement rate limiting, bot protection, email verification, and defense against common attacks.

This is the Arcjet SDK for Remix.

• npm package (@arcjet/remix)
• GitHub source code (arcjet-remix/ in arcjet/arcjet-js)

Example app

Try an Arcjet protected app live at https://example.arcjet.com (source code).

What is this?

This is our adapter to integrate Arcjet into Remix. Arcjet helps you secure your Remix website. This package exists so that we can provide the best possible experience to Remix users.

When should I use this?

You can use this if you are using Remix. See our Get started guide for other supported frameworks.

Install

This package is ESM only. Install with npm in Node.js:

npm install @arcjet/remix

Use

import arcjet, { shield } from "@arcjet/remix";
import { useLoaderData } from "@remix-run/react";
import { LoaderFunctionArgs } from "@remix-run/node";

// Get your Arcjet key at <https://app.arcjet.com>.
// Set it as an environment variable instead of hard coding it.
const arcjetKey = process.env.ARCJET_KEY;

if (!arcjetKey) {
  throw new Error("Cannot find `ARCJET_KEY` environment variable");
}

const aj = arcjet({
  key: arcjetKey,
  rules: [
    // Shield protects your app from common attacks.
    // Use `DRY_RUN` instead of `LIVE` to only log.
    shield({ mode: "LIVE" }),
  ],
});

export async function loader(args: LoaderFunctionArgs) {
  const decision = await aj.protect(args);

  if (decision.isDenied()) {
    throw Response.json({ message: "Forbidden" }, { status: 403 });
  }

  return Response.json({ message: "Hello world" });
}

export default function Index() {
  const data = useLoaderData<typeof loader>();
  return <h1>{data.message}</h1>;
}

For more on how to configure Arcjet with Remix and how to protect Remix, see the Arcjet Remix SDK reference on our website.

License

Apache License, Version 2.0 © Arcjet Labs, Inc.