OperationProcessingError: "response" content-type must be application/json - Custom Provider Setup for PKCE

[ysezen]

Hello Everyone;

I asked to AI assistant where at the Authjs.dev and it said to me that "I can't find the setup for custom psetup for PKCE. Please open discussion" Now, I have my own auth server(I setup django pyton at docker container), so it is sample link for authorize(if there is no authentication route automatically to login page, user entry to credential or click to sign in with google and return authorize page after all send to me code like Auth.js process)
This is sample link: http://localhost/users/authorize/?response_type=code&code_challenge=vGQKUMLKRSK0yI24J8OBZcUl56fa-77by9Yge7rBDY0&scope=admin-list-users user-read-email user-read-private&code_challenge_method=S256&client_id=zRm7RkVmxdRsAMp0cUbsfdgYTDvbeFGOFKuiCJKwNB6D&redirect_uri=http://localhost:3000/api/auth/callback/custom-iam.

Do you have any documentation? I can't find this sorry...

İt is my problem. How can I handle this? How can I set the content type for responds for token
Summary info:
I already can go to authorize page and the url is generate without any problem.
And I got this error when after authorize accept scope page;
`[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: OperationProcessingError: "response" content-type must be application/json

This is app/layout.js

`
"use client";

import { SessionProvider } from "next-auth/react";

export default function RootLayout({ children }) {
return (


{children}


);
}
`

This is app/page.js

`"use client";

import { useSession, signIn, signOut } from "next-auth/react";
import { storePkceValues, getPkceValues } from "@/helpers/pkce";
import { useCallback } from "react";

export default function Page() {
const { data: session, status } = useSession();

const handleSignIn = useCallback(async () => {
try {
await storePkceValues();
const { codeChallenge, codeVerifier } = getPkceValues();

  await signIn("custom-iam", null, {
    code_challenge: codeChallenge,
    code_verifier: codeVerifier,
  });
} catch (error) {
  console.error("Error during sign-in:", error);
}

}, []);

if (status === "loading") {
return

Loading...

;
}

if (status === "authenticated") {
return (

Signed in as {session.user?.email || "Unknown user"}

<button onClick={() => signOut()}>Sign out

);
}

return (

Not signed in

Sign in

);
}
`
This is app/api/auth/[...nextauth]/route.js;

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

This is ./auth.js
`import NextAuth from "next-auth";

const domain = process.env.AUTH_SERVER_URL;
const clientDomain = process.env.NEXTAUTH_URL;

export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [
{
id: "custom-iam",
name: "Custom IAM",
type: "oauth",
version: "2.0",
clientId: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
token: {
url: ${domain}/o/token/,
params: {
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
grant_type: "authorization_code",
redirect_uri: ${clientDomain}/api/auth/callback/custom-iam,
},
},
authorization: {
url: ${domain}/users/authorize,
params: {
response_type: "code",
client_id: process.env.CLIENT_ID,
redirect_uri: ${clientDomain}/api/auth/callback/custom-iam,
scope: "admin-list-users user-read-email user-read-private",
code_challenge_method: "S256",
},
},
userinfo: ${domain}/api/getme,
profile(profile) {
return {
id: profile.id,
name: profile.name,
email: profile.email,
};
},
},
],
callbacks: {
async jwt({ token, account, user }) {
console.log("JWT Callback - User:", user); // Debugging için ekleyin
console.log("JWT Callback - Token:", token);

  if (user?.code_verifier) {
    token.codeVerifier = user.code_verifier; // `code_verifier`'ı JWT'ye ekle
  }
  return token;
},
async session({ session, token }) {
  console.log("Session Callback - Token:", token); // Debugging için

  // Oturuma `code_verifier` ve `access_token` ekleyin
  session.codeVerifier = token.codeVerifier;
  session.accessToken = token.accessToken;
  return session;
},

},
secret: process.env.NEXTAUTH_SECRET,
});
`

and finally .env file;
`CLIENT_ID=zRm743fWfgwfvmxdRsAMp0cUbsfdgYTDvbeFGOFKuiCJKwNB6D
CLIENT_SECRET=4aJzEnwIZ4HhASfefcSVSEcxEFW+pkmLg4o2NrBxHtexYmfcFFtj2z8qdGKzXEjOa7k3nZIYI8saOL0iwhNFXfOP7wThoiwdb
AUTH_SERVER_URL=http://localhost
NEXTAUTH_URL=http://localhost:3000
AUTH_SECRET=Ez55WNa8DSsfRfSvZNWnPmtFgASAZc=

I already can go to authorize page and the url is generate without any problem.
And I got this error when after authorize accept scope page;
[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror [auth][cause]: OperationProcessingError: "response" content-type must be application/json at OPE (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/oauth4webapi/build/index.js:179:12) at notJson (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/oauth4webapi/build/index.js:344:12) at assertContentType (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/oauth4webapi/build/index.js:353:15) at assertApplicationJson (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/oauth4webapi/build/index.js:330:5) at handleOAuthBodyError (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/oauth4webapi/build/index.js:1668:9) at processGenericAccessTokenResponse (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/oauth4webapi/build/index.js:1206:26) at processAuthorizationCodeOAuth2Response (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/oauth4webapi/build/index.js:1450:26) at Module.processAuthorizationCodeResponse (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/oauth4webapi/build/index.js:1394:12) at handleOAuth (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/lib/actions/callback/oauth/callback.js:164:83) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Module.callback (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/lib/actions/callback/index.js:47:41) at async AuthInternal (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/lib/index.js:43:24) at async Auth (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]/node_modules/@auth/core/index.js:130:34) at async AppRouteRouteModule.do (.\node_modules\.pnpm\[email protected][email protected][email protected][email protected] at async invokeRender (.\node_modules\.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js:230:21) at async handleRequest (.\node_modules\.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js:408:24) at async requestHandlerImpl (.\node_modules\.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js:432:13) at async Server.requestListener (.\node_modules\.pnpm\[email protected][email protected][email protected][email protected]\node_modules\next\dist\server\lib\start-server.js:146:13) [auth][details]: { "provider": "custom-iam" } GET /api/auth/callback/custom-iam?code=BWnalWbs9U8wIlb7NzE7jUEZwq3tgo 302 in 45ms GET /api/auth/error?error=Configuration 500 in 20ms