Works locally but not in production: Next-Auth ^5.0.0-beta.20 / Keycloak 18.0.2 / Next: ^14.2.2

[FernandoBDAF]

Provider type
Keycloak

Environment
System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1
Memory: 62.23 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.16.0 - ~/.local/state/fnm_multishells/1832_1724242176301/bin/node
Yarn: 4.1.0 - ~/.local/state/fnm_multishells/1832_1724242176301/bin/yarn
npm: 10.8.1 - ~/.local/state/fnm_multishells/1832_1724242176301/bin/npm
Browsers:
Chrome: 127.0.6533.120
Safari: 17.6

Describe the issue
When running local, the Keycloak authentication works as expected. But when running on production, inside a docker environment managed by Kubernetes, We receive a 502 Bad Gateway response. The Next JS log says:

error { error: 'invalid_grant', error_description: 'Code not valid' }
[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: Error: TODO: Handle OIDC response body error
at iE (/app/.next/server/chunks/7460.js:393:29404)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async iD (/app/.next/server/chunks/7460.js:393:35495)
at async iF (/app/.next/server/chunks/7460.js:393:46824)
at async iY (/app/.next/server/chunks/7460.js:393:51686)
at async /app/.next/server/chunks/8669.js:13:49805
at async /app/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:36258
at async eR.execute (/app/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:26874)
at async eR.handle (/app/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:37512)
at async doRender (/app/node_modules/next/dist/server/base-server.js:1377:42)
Questions:

Can you help me identify the cause of the issue?
Is it related to Keycloak misconfiguration?
Or it might be related to some difference in the production environment?
Why does the error mention a TODO?
How to reproduce
Next-Auth Version: ^5.0.0-beta.20
Keycloak Version: 18.0.2
Keycloak is configured with:

Client protocol: openid-connect
Access type: confidential
Client Authenticator: Client Id and Secret
The Valid Redirect URIs and Web Origins are also correctly set

Here's how I configured next-auth:

import * as Sentry from '@sentry/nextjs'
import dayjs from 'dayjs'
import NextAuth from 'next-auth'
import KeycloakProvider from 'next-auth/providers/keycloak'
import 'server-only'

import { env } from './env'
import { logoutRequest, refreshTokenRequest } from './oidc'

const clientId = env.AUTH_KEYCLOAK_ID
const clientSecret = env.AUTH_KEYCLOAK_SECRET
const issuer = env.AUTH_KEYCLOAK_ISSUER

export const keycloakProvider = KeycloakProvider({
    clientId,
    clientSecret,
    issuer,
    profile: (profile) => ({
        id: profile.sub,
        name: profile.name,
        email: profile.email,
    }),
})

export const { auth, handlers, signIn, signOut } = NextAuth({
    providers: [keycloakProvider],
    debug: process.env.NODE_ENV !== 'production',
    secret: env.NEXTAUTH_SECRET,
    session: {
        strategy: 'jwt',
    },
    callbacks: {
        jwt: async ({ token, account, user }) => {
            if (account && user) {
                token.access_token = account.access_token
                token.refresh_token = account.refresh_token ?? token.refresh_token
            }

            const isExpiredToken = !!token.exp && token.exp < dayjs().unix()
            if (isExpiredToken) {
                const refreshResponse = await refreshTokenRequest({
                    issuer,
                    client_id: clientId,
                    client_secret: clientSecret,
                    refresh_token: token.refresh_token,
                })
                token.access_token = refreshResponse.access_token
                token.refresh_token = refreshResponse.refresh_token ?? token.refresh_token
                token.exp = dayjs().add(refreshResponse.expires_in, 'second').unix()
            }

            return token
        },

        session: async ({ session, token }) => {
            const user = {
                id: token.sub,
                name: token.name,
                email: token.email!,
            }

            const scope = Sentry.getCurrentScope()
            if (scope) {
                scope.setUser(user)
            }

            return {
                ...session,
                user,
                error: token.error,
                accessToken: token.access_token,
            }
        },
    },
    events: {
        signOut: async (message) => {
            const scope = Sentry.getCurrentScope()
            if (scope) {
                scope.setUser(null)
            }

            const token = 'token' in message ? message.token : null
            if (!token || !token.refresh_token) {
                console.error('Missing refresh token:', token)
                return
            }

            await logoutRequest({
                issuer,
                client_id: clientId,
                client_secret: clientSecret,
                refresh_token: token.refresh_token,
            })
        },
    },
})

We also tested a simplified version. But this one did not kill the user's session upon sign-out.
We saw the same Bad Gateway error happening on production.
Here's the code:

import * as Sentry from '@sentry/nextjs'
import dayjs from 'dayjs'
import NextAuth from 'next-auth'
import KeycloakProvider from 'next-auth/providers/keycloak'
import 'server-only'

import { env } from './env'

const clientId = env.AUTH_KEYCLOAK_ID
const clientSecret = env.AUTH_KEYCLOAK_SECRET
const issuer = env.AUTH_KEYCLOAK_ISSUER

export const keycloakProvider = KeycloakProvider({
    clientId,
    clientSecret,
    issuer,
    profile: (profile) => ({
        id: profile.sub,
        name: profile.name,
        email: profile.email,
    }),
})

export const { auth, handlers, signIn, signOut } = NextAuth({
    providers: [keycloakProvider],
    debug: process.env.NODE_ENV !== 'production',
    secret: env.NEXTAUTH_SECRET,
    session: {
        strategy: 'jwt',
    },
    callbacks: {
        jwt: async ({ token, account, user }) => {
            if (account && user) {
                token.access_token = account.access_token
                token.refresh_token = account.refresh_token ?? token.refresh_token
            }

            return token
        },

        session: async ({ session, token }) => {
            const user = {
                id: token.sub,
                name: token.name,
                email: token.email!,
            }

            const scope = Sentry.getCurrentScope()
            if (scope) {
                scope.setUser(user)
            }

            return {
                ...session,
                user,
                error: token.error,
                accessToken: token.access_token,
            }
        },
    },
})

Here's also how I configured a next-auth.d.ts:

/* eslint-disable */
import NextAuth, { DefaultSession } from 'next-auth'

declare module 'next-auth' {
    interface Session {
        accessToken: string
        user: {
            id: string
            name: string
            email: string
        }
    }
}

declare module '@auth/core/jwt' {
    interface JWT {
        refresh_token: string
    }
}

Expected behavior
The user should be able to sign in with both google and/or facebook identity provider on production as it is doing locally.

[adonaicosta]

pelo erro/log o problema nao esta no keycloak em si, mas pode estar na configuração de callback ou no deploy da aplicação dentro do next que responde por esse callback

For an OAuth provider, possible causes are:

The user denied access to the application
There was an error parsing the OAuth Profile: Check out the provider’s profile or userinfo.request method to make sure it correctly fetches the user’s profile.
The signIn or jwt callback methods threw an uncaught error: Check the callback method implementations.

[BertramYe]

use this solutions: #11684