Rewrite request in middleware

[jezikk]

Hi all,

I have a question if is it planned to be able to rewrite request in middleware? Or something like that. This pattern is used for example in ParaglideJS.

NextJS

import { NextRequest, NextResponse } from "next/server";
import { paraglideMiddleware } from "./paraglide/server";

export function middleware(request: NextRequest) {
	return paraglideMiddleware(request, ({ request, locale }) => {
		request.headers.set("x-paraglide-locale", locale);
		request.headers.set("x-paraglide-request-url", request.url);
		return NextResponse.rewrite(request.url, request);
	});
}

HonoJS

export default await createHonoServer({
  beforeAll(app) {
    app.use(async (c, next) => {
      return await paraglideMiddleware(c.req.raw, ({ request }) => {
        c.req.raw = request;
        return next();
      });
    });
  },
});

[sergiodxa]

What's the use case? If you want to add things for the route loaders/actions to use you can use the router context to set values there and read them somewhere else without modifying the actual request object.

If the idea is to make /something render /something-else that's not yet supported by the router itself

[jezikk]

Ok, maybe I'm just doing something wrong.

This is the middleware:

import { paraglideMiddleware } from "~/paraglide/server";
import type { Route } from "../+types/root";

// https://github.com/opral/inlang-paraglide-js/issues/449
const localeMiddleware: Route.unstable_MiddlewareFunction = async (
  { request },
  next,
) => {
  return await paraglideMiddleware(request, ({ request: localizedRequest }) => {
    return next();
  });
};

export { localeMiddleware };

This is the code inside paraglideMiddleware function:

export async function paraglideMiddleware(request, resolve) {
	if (!runtime.disableAsyncLocalStorage && !runtime.serverAsyncLocalStorage) {
		const { AsyncLocalStorage } = await import("async_hooks");
		runtime.overwriteServerAsyncLocalStorage(new AsyncLocalStorage());
	} else if (!runtime.serverAsyncLocalStorage) {
		runtime.overwriteServerAsyncLocalStorage(createMockAsyncLocalStorage());
	}

	const locale = runtime.extractLocaleFromRequest(request);
	const origin = new URL(request.url).origin;

	// if the client makes a request to a URL that doesn't match
	// the localizedUrl, redirect the client to the localized URL
	if (
		request.headers.get("Sec-Fetch-Dest") === "document" &&
		runtime.strategy.includes("url")
	) {
		const localizedUrl = runtime.localizeUrl(request.url, { locale });
		if (normalizeURL(localizedUrl.href) !== normalizeURL(request.url)) {
			return Response.redirect(localizedUrl, 307);
		}
	}

There is the redirect, but it doesn't work.

[vampcat]

Try throwing instead of returning - remix/rr7 treats return vs throw differently when it comes to loaders/actions/middlewares - returned values still cause the page to render, but thrown values are directly sent back to the client. In this case, you probably want to directly send the redirect to the client.

[jezikk]

@vampcat Yeah You are right. This is working code:

import { paraglideMiddleware } from "~/paraglide/server";
import type { Route } from "../+types/root";

// https://github.com/opral/inlang-paraglide-js/issues/449
const localeMiddleware: Route.unstable_MiddlewareFunction = async (
  { request },
  next,
) => {
  const response = await paraglideMiddleware(request, () => {
    return next();
  });

  if (response.status === 307) {
    throw response;
  }

  return response;
};

export { localeMiddleware };

[jezikk]

For example if you have the language detection strategy set to prioritize the locale value from the cookie over the locale value from the url, the middleware can automatically change (rewrite) the url.

Base language: de
Supported languages: en,de
Cookie value: en
Detection strategy: 1. cookie, 2.url

1. User open url https://localhost:3000
2. ParaglideMiddleware changes automatically url to https://localhost:3000/en because it is not the base language

Without this feature actually it is not possible to use a new ParaglideJS 2.0 middleware. :(

opral/inlang-paraglide-js#449

[sergiodxa]

Right now the way to do that is to redirect, so if the user goes to / you check the cookie and redirect to /en

If you do this in a middleware you can block every loader to run, redirect and then when a new request is received you let the loaders run normally.

[vampcat]

I'm trying to create an admin-panel, that needs authorization. The page already has an error boundary that deals with 403 grcefully. So far I was doing the authorization in the loader and throwing a 403 from there - and the error boundary was triggering correctly. Now, I'm trying to throw a Response from the middleware - but that directly gets sent to client, without actually going the the page. Returning a 403 Response is not helping either.

What's the right way to handle such scenarios? I basically want to short-circuit everything and directly throw a 403, but I also want a good-looking error boundary. (Without redirecting the user to a new /403 page, preferably)