How to use a dynamic issuer

[peter-y-w]

Summary

Hi, I'm using the Keycloak Provider and NextAuth 4.23.1 with the Next13 app router. My constraint is that users live in different Keycloak realms.

My app takes a user's email input and uses a separate Keycloak API call to figure out which realm the user is on. I then use NextAuth's advanced initialisation and third parameter of signIn() to pass this realm to [...nextauth]/route.ts:

// in my login component

signIn(keycloakProviderId.current, { redirect: '/' }, { realm: realms[0] });

// in [...nextauth]/route.ts

export async function POST(req: NextApiRequest, res: NextApiResponse) {
  console.log('inside POST');
  const reqBody = req.url || '';
  const urlParams = new URLSearchParams(new URL(reqBody).search);
  const realm = urlParams.get('realm');
  console.log('realm:', realm);

  const authOptions = getAuthOptions(realm);
  return await NextAuth(req, res, authOptions);
}

// in the same file, function getAuthOptions(realm)

export const getAuthOptions = realm => {
  const issuer = `https://${keycloak-instance-base-url}/realms/${realm}`;
  return {
    providers: [
      KeycloakProvider({
        clientId: process.env.KEYCLOAK_CLIENT_ID || '',
        clientSecret: process.env.KEYCLOAK_SECRET || '',
        issuer: issuer
      })
    ],

So far, so good. I can use getAuthOptions() everywhere I would otherwise import authOptions.

The problem now is the GET request.

// in [...nextauth].route.ts
export async function GET(req: NextApiRequest, res: NextApiResponse) {
  console.log('inside GET');
  const token = await getToken({ req });
  const issuer = (token?.profile as { iss?: string })?.iss;
  const realm = issuer?.split('/').pop() || undefined;
  console.log('realm:', realm);
  // const realm = 'placeholder'; //This all gets solved when a dynamic value can get here. This is the big biscuit
  return await NextAuth(req, res, getAuthOptions(realm));
}

As you can see, I can grab realm from the req passed in if it exists there. However, the issue is there seems to be a call to GET where this just isn't available, and it breaks the app:

From my console:

inside POST
realm: RealmName

inside GET
realm: undefined
[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error Realm does not exist {
  error: OPError: Realm does not exist
      at processResponse (webpack-internal:///(rsc)/./node_modules/openid-client/lib/helpers/process_response.js:35:19)
      at Function.discover (webpack-internal:///(rsc)/./node_modules/openid-client/lib/issuer.js:143:26)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async openidClient (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/client.js:12:18)
      at async oAuthCallback (webpack-internal:///(rsc)/./node_modules/next-auth/core/lib/oauth/callback.js:94:24)
      at async Object.callback (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/callback.js:18:79)
      at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:202:38)
      at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:50:30)
      at async GET (webpack-internal:///(rsc)/./src/app/api/auth/[...nextauth]/route.ts:63:12)
      at async /Users/username/Projects/ProjectName/project-ui/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:1:66877 {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'keycloak',
  message: 'Realm does not exist'
}

This GET call happens after authentication with Keycloak and Keycloak redirects back to my app. However it seems to be a call that doesn't take Keycloak's response initially. If I hardcode the realm value in the GET call to progress past this initial call, I can see that iss does exist on the token.profile in subsequent GET calls, where I can grab the value. Surely there must be a way of sending this data into the initial GET call?

Thanks in advance for your help.

Additional information

Example

No response

[alexandraleigh]

Were you able to find a solution? Currently running into the same issue.

[peter-y-w]

Ended up having to pass in a cookie from the client side. The next-auth architecture is pretty inflexible.

[MarkLyck]

For anyone else that runs into this issue, like @peter-y-w I also solved it using cookies:

Here's my implementation:

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

import type { NextApiRequest, NextApiResponse } from 'next'
import NextAuth from 'next-auth'
import KeycloakProvider from 'next-auth/providers/keycloak'
import { cookies } from 'next/headers'

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const issuerCookie = cookies().get('kc_issuer')

  return await NextAuth(req, res, {
    providers: [
      KeycloakProvider({
        clientId: process.env.KEYCLOAK_ID as string,
        clientSecret: '',
        issuer:
          issuerCookie?.value ??
          YOUR_FALLBACK_ISSUER_URL,
      }),
    ],
  })
}

export { handler as GET, handler as POST }

client component

'use client'

import { useSession, signIn, signOut } from 'next-auth/react'
import { useEffect } from 'react'

import Cookies from 'js-cookie'

export const Keycloak = () => {
  const { data: session } = useSession()
  useEffect(() => {
    Cookies.set(
      'kc_issuer',
      YOUR_DYNAMIC_KEYCLOAK_ISSUER_URL,
    )
  }, [])

  return (
    <button
            type="button"
            onClick={() =>
              signIn('keycloak')
            }
          >
            Sign in
          </button>
  )
}

with next-auth@5 (beta)

export const { handlers, auth, signIn, signOut } = NextAuth(() => {
  const issuerCookie = cookies().get('kc_issuer')

  return {
    providers: [
      Keycloak({
        clientId: process.env.KEYCLOAK_CLIENT_ID ?? '',
        clientSecret: 'REQUIRED_BY_NEXT_AUTH_BUT_UNUSED',
        issuer: issuerCookie?.value ?? ''
      }),
    ],
  }
})

[pauldunn]

Hi @MarkLyck ,

Does this approach still work? have got a working example?
I'm getting errors when attempting to use the code snippets above.
The next-auth@5 (beta) snippet, does go in the app/auth.js config file?

Thanks!