How to Implement Middleware in Remix?

[goldcoders]

Its a bit sad if i need to add logic on each page to handle a page redirect if user is auth, or have proper permission.
Is there a way we can declare on global scope a middleware?

I came from laravel background , so im bit confuse on implementation on React / Node JS.

Hope someone can share a bit of snippet or packages that can handle middleware for remix :)

thanks

[sergiodxa]

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
};

[cjsauer]

Just curious, have things changed in Remix in regards to middleware? I'm not a Remix user yet, but the lack of some sort of common loader/action code flow mechanism is holding me back from adoption.

[neekey]

@cjsauer dont think so and i agree with you. I'm using Remix for a very simple project, but once the backend logic gets more complicated, i can see things will get messy. The current solution seems to create a separate API backend, and leave remix as a front end for backend service...

[ZeldOcarina]

Remix can run as an Express adapter so you can do all the middleware logic in the Express portion and handle the request with Remix when it hits that portion of the Express app!

[cjsauer]

That occurred to me as well. It’s a good strategy when using Express. It does still feel like a hole in Remix given that its goal is to “run anywhere”. The middleware pattern is such a staple, it was the first thing I looked for in the docs after scanning the tutorial.

[elyobo]

This should not be marked as the answer.

Calling manually in each loader, while more explicit, also misses the point of middleware which is that it's not called in each loader. Essential functionality like authentication and authorization can be easily missed if it has to be done repetitively but it's trivial to get right everywhere with a single bit of middleware.

From the rest of the discussion here it seems like remix doesn't support middleware and so the solution is to add middleware directly to your underlying server in a way that it supports, using the framework request/response objects instead.

It looks like #7642 is the place to follow for a remix native middleware implementation.

[Merthod]

Well, this makes kind of a pain not to be able to centralize maintenance of middlewares. There's a reason why they're so popular.

[chikamichi]

See my answer above + sergiodxa’s below.

[cloudcompute]

Consider that I am using the Remix App NodeJs Express Server. As we know that Express has numerous proven, stable middleware functions. After creating an instance of express, web apps typically have these middlewares in sequence:

app.use(helmet());
app.use(cookieParser());                        // needed before csurf. Injects some properties on the req object
app.use(csurf);                                       //CSRF functionality
...
app.use(logger)

How can I achieve this? Kindly guide.

If Remix is giving me an option to deploy a Remix app on a server of my choice like AWS, NodeJS, Cloudfare Workers, etc, it should also allow me to use each and every bit of functionality that my chosen server offers.

In my case, the incoming request should be allowed to go through a series of middleware. Pl. help me, this thing is really important before I decide to use Remix.

[sonnguyenhong]

Are there any solution to eject the express server from an existed remix app? I just tried to change the library code but that's not what I wanted.

[sergiodxa]

The rmx-cli package has a script to "eject" (the team doesn't really like this term).

npx rmx-cli eject-ras

[sonnguyenhong]

Thank you so much for supporting me. I got the solution for my problem.

[sonnguyenhong]

I have a problem with Shopify App Remix template.
I have built my app with remix template and used npx rmx-cli eject-ras to eject the express server from Remix. But after I ran this command, the start command is also changed. Before the change, when I run npm start, it is equal to shopify app dev. But after the change, it's remix dev --manual -c "node server.js". And this leads to the problem that it's not create a cloudflare tunnel and automatically set up environment variable for me. Could you please help me to solve this problem?

[kiliman]

The rmx-cli eject-ras tool was designed to eject from the default Remix App Server template. It most likely will not support other templates, especially the Shopify template. That is designed to be used by the shopify CLI instead of calling node directly.

It looks like you can integrate with any existing Remix app using the @shopify/shopify-app-remix package. https://www.npmjs.com/package/@shopify/shopify-app-remix

[ZeldOcarina]

Question, maybe stupid, can't you add a global middleware in the root.tsx file inside the top-level loader or action?

[kiliman]

Not really. Loaders run in parallel, so there is no first loader. There's nothing special about the root route except that it's the parent of all routes.

Also, Remix optimizes loader calls from the client, so the root loader will only be called again during revalidation.

That said, there is an RFC in React Router (the basis of Remix) for "middleware".

remix-run/react-router#9564

[ZeldOcarina]

I see. Thanks a lot for the clarification! :)

[silvenon]

@kiliman thanks a lot for the explanation, I was about to suggest a layout loader as well 😅

[pburrows]

For an express app, wouldn't you just add your middleware in the server.js file where all the other middleware is already being set up (such as morgan). I haven't actually tried this yet, but it seemed like the obvious place.

[gustavopch]

If you do so, you don’t get access to Remix’s request and context.