How to integrate next-intl middleware with an existing middleware

[AssadRajab]

I have an existing middleware that handles the auth.

Now i am trying to add the next-intl to my project. However i am having a hard time combining both of them.

I followed the tutorial and implemented everything as the doc says

I am using Next.JS 15 App Router with Src directory

Here is my existing middleware:

import { NextRequest, NextResponse } from "next/server";
import { getSession } from "@/lib/auth/iron-session";

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  const session = await getSession();
  const isLoggedIn = session.isLoggedIn;

  // Check if the user is logged in
  if (!isLoggedIn && pathname !== "/einloggen") {
    return NextResponse.redirect(new URL("/einloggen", request.url));
  }
  if (isLoggedIn && pathname === "/einloggen") {
    return NextResponse.redirect(new URL("/", request.url));
  }

  // Allow access to other pages
  return NextResponse.next();
}

export const config = {
  // Apply the middleware to all paths except for the ones we want to exclude (like _next and favicon.ico)
  matcher: ["/((?!_next|favicon.ico).*)"],
};

[AnouarMc]

I think you can execute the next-intl middleware first. If the response is a redirect, return it otherwise, pass it to the auth middleware, and make sure to return that response if the auth middleware passes.

import createMiddleware from "next-intl/middleware";

const i18nMiddleware = createMiddleware(routing);

export default async function middleware(request: NextRequest) {
  const response = i18nMiddleware(request);

  if (response && !response.ok) {
    // response not in the range 200-299 (usually a redirect)
    // no need to execute the auth middleware
    return response;
  }
  return await authMiddleware(request, response);
}

async function authMiddleware(request: NextRequest, response: NextResponse) {
  const { pathname } = request.nextUrl;

  const session = await getSession();
  const isLoggedIn = session.isLoggedIn;

  // Check if the user is logged in
  if (!isLoggedIn && pathname !== "/einloggen") {
    return NextResponse.redirect(new URL("/einloggen", request.url));
  }
  if (isLoggedIn && pathname === "/einloggen") {
    return NextResponse.redirect(new URL("/", request.url));
  }

  // Allow access to other pages
  return response;
}

[AssadRajab]

Thank you @AnouarMc, I already tried this. This creating a loop bug.
If no session found, the middleware is redirecting the user to /einloggen Then the first middleware is redirecting user to /de/einloggen Which triggers the second Middleware again and redirects again to /einloggen and so on.

Any idea on this?
Also, what about the matcher, do i use the default one from the NextJS docs or the one from the Next-Intl?

[AnouarMc]

Yes I see, you can get the locale and redirect directly to localized route but I think the problem is in how the checks are performed

I usually separate my routes in three groups publicRoutes, authRoutes, and everything else (protected by default) for that I use the matcher from nextjs to match everything and only exclude static files

here is an example of my authMiddleware

const publicRoutes = ["/"];
const authRoutes = ["/sign-in", "/sign-up"];

const authMiddleware = (request: NextRequest, response: NextResponse) => {
  const { pathname } = request.nextUrl;
  const [, locale, ...segments] = pathname.split("/");
  const basePathname = `/${segments.join("/")}`;

  const isPublicRoute = publicRoutes.includes(basePathname);
  if (isPublicRoute) {
    return response;
  }

  const isLoggedIn = !!request.auth;
  const isAuthRoute = authRoutes.some((route) =>
    //to match sub-routes like /sign-in/reset-password
    basePathname.startsWith(route)
  );
  if (isAuthRoute) {
    if (isLoggedIn) {
      //user logged in and accessing auth routes redirect to dashboard
      return NextResponse.redirect(
        new URL(`/${locale}/dashboard`, request.url)
      );
    }
    //user not logged in accessing auth route (just return it)
    return response;
  }

  //By default every route is protected
  if (!isLoggedIn) {
    return NextResponse.redirect(new URL(`/${locale}/sign-in`, request.url));
  }
};

export default authMiddleware;

and here is the matcher I use

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest|favicon.ico|sitemap.xml|robots.txt)).*)",
    // Always run for API routes
    "/(api|trpc)(.*)",
  ],
};

[AssadRajab]

I see, Nice Stuff, and nice Profile image ;)
Thank you.

[AnouarMc]

Thanks, I appreciate the kind words :)