Combine next-auth middleware with custom middleware

[lyric quiver]

export { default } from 'next-auth/middleware';

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - api (API routes)
         * - auth (API routes)
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         * - img (static images from the public folder)
         */
        '/((?!api|auth|_next/static|_next/image|favicon.ico|img).*)'
    ]
};

How can I run extra custom middlewares after this next auth middleware?

[boreal sleet]

Hi @lyric quiver. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To combine next-auth middleware with custom middleware in Next.js, you can define a single middleware file and include both the next-auth middleware and your custom logic. You can use conditional statements to ensure that your custom middleware logic runs after the next-auth middleware.

Here's an example of how you can achieve this:

1. Import and use next-auth middleware: First, import the next-auth middleware.
2. Add your custom middleware logic: Define your custom middleware logic within the same middleware file.
3. Use conditional statements: Ensure that your custom middleware logic runs after the next-auth middleware.

Below is an example of how you can combine next-auth middleware with custom middleware:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import nextAuthMiddleware from 'next-auth/middleware';

export async function middleware(request: NextRequest) {
  // Run the next-auth middleware first
  const response = await nextAuthMiddleware(request);
  
  // Custom middleware logic
  if (request.nextUrl.pathname.startsWith('/custom-path')) {
    // Add your custom logic here
    response.headers.set('x-custom-header', 'custom-value');
  }

  return response;
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - auth (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - img (static images from the public folder)
     */
    '/((?!api|auth|_next/static|_next/image|favicon.ico|img).*)'
  ]
};

Explanation:

• Import next-auth middleware: The next-auth middleware is imported and used within the custom middleware function.
• Custom middleware logic: After running the next-auth middleware, custom logic is added to handle specific paths or conditions.
• Config object: The config object defines the matcher to specify which paths the middleware should run on.

This approach ensures that the next-auth middleware runs first, followed by your custom middleware logic.

For more details on configuring middleware in Next.js, you can refer to the Next.js Middleware documentation (https://nextjs.org/docs/messages/middleware-upgrade-guide#how-to-upgrade).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: