Next-Auth Sends "text/plain" Content-Type, Blocked by WAF

[MHBahrampour]

Description

When Next-Auth sends the login form data to the Next.js backend (API routes), the request gets blocked by our WAF because the Content-Type is set to text/plain;charset=UTF-8.

If I capture the request via curl and manually change the Content-Type to application/json, it successfully passes through the WAF and reaches the Next.js backend, then I call out API endpoint in authorize method.

Is there a way to modify the Content-Type for Next-Auth’s request?

Note: The issue is not with the API request I make manually—those are correctly set to application/json.

Related Code

📂 package.json

"next": "15.1.4",
"next-auth": "^5.0.0-beta.25"

📂 src/app/api/auth/[...nextauth]/route.ts

import { handlers } from '@/services/auth';
export const { GET, POST } = handlers;

📂 src/services/login-services.ts

import { LoginRequestPayload, LoginResponse } from '@/types/login-types';
import axiosInstance from '@/services/axiosInstance';

export const loginService = async ({
  username,
  password,
}: LoginRequestPayload): Promise<LoginResponse> => {
  const response = await axiosInstance.post<LoginResponse>(
    '/login',
    {
      username,
      password,
    },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    },
  );

  return response.data;
};

📂 src/services/auth.ts

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { loginService } from '@/services/login-services';
import { LoginSchema } from '@/schemas/login-schema';

export const { handlers, signIn, signOut, auth } = NextAuth({
  // ... pages, session, cookies, callbacks (jwt and session) are here
  providers: [
    Credentials({
      credentials: {
        username: {},
        password: {},
      },
      authorize: async (credentials) => {
        try {
          const { username, password } = await LoginSchema.parseAsync({
            username: credentials?.username,
            password: credentials?.password,
          });

          const response = await loginService({ username, password });

          if (!response.meta.success) {
            throw new Error('Login failed');
          }

          const { access_token: accessToken, refresh_token: refreshToken } =
            response.data;

          return {
            accessToken,
            refreshToken,
            username,
          };
        } catch (error)
          return null;
        }
      },
    }),
  ],
});

📂 /src/services/login-actions.ts

'use server';

import { LoginRequestPayload } from '@/types/login-types';
import { signIn } from '@/services/auth';

// This is the first thing that I call on submit
export async function loginAction(data: LoginRequestPayload) {
  return await signIn('credentials', {
    redirect: false,
    username: data.username,
    password: data.password,
  });
}