After upgrading auth0 library to 4.0, middleware is breaking

[psycpvv]

Checklist

• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

I'm using next-intl so I have to combine @auth0/nextjs-auth0 and next-intl.

It's @auth0/nextjs-auth0 3.5 & next-intl middleware code.

`import { NextFetchEvent, NextRequest } from 'next/server'
import createMiddleware from 'next-intl/middleware'
import { routing } from './i18n/routing'
import { initAuth0 } from '@auth0/nextjs-auth0/edge'
import { env } from './env'
import { BASE_URL } from './constants/constants'

const auth0 = initAuth0({
secret: env.AUTH0_SECRET,
issuerBaseURL: env.AUTH0_ISSUER_BASE_URL,
baseURL: BASE_URL,
clientID: env.AUTH0_CLIENT_ID,
clientSecret: env.AUTH0_CLIENT_SECRET,
})

const publicPages = ['/', '/ref']

const intlMiddleware = createMiddleware(routing)

const authMiddleware = auth0.withMiddlewareAuthRequired(
async function middleware(_req) {
return intlMiddleware(_req)
},
)

export default function middleware(req: NextRequest, event: NextFetchEvent) {
const publicPathnameRegex = RegExp(
^(/(${routing.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, event)
}
}

export const config = {
// Skip all paths that should not be internationalized
matcher: ['/((?!api|_next|.\..).*)'],
}
`

But, version 4.0 doesn't have withMiddlewareAuthRequired method.
How to solve it?

Describe the ideal solution

I want to combine next-intl middleware and @auth0/nextjs-auth0 middleware.

helpful link: https://next-intl-docs.vercel.app/docs/routing/middleware#example-auth-js (next-auth and next-intl combination)

If there isn't any solution, I have to give up this library and need to use next-auth. But It costs lot's of time. :(
Please help me asap.
Thanks.

Alternatives and current workarounds

No response

Additional context

No response

[guabu]

Hi @psycpvv 👋 This is definitely possible with v4. Here's a complete example of how to combine the next-intl middleware with the new version of v4 middlware:

import type { NextRequest } from "next/server"
import createMiddleware from "next-intl/middleware"

import { auth0 } from "./lib/auth0"
import { routing } from "./src/i18n/routing"

const intlMiddleware = createMiddleware(routing)

export async function middleware(request: NextRequest) {
  const authResponse = await auth0.middleware(request)

  // if path starts with /auth, let the auth middleware handle it
  if (request.nextUrl.pathname.startsWith("/auth")) {
    return authResponse
  }

  // call any other middleware here
  const intlRes = intlMiddleware(request)

  // add any headers to the response
  for (const [key, value] of authResponse.headers) {
    intlRes.headers.set(key, value)
  }

  // combine the responses
  return intlRes
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
}

I'll make sure this is added to the docs so it can help others.

[guabu]

We've updated our docs to show how to combine middleware and added a new example specifically for the next-intl.