SIGNIN_OAUTH_ERROR on keycloak expected 200 OK, got: 404 Not Found , providers id with weird suffix (google2 instead of google)

[fabioportieri]

Environment

System:
OS: Windows 10 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 9.47 GB / 31.71 GB
Binaries:
Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.2283.0), Chromium (117.0.2045.31)
Internet Explorer: 11.0.22621.1

"next": "13.4.19",
"next-auth": "^4.23.1",
"react": "18.2.0",

Reproduction URL

https://github.com/fabioportieri/nextauth-notworking.git

Describe the issue

i have weird behaviour when trying to make a oauth2 connection to a keycloack authorization server when deployed to vercel, it works fine on development, this is the error from the log upon hitting:

https://chatgpt-turbo-rouge.vercel.app/api/auth/signin/keycloak

[next-auth][error][SIGNIN_OAUTH_ERROR]
https://next-auth.js.org/errors#signin_oauth_error expected 200 OK, got: 404 Not Found {
error: {
message: 'expected 200 OK, got: 404 Not Found',
stack: 'OPError: expected 200 OK, got: 404 Not Found\n' +
' at processResponse (/var/task/.next/server/chunks/610.js:13972:15)\n' +
' at Issuer.discover (/var/task/.next/server/chunks/610.js:14464:26)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
' at async openidClient (/var/task/.next/server/chunks/610.js:8162:18)\n' +

seems like the issuer is not found somewhat

another weird thing happening, is that provider id does not match, i tried adding a google provider:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import KeycloakProvider from "next-auth/providers/keycloak";
const authOptions = {
  // Configure one or more authentication providers
  providers: [
    KeycloakProvider({
      id: "keycloak",
      clientId: process.env.KEYCLOAK_ID!,
      clientSecret: process.env.KEYCLOAK_SECRET!,
      issuer: process.env.KEYCLOAK_ISSUER,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
};
const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

when i tried to login with google i get a redirect uri mismatch error, when decoding the error returned in the url i see this:

If you're the app developer, register the redirect URI in the Google Cloud Console.
�mhttps://developers.google.com/identity/protocols/oauth2/web-server#authorization-errors-redirect-uri-mismatch �*O
redirect_uri�?https://chatgpt-turbo-rouge.vercel.app/api/auth/callback/**google2**

please note it's "google2" when instead should be "google"

also, in the keycloack logs, i saw this:
2023-09-15 15:00:48,539 WARN [org.keycloak.events] (default task-1586) type=LOGIN_ERROR, realmId=NUT, clientId=chatgpt-turbo2, userId=null, ipAddress=195.120.87.13, error=client_not_found

please note it mentions "chatgpt-turbo2" instead of my defined clientId "chatgpt-turbo"

KEYCLOAK_ID=chatgpt-turbo

so as it is now something really weird is happening on production and i can' tell what's going on

i'll try to put up an example repo, note that the code used is very minimal, it's just a nextjs app router that perform a sign in in the page.tsx like so

"use client";

import { signIn, signOut, useSession } from "next-auth/react";

export default function Home() {
  const { data: session, status } = useSession();
  console.log("auth status", status);
  console.log("auth session", session);

  useEffect(() => {
    if (status === "unauthenticated") signIn("keycloak");
  }, [status]);

How to reproduce

for the complete code:
https://github.com/fabioportieri/nextauth-notworking.git
the online project:
https://nextauth-notworking.vercel.app/

write a nextjs app with app router
with this configuration

src\app\api\auth[...nextauth]\route.ts

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import KeycloakProvider from "next-auth/providers/keycloak";
const authOptions = {
  // Configure one or more authentication providers
  providers: [
    KeycloakProvider({
      id: "keycloak",
      clientId: process.env.KEYCLOAK_ID!,
      clientSecret: process.env.KEYCLOAK_SECRET!,
      issuer: process.env.KEYCLOAK_ISSUER,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
};
const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

src\app\layout.tsx\layout.tsx:

import NextAuthProvider from "@/app/context/NextAuthProvider";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <NextAuthProvider>{children}</NextAuthProvider>
      </body>
    </html>
  );
}

NextAuthProvider.tsx:

"use client";

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

export default function NextAuthProvider({
  children,
}: {
  children: ReactNode;
}) {
  return <SessionProvider>{children}</SessionProvider>;
}

page.tsx:

"use client";

import { signIn, useSession } from "next-auth/react";
import { useEffect } from "react";

export default function Home() {
  const { data: session, status } = useSession();
  console.log("auth status", status);
  console.log("auth session", session);

  useEffect(() => {
    if (status === "unauthenticated") signIn("keycloak");
  }, [status]);

  if (status === "loading") {
    return (
      <div> LOADING
      </div>
    );
  }
  if (status === "authenticated") {
    return <p>WORKS</p>;
  }
}

Expected behavior

to be able to authenticate in production as it does in development mode

[fabioportieri]

i have made other attempts,

i reproduced an example using the provided nextauth template next-auth-example,
github repo:
https://github.com/fabioportieri/next-auth-example.git
online app:
https://next-auth-example-peach.vercel.app/

this is the complete error:

[next-auth][error][SIGNIN_OAUTH_ERROR] 
https://next-auth.js.org/errors#signin_oauth_error expected 200 OK, got: 404 Not Found {
  error: {
    message: 'expected 200 OK, got: 404 Not Found',
    stack: 'OPError: expected 200 OK, got: 404 Not Found\n' +
      '    at processResponse (/var/task/node_modules/openid-client/lib/helpers/process_response.js:41:11)\n' +
      '    at Issuer.discover (/var/task/node_modules/openid-client/lib/issuer.js:152:20)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async openidClient (/var/task/node_modules/next-auth/core/lib/oauth/client.js:16:14)\n' +
      '    at async getAuthorizationUrl (/var/task/node_modules/next-auth/core/lib/oauth/authorization-url.js:70:18)\n' +
      '    at async Object.signin (/var/task/node_modules/next-auth/core/routes/signin.js:38:24)\n' +
      '    at async AuthHandler (/var/task/node_modules/next-auth/core/index.js:260:26)\n' +
      '    at async NextAuthApiHandler (/var/task/node_modules/next-auth/next/index.js:22:19)\n' +
      '    at async NextAuth._args$ (/var/task/node_modules/next-auth/next/index.js:107:14)',
    name: 'OPError'
  },
  providerId: 'keycloak',
  message: 'expected 200 OK, got: 404 Not Found'
}

any feedback is appreciated

also tried to host the site on netfly, maybe it was a vercel related issue, still i got the very same error here:

https://melodic-pika-d6ce7e.netlify.app/

some more logging popped up when i downgraded to next-auth 4.2.1, everything seems right:

   error: 'expected 200 OK, got: 404 Not Found'
  },
  provider: {
    id: 'keycloak',
    name: 'Keycloak',
    wellKnown: 'https://www.xxxxx.it/auth/realms/NUT/.well-known/openid-configuration',
    type: 'oauth',
    authorization: { params: [Object] },
    checks: [ 'pkce', 'state' ],
    idToken: true,
    profile: [Function: profile],
    clientId: 'chatgpt-turbo',
    clientSecret: '.....',
    issuer: 'https://www.datamanagementitalia.it/iamdemo/auth/realms/NUT/',
    signinUrl: 'https://melodic-pika-d6ce7e.netlify.app/api/auth/signin/keycloak',
    callbackUrl: 'https://melodic-pika-d6ce7e.netlify.app/api/auth/callback/keycloak'
  }

[balazsorban44]

Sounds/looks like an issue with a trailing slash on the issuer or similar, not a next-auth bug.

https://www.datamanagementitalia.it/iamdemo/auth/realms/NUT/.well-known/openid-configuration returns 404 so the thrown error is expected.

[Tibrue]

Hi,

aside from turbo being a reason for this error, the issuer url responding with 404 can be a reason as well (or maybe turbo is the reason why the issuer URL answers with 404. I don't use it so I don't know how it behaves).

I had this problem twice: First, when trying to implement next-auth locally working with just npm run dev in my IDE and second, when trying to deploy my app with docker.

The first time I had this issue, I noticed that I had to delete the /auth from my issuer URL for getting it to work.
The second time I had this issue (deploying it in docker), I had to use the issuer URL with /auth.

Working with keycloak as identity provider btw.

Tbh, I haven't really figured out yet, why my issuer URL changes depending on how I run my app but I hope this might help some people here.