[Docs]: Middleware matcher with Next-Auth

[hakan-berat]

Link to page

https://github.com/amannn/next-intl/tree/main/examples/example-app-router-next-auth

Describe the problem

I am using Next-Auth and Next-Intl together. I have progressed smoothly with the codes in the example section. My auth mechanizm works correctly. But in my project, I have some cases where I need to intercept with middleware before the requests I make hit the api routes. But i think with the current matcher configuration this becomes impossible.

Because if I remove the 'api' from the matcher configuration the requests always go with the locale prefix but my api folder has to be outside [locale]. I would like to ask for your support on this issue,

Thanks.

---

middleware.js

import { withAuth } from 'next-auth/middleware'
import createMiddleware from 'next-intl/middleware'
import { locales } from './lib/config/routes.js'

const publicPages = [
  '/',
  '/login',
  '/register',
  '/list',
  '/cart',
  '/about',
]

const intlMiddleware = createMiddleware({
  defaultLocale: 'tr',
  locales,
  localePrefix: 'always',
})

const authMiddleware = withAuth((req) => intlMiddleware(req), {
  callbacks: {
    authorized: ({ token }) => token != null,
  },
  pages: {
    signIn: '/login',
  },
})

export default async function middleware(req, res) {
  //!!!The requests I go to api routes do not hit middleware.
  const pathname = req.nextUrl.pathname
  const publicPathnameRegex = RegExp(
    `^(/(${locales.join('|')}))?(${publicPages
      .flatMap((p) => (p === '/' ? ['', '/'] : p))
      .join('|')})/?$`,
    'i'
  )
  const isPublicPage = publicPathnameRegex.test(pathname)

  if (isPublicPage) {
    return intlMiddleware(req)
  } else {
    return authMiddleware(req)
  }
}

export const config = {
  matcher: [
    '/((?!api|_next|.*\\..*).*)',
    '/(tr|en)/:path*',
  ],
}

My app structure:

[amannn]

If you want to protect your Route Handlers with NextAuth, I guess you could change the matcher for them to pass also through the middleware, but add a condition within the middleware code to exclude them from running through the middleware from next-intl.

I'll move this to a discussion since it's a usage question.

[hakan-berat]

@amannn Thank you for your time. I'm proceeding as you suggested, I removed the api from my matcher config and I've done a conditional check in the middleware. Everything seems to be fine now. When I finish my tests I will be posting my middleware under this discussion to get the community's opinion.

[EmreKURNALI]

I'm in exactly the same situation. What would be the ideal approach about this case?

[hakan-berat]

Hey @EmreKURNALI, upon @amannn suggestion, I remove 'api' from matcher config and provided conditional check in middleware. When I finish my tests, I will be posting them under this discussion.

[imtaxu]

the middleware that works perfectly for me is as below. although i'm no longer use next-auth. lucia-auth is much more flexible, and i can customize it as i like.

import { NextRequest } from "next/server";
import { withAuth } from "next-auth/middleware";
import createIntlMiddleware from "next-intl/middleware";

import { locales } from "@/messages";

const privatePages = ["/admin(/.*)?"];

const intlMiddleware = createIntlMiddleware({
  locales,
  localePrefix: "as-needed",
  defaultLocale: "us",
});

const authMiddleware = withAuth(
  function onSuccess(req) {
    return intlMiddleware(req);
  },
  {
    callbacks: {
      authorized: ({ token }) => token != null,
    },

    pages: {
      signIn: "/login",
    },
  },
);

export default function middleware(req: NextRequest) {
  const isPrivatePage = privatePages.some((page) => {
    const pageRegex = new RegExp(
      `^(/(${locales.join("|")}))?(${privatePages
        .map((page) => page.replace(/\(\.\*\)\?$/, "(.*)"))
        .join("|")})/?$`,
      "i",
    );

    return pageRegex.test(req.nextUrl.pathname);
  });

  if (!isPrivatePage || req.nextUrl.pathname === "/") {
    return intlMiddleware(req);
  }

  return (authMiddleware as any)(req);
}

export const config = {
  matcher: ["/((?!api|_next|.*\\..*).*)"],
};

[hakan-berat]

Hey @imtaxu, thanks for your contribution. I totally agree with you. Next-Auth is literally hell. I thought about migrating my high scale production grade application to Lucia but I couldn't find the time. I was wondering, have you had a chance to try JWT credentials login and/or google/social login with custom backend using Lucia for your production grade applications?

[imtaxu]

the answers you are looking for are here.
@ugurkellecioglu has a very successful lucia series.