How should the middleware for next-intl and auth.js v5 be correctly configured?

[ningshenlo]

I am currently using version 5 of auth.js, as well as next-intl. Both require middleware configuration. In version 5 of auth.js, the middleware function used is auth(). How can they be correctly configured together? At present, the multilingual feature can correctly switch languages, but there is an error with logging in. After logging in, it directly redirects to: http://localhost:3000/api/auth/error, and the page displays a 404 error. My middleware configuration is as follows:

`import { NextRequest, NextResponse } from "next/server";
import createIntlMiddleware from "next-intl/middleware";
import { locales} from "@/config/somevar";
import { auth, BASE_PATH } from "@/auth";

let publicPages = ['/','sites/*','about',]

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

const authMiddleware = auth((req) => {
//
console.log(req.auth)
return intlMiddleware(req);
});

export default function middleware(req) {
const publicPathnameRegex = RegExp(
^(/(${locales.join("|")}))?(${publicPages .flatMap((p) => (p === "/" ? ["", "/"] : p)) .join("|")})/?$,
"i"
);

const isPublicPage = publicPathnameRegex.test(req.nextUrl.pathname);

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

export const config = {
matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};
`

The auth.js file is located in the project root directory, and the code is as follows:

`import NextAuth from "next-auth"
import Google from "next-auth/providers/google"

export const { handlers, auth, signIn, signOut } = NextAuth({providers:[Google],secret:'xxxxxxxxxxxxxx'})
export const BASE_PATH= 'http://localhost:3000'`

app[locale]\api\auth[...nextauth]\route.js:

import { handlers } from "@/auth" // Referring to the auth.ts we just created export const { GET, POST } = handlers
Has anyone encountered this problem? How did you solve it?