Package Exports

@arcjet/remix
@arcjet/remix/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arcjet/remix) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@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.

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.

@arcjet/remix