Hey folks! I want to have a middlewares composition of:
- routes protecting with next auth
- CSP

I'm trying this:

export function cspMiddleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

  //  ... CSP middlware example from official next docs
  
  return response;
}

const protectedRoutes = [
  '/cabinet',
  '/stuff',
  '/transactions',
];

const authMiddleware = withAuth({
  pages: {
    signIn: '/login',
    error: '/login-error',
  },
});

// middleware composition
export default async function middleware(req: any, res: any) {
  cspMiddleware(req);

  // trying to do conditional statement:
  // https://nextjs.org/docs/app/building-your-application/routing/middleware#conditional-statements
  if (protectedRoutes.includes(req.nextUrl.pathname)) {
    return await authMiddleware(req, res);
  }
}

// config for CSP middleware
export const config = {
  matcher: [
    {
      source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
      missing: [
        { type: 'header', key: 'next-router-prefetch' },
        { type: 'header', key: 'purpose', value: 'prefetch' },
      ],
    },
  ],
};

So as you can see, I'm trying to have conditional statement for my next auth middleware and run everything for exported config. But some why it does not work as expected: protected routes are accessible.