How to get the raw client IP address when using react-router serve?

[NiQ1]

Note that I'm not talking about any HTTP header ("X-Forwarder-For" etc.), I'm talking about the IP address of whatever opened the TCP connection of the react-router server.

Thank you.

[rossipedia]

I don't believe that's accessible using @react-router/serve. You will need to use a custom server adapter to get at the underlying socket connection.

[sergiodxa]

Maybe @react-router/express could setup a value in the router context provider (if using middleware) and give you a getIncomingRequest or getSocket helper that reads the value from there.

import { getIncomingRequest } from "@react-router/express";

export async function loader({ request, params, context }: Router.LoaderArgs) {
  let remoteAddress = getIncomingRequest(context).socket.remoteAddress
  // use the remoteAddress here
}

It could also export a setIncomingRequest(context, request) to call yourself in createRequestHandler if you're using a custom Express server.

[MukundaKatta]

To expose req.socket.remoteAddress to your loaders you'll need a thin custom Express server, react-router serve doesn't plumb it through. Wire createRequestHandler with a getLoadContext(req) returning { clientIp: req.socket.remoteAddress } and type it via module augmentation on AppLoadContext. One caveat: behind any reverse proxy (nginx, Fly, Cloudflare, Vercel) remoteAddress is the proxy, not the user, so you need app.set('trust proxy', 1) + req.ip (which reads X-Forwarded-For), or the platform-specific header like CF-Connecting-IP.

[rossipedia]

Note that this approach will need to change in V8, as middleware mode becomes the default and AppLoadContext will no longer be a thing.

[NiQ1]

Note that this approach will need to change in V8, as middleware mode becomes the default and AppLoadContext will no longer be a thing.

How would it be possible to obtain the IP in v8?