Next middleware blocking file formdata requests

[Buupu]

Question 💬

Hello,

Next-auth middleware is blocking my requests that contain files within the formData.

I have implemented next-auth with the default middleware settings and have an api/images route to accept the image upload request.

Here is my request:

let formData = new FormData();
    formData.append('file', file);

    const res = await fetch(`/api/images`, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        type: 'multipart/form-data',
      },
      body: formData,
    });

The request ends up indefinitely stuck on pending and the API never receives the request -

with nothing appearing in the client/server logs.

If I remove the formData.append('file', file); line then the request recieved.

I thought this would be an issue with the file size but this happens with files around 20kb in size.

How to reproduce ☕️

api/[...nextAuth].js

import NextAuth from 'next-auth';
import CognitoProvider from 'next-auth/providers/cognito';

export default NextAuth({
  providers: [
    CognitoProvider({
      clientId: process.env.COGNITO_CLIENT_ID,
      clientSecret: process.env.COGNITO_CLIENT_SECRET,
      issuer: process.env.COGNITO_ISSUER,
    }),
  ],
  debug: true,
});

middleware.ts

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

api/images/index.ts

import { NextApiRequest, NextApiResponse } from 'next/types';

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  some stuff...
}

frontend request

const input = e.target as HTMLInputElement;

    if (!input.files?.length) {
      setIsUploadingImage(false);
      return;
    }

    const file = input.files[0];

    let formData = new FormData();
    formData.append('file', file);

    const res = await fetch(`/api/images`, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        type: 'multipart/form-data',
      },
      body: formData,
    });

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

Do you need auth on that endpoint? If not, check out the Next.js docs on how to exclude pages from the Middleware matching via the matcher option. https://nextjs.org/docs/advanced-features/middleware#matcher