Remix: middleware pattern to run code before loader on every request?

Question

Is there a recommended pattern in Remix for running common code on every request, and potentially adding context data to the request? Like a middleware? A usecase for this might be to do logging or auth, for example.

The one thing I've seen that seems similar to this is loader context via the getLoadContext API. This lets you populate a context object which is passed as an arg to all route loaders.

It does work, and initially seems like the way to do this, but the docs for it say...

It's a way to bridge the gap between the adapter's request/response API with your Remix app

This API is an escape hatch, it's uncommon to need it

...which makes me think otherwise, because

• This API is explicitly for custom integrations with the server runtime. But it doesn't seem like middlewares should be specific to the server runtime - they should just be part of the 'application' level as a Remix feature.

• Running middlewares is a pretty common pattern in web frameworks!

So, does Remix have any better pattern for middleware that runs before every loader?

Answer 1

Instead of middleware, you can call a function directly inside the loader, this will also be more explicit. If you want to early return a response from those "middlewares" Remix let you throw the response object.

For example, if you wanted to check the user has a certain role you could create this function:

async function verifyUserRole(request: Request, expectedRole: string) {
  let user = await getAuthenticatedUser(request); // somehow get the user
  if (user.role === expectedRole) return user;
  throw json({ message: "Forbidden" }, { status: 403 });
}

And in any loader call it this way:

let loader: LoaderFunction = async ({ request }) => {
  let user = await verifyUserRole(request, "admin");
  // code here will only run if user is an admin
  // and you'll also get the user object at the same time
};

Another example could be to require HTTPS

function requireHTTPS(request: Request) {
  let url = new URL(request.url);
  if (url.protocol === "https:") return;
  url.protocol = "https:";
  throw redirect(url.toString());
}

let loader: LoaderFunction = async ({ request }) => {
  await requireHTTPS(request);
  // run your loader (or action) code here
};

Answer 2

There is no way inside Remix to run code before loaders.

As you found out, there is the loader context but it runs even before remix starts to do its job (so you won't know which route modules are matched for example).

You can also run arbitrary code before handing the request to remix in the JS file where you use the adapter for the platform you're deploying to (this depend on the starter you used. This file doesn't exist if you've chosen remix server as your server)

For now it should work for some use cases, but I agree this is a missing feature in remix for now.

Answer 3

Inside app/root.tsx

export let loader: LoaderFunction = ({ request }) => {

const url = new URL(request.url);
const hostname = url.hostname;
const proto = request.headers.get("X-Forwarded-Proto") ?? url.protocol;

url.host =
  request.headers.get("X-Forwarded-Host") ??
  request.headers.get("host") ??
  url.host;
  url.protocol = "https:";

if (proto === "http" && hostname !== "localhost") {
  return redirect(url.toString(), {
    headers: {
      "X-Forwarded-Proto": "https",
    },
  });
}
  return {};
};

Source: https://github.com/remix-run/remix-jokes/blob/8f786d9d7fa7ea62203e87c1e0bdaa9bda3b28af/app/root.tsx#L25-L46

Answer 4

here is my middlewares implementation for remix with typescript,it's works well

ctx.return(something) === useLoaderData()

import compose from '@utils/compose';
export default function Index() {
    const ctx = useLoaderData();
    return <div>{ctx.name}</div>;
}

type DefaultCtx = {
    name: string;
} & Request;

export const loader =(...args)=>compose<DefaultCtx>(
    async (ctx, next) => {
        ctx.name = 'first';
        await next();
    },
    async (ctx, next) => {
        ctx.name = 'secnod';
        await next();
    },
    async (ctx, next) => {
        ctx.name = 'third';
        ctx.return(ctx);
        await next();
    }
)(args);

compose is same as koa;

here is the compose's implementation

type Next = () => Promise<void>;
type Context = {};
type Middle<T = {}> = (ctx: Context & T, next: Next) => void;
const compose = <T>(...middlewares: Middle<T>[]) => {
    return middlewares.reverse().reduce(
        (dispatch, middleware) => {
            return async ctx =>
                middleware(ctx, async () => dispatch(ctx, async () => {}));
        },
        async () => {}
    );
};
export type Middleware<T = {}, P = unknown> = (
    ctx: Context & T & { return: (param: P) => void },
    next: Next
) => void;
const returnEarly: Middleware = async (ctx, next) => {
    return new Promise<any>(async resolve => {
        ctx.return = resolve;
        await next();
    });
};


const componseWithReturn = <T>(...middlewares: Middleware<T>[]) =>
    compose(returnEarly, ...middlewares) as (ctx: T) => void;

export default componseWithReturn;