Type mismatch with Hono req and ip

[davidmytton]

When trying to parse the IP from the headers in a Node.js Hono route, the ip method has a type error:

Type 'HonoRequest<"/", unknown>' has no properties in common with type 'RequestLike'.ts(2559)
(property) Context<Env, "/", BlankInput>.req: HonoRequest<"/", unknown>

This also errors when using c.req.raw which is a Request.

Type 'Request' has no properties in common with type 'RequestLike'.ts(2559)
(property) HonoRequest<P extends string = "/", I extends {} | undefined = {}>.raw: Request

Example:

import arcjet, { ArcjetHeaders, tokenBucket } from "@arcjet/node";
import { serve } from "@hono/node-server";
import { Hono } from "hono";
import ip from "@arcjet/ip";

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

const app = new Hono();

app.get("/", async (c) => {
  const userId = "user123"; // Replace with your authenticated user ID
  
  const ajHeaders = new ArcjetHeaders(c.req.raw.headers);  
  const globalIp = ip(c.req.raw, c.req.raw.headers);

  // Convert ajHeaders to Record<string, string | string[] | undefined>
  const headers: Record<string, string | string[] | undefined> = {};
  ajHeaders.forEach((value, key) => {
    headers[key] = value;
  });

  const details = {
    ip: globalIp,
    method: c.req.method,
    host: headers.host,
    url: c.req.url,
    headers,
  };

  console.log("Details: ", details);

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

  return c.json({
    ok: true,
    message: "Hello Hono!",
  });
});

const port = 3000;
console.log(`Server is running on port ${port}`);

serve({
  fetch: app.fetch,
  port,
});

[davidmytton]

@blaine-arcjet we could fix this specifically, or we could create a new issue to add a proper Hono SDK because I had to manually construct the request in the details const. Hono is a light wrapper over a range of runtimes so it quite a nice web framework.

[blaine-arcjet]

Some preliminary research here:

• RequestLike might be bad naming, because it's not Request-like, it is a type that smooths over NextRequest (which is an enhanced Request) and NextApiRequest (which is an enhanced IncomingMessage). A Hono req.raw has none of the required information.
• As such req.raw can't be used but instead I followed Access the raw Node.js APIs to inform the Hono constructor that the env contains HttpBindings. This allows me to do const decision = await aj.protect(c.env.incoming) because incoming is an IncomingMessage which is needed by the node bindings.

Full example:

import arcjet, { tokenBucket } from "@arcjet/node";
import { serve, type HttpBindings } from "@hono/node-server";
import { Hono } from "hono";

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

const app = new Hono<{ Bindings: HttpBindings }>();

app.get("/", async (c) => {
  const userId = "user123"; // Replace with your authenticated user ID

  const decision = await aj.protect(c.env.incoming, { userId, requested: 5 }); // Deduct 5 tokens from the bucket
  console.log("Arcjet decision", decision);

  return c.json({
    ok: true,
    message: "Hello Hono!",
  });
});

const port = 3000;
console.log(`Server is running on port ${port}`);

serve({
  fetch: app.fetch,
  port,
});