Get the remote IP address (framework mode)

[galaxor]

Hi. How do I get the remote IP address, from within, say, my loader or action?

I know that these apps are often run behind a proxy and if it's set up right, I can use the X-Forwarded-For header, if the proxy is one that I set up and run.

But what if I'm not behind a proxy, such as in development? Or what if I'm interested in which of my proxies a request came from?

I know that react-router's framework mode uses express behind the scenes. In the documentation for express, it says that the request object should have a property called ip.

But the request objects that my loader function gets does not have that property, or, as far as I can tell, any other way to find the remote IP address.

So, is there a way to find the remote IP address?

[Dv2Corn]

The Request your loader gets is a Fetch API Request, and it has no notion of the remote address. The address lives on the Node/Express request. You pass it in through the load context, and that needs a server where you control getLoadContext.

The built-in react-router-serve has no such hook. It calls createRequestHandler({ build, mode }) without getLoadContext and does not set trust proxy (cli.ts). With it, the loader can't see the IP. Use a custom Express server instead; the official node-custom-server template already has one, and the Express adapter calls your getLoadContext(req, res) for every request (server.ts).

I checked this with React Router 8.5.1 (npx create-react-router@8.5.1 --template remix-run/react-router-templates/node-custom-server):

// app/context.ts
import { createContext } from "react-router";
export const clientIpContext = createContext<string | undefined>();

// server/app.ts
import { RouterContextProvider } from "react-router";
import { createRequestHandler } from "@react-router/express";
import express from "express";
import { clientIpContext } from "~/context";

export const app = express();

// Only if the app is reachable solely through proxies you run.
// A NUMBER is the count of proxies in front of the app.
// The string "1" (e.g. straight from process.env) would mean "trust the proxy at IP address 1".
app.set("trust proxy", 1);

app.use(
  createRequestHandler({
    build: () => import("virtual:react-router/server-build"),
    getLoadContext(req) {
      const context = new RouterContextProvider();
      context.set(clientIpContext, req.ip); // req.socket.remoteAddress = the TCP peer only
      return context;
    },
  }),
);

// any loader or action
export function loader({ context }: Route.LoaderArgs) {
  const ip = context.get(clientIpContext);
  // ...
}

npm run typecheck passes. Results from a second container, the server running node server.js:

Server setup	Plain request	Request with a forged X-Forwarded-For: 1.2.3.4
no trust proxy	::ffff:172.31.5.20 (the real peer)	::ffff:172.31.5.20 (header ignored)
trust proxy = 1 (number)	::ffff:172.31.5.20	1.2.3.4
trust proxy = "1" (string)	::ffff:172.31.5.20	::ffff:172.31.5.20 (silently not trusted)

The same code also works in development: with npm run dev, the template loads server/app.ts through Vite, so your two cases are covered:

• No proxy (dev or direct): leave trust proxy off and req.ip is the socket address.
• "Which of my proxies did this come from": that's req.socket.remoteAddress, the immediate peer, whatever trust proxy is set to. You can put it into the context as a second value.

Without Express: @react-router/node has createRequestListener for a plain node:http server. Its getLoadContext(request, client) receives the socket address as client.address (server.ts). Define it next to the Express handler in server/app.ts, so it uses the same clientIpContext key as your loaders:

// server/app.ts
import { createRequestListener } from "@react-router/node";
export const listener = createRequestListener({
  build: () => import("virtual:react-router/server-build"),
  getLoadContext(request, client) {
    const context = new RouterContextProvider();
    context.set(clientIpContext, client.address);
    return context;
  },
});
// node-server.mjs: http.createServer((await import("./build/server/index.js")).listener).listen(3000)

Tested the same way: the direct request gives ::ffff:172.31.5.20, and a forged X-Forwarded-For doesn't change it. There's no trust proxy here; behind your own proxy you'd read the header yourself.

Only turn on trust proxy when clients cannot reach the app directly. The table shows why: with it on, anyone who can reach the port can pick their own IP via the header.

[galaxor]

Thank you very much! Yeah, I was confused because I couldn't find a way to get at the express info. I didn't know about the remix-run/react-router-templates/node-custom-server template! I'll switch over to than, thanks!