Support for Remix

[justinfarrelldev]

Hello, I see that this project has Next.js support, however it is unclear whether Remix support is in the works or works out-of-the-box for the Next.js package. Are there perhaps any plans to include Remix (or, I guess since it is being merged with React Router, React Router) support?

Thank you, and I love this project so far! I can tell this will be extremely useful when I develop APIs in the future.

[davidmytton]

Hi @justinfarrelldev! We don't have official Remix support yet, but Arcjet will work and we know of several people using it without any issues. However, support depends on which Remix adapter you're using - Arcjet will work with the default Remix server (which uses Express) and also with Node or Vercel.

I just tested using our Node SDK in a Remix loader function and it worked correctly. There is a type-mismatch warning when you pass the request parameter into aj.project() but you can ignore it.

This uses https://github.com/sergiodxa/remix-utils#getclientipaddress to get the IP address, which is installed with:

npm install remix-utils is-ip

Then you can manually construct the request props with the IP included:

import arcjet, { tokenBucket } from "@arcjet/node";
import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
import { getClientIPAddress } from "remix-utils/get-client-ip-address";

const aj = arcjet({
  key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com
  characteristics: ["userId"], // track requests by a custom user ID
  rules: [
    // Create a token bucket rate limit. Other algorithms are supported.
    tokenBucket({
      mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
      refillRate: 5, // refill 5 tokens per interval
      interval: 10, // refill every 10 seconds
      capacity: 10, // bucket maximum capacity of 10 tokens
    }),
  ],
});

export async function loader({
  request,
}: LoaderFunctionArgs) {
  // Construct an object with Arcjet request details
  const path = new URL(request.url || "", `http://${request.headers.get("host")}`);
  const details = {
    ip: getClientIPAddress(request),
    method: request.method,
    host: request.headers.get("host"),
    url: path.pathname,
    headers: request.headers,
  };

  const userId = "user123"; // Replace with your authenticated user ID
  const decision = await aj.protect(details, { userId, requested: 5 }); // Deduct 5 tokens from the bucket
  console.log("Arcjet decision", decision);

  if (decision.isDenied()) {
    throw new Response("Too many requests", {
      status: 429,
    });
  } else {
    return null;
  }
}

...

If you create a custom express server for Remix, then you can also put Arcjet in there e.g. for running Shield on every request as middleware. See #1313 (comment)

[justinfarrelldev]

Hi @justinfarrelldev! We don't have official Remix support yet, but Arcjet will work and we know of several people using it without any issues. However, support depends on which Remix adapter you're using - Arcjet will work with the default Remix server (which uses Express) and also with Node or Vercel.

I just tested using our Node SDK in a Remix loader function and it worked correctly. There is a type-mismatch warning when you pass the request parameter into aj.project() but you can ignore it.

import arcjet, { tokenBucket } from "@arcjet/node";
import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";

const aj = arcjet({
  key: process.env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com
  characteristics: ["userId"], // track requests by a custom user ID
  rules: [
    // Create a token bucket rate limit. Other algorithms are supported.
    tokenBucket({
      mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
      refillRate: 5, // refill 5 tokens per interval
      interval: 10, // refill every 10 seconds
      capacity: 10, // bucket maximum capacity of 10 tokens
    }),
  ],
});

export async function loader({
  request,
}: LoaderFunctionArgs) {
  const userId = "user123"; // Replace with your authenticated user ID
  const decision = await aj.protect(request, { userId, requested: 5 }); // Deduct 5 tokens from the bucket
  console.log("Arcjet decision", decision);

  if (decision.isDenied()) {
    throw new Response("Too many requests", {
      status: 429,
    });
  } else {
    return null;
  }
}

...

If you create a custom express server for Remix, then you can also put Arcjet in there e.g. for running Shield on every request. We have an example with a generic Express server at https://github.com/arcjet/arcjet-js/blob/main/examples/nodejs-express-rl/index.js

Awesome, thank you so much for the extremely thorough reply! I'll definitely give it a go 😁

[davidmytton]

On testing this in production, Remix doesn't actually provide the IP - when you use Arcjet locally it's using a local IP.

From the discussion at remix-run/remix#2413 the suggestion is to use a utility from https://github.com/sergiodxa/remix-utils#getclientipaddress to get the IP address. We'll look at how we can do this for you in our official SDK, but for now I've adjusted the above code sample (#1313 (comment)) to use it.

[davidmytton]

To provide an example using Remix + Express middleware, you can use this server.js from the Remix quick start with Arcjet added:

import arcjet, { shield } from "@arcjet/node";
import { createRequestHandler } from "@remix-run/express";
import express from "express";

// notice that the result of `remix vite:build` is "just a module"
import * as build from "./build/server/index.js";

const aj = arcjet({
    // Get your site key from https://app.arcjet.com and set it as an environment
    // variable rather than hard coding.
    key: process.env.ARCJET_KEY,
    rules: [
        // Protect against common attacks with Arcjet Shield
        shield({
            mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
        }),
    ],
});

const app = express();
app.use(express.static("build/client"));

app.use(async (req, res, next) => {
    const decision = await aj.protect(req);

    if (decision.isDenied()) {
        res.writeHead(403, { "Content-Type": "application/json" });
        res.end(JSON.stringify({ error: "Forbidden" }));
    } else {
        next()
    }
})

// and your app is "just a request handler"
app.all("*", createRequestHandler({ build }));

app.listen(3000, () => {
    console.log("App listening on http://localhost:3000");
});

Running it requires you set ARCJET_ENV and ARCJET_KEY locally, which you can do in a .env file:

# This file is for local development
# In production, only set the ARCJET_KEY
ARCJET_ENV=development
# Get your site key from https://app.arcjet.com
ARCJET_KEY=KEYHERE

Starting it can be done with these scripts in package.json

"scripts": {
    "build": "remix vite:build",
    "dev": "node --env-file .env ./server.js",
    "start": "cross-env NODE_ENV=production node ./server.js"
  },

Then you can use Remix normally.

[blaine-arcjet]

I was just looking into what it will take to support remix and I noticed @davidmytton suggested the remix-utils package, which is actually just a worse version of our @arcjet/ip package since it only reads from headers.

While we can depend upon our @arcjet/ip package, I'd prefer if we could get the connecting IP from the connection so we might need to have a more involved setup for the SDK.

[blaine-arcjet]

My current thoughts are that we'll provide an API that users assign to getLoadContext that attaches the IP from Express/Deno/etc and then we access the context via the argument passed to loader or action handlers.

[blaine-arcjet]

I just submitted remix-run/remix#10042 to add Deno's ServeHandlerInfo to the getLoadContext function. We will need this if we want to support Remix via Deno.serve