[v4] Get oauth access_token or custom claims (keycloak provider)

[danielschlitt]

Question 💬

When using getToken() method in either a next.js v12 middleware, or any page with serverSideProps I'm able to access certain properties like email, name or sub. Setting the raw option to true I get a JWT Token without payload (something like: [...]MjU2R0NNIn0..ATQhw0Hn[...]) - there is just no payload at all.

const token = await getToken({ req, secret, raw: true })

If I turn on debug: true in NextAuth config (/pages/api/auth/[...nextauth].ts) I can see a complete access_token and id_token, as well as a complete set informations (OAuthProfile) including custom claims I added in Keycloak.

I've used the next-auth-example as starting point and everything works like a charm with Keycloak as provider (I'm able to login and logout etc.) - I'm just not able to get my custom mappers/claims.

How to reproduce ☕️

pages/api/auth/[...nextauth].ts

import NextAuth from "next-auth";
import KeycloakProvider from "next-auth/providers/keycloak";

export default NextAuth({
  providers: [
    KeycloakProvider({
      clientId: process.env.KEYCLOAK_ID,
      clientSecret: process.env.KEYCLOAK_SECRET,
      issuer: process.env.KEYCLOAK_ISSUER,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
  session: {
    jwt: true,
  },
  jwt: {
    secret: process.env.JWT_SECRET,
  },
  debug: true,
});

pages/_middleware.ts:

import { NextResponse, NextRequest, NextFetchEvent } from "next/server";
import { getToken } from "next-auth/jwt";

const secret = process.env.JWT_SECRET;

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  const token = await getToken({
    req,
    secret,
    raw: true,
  });
  console.log(token);
  return NextResponse.next();
}

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[stormfar]

Any update on this?

[louismd-pwc]

Hi there!

Having the same problem, I started tinkering around, and it is actually your message that put me on the right way.

As you saw using debug mode, next-auth returns everything it gets from the auth provider in the account object. This object is available in the jwt callback, but only once, right after the user signs in. You can intercept it and put it in the token object (the one you get with getToken), and with the session callback, intercept that and put it in the session object, so that it becomes available in your entire app (even when the user refreshes the page or you restart your server).

You can do it like so:

import NextAuth from "next-auth";
import KeycloakProvider from "next-auth/providers/keycloak";

export default NextAuth({
  providers: [
    KeycloakProvider({
      clientId: process.env.KEYCLOAK_ID,
      clientSecret: process.env.KEYCLOAK_SECRET,
      issuer: process.env.KEYCLOAK_ISSUER,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
  jwt: {
    secret: process.env.JWT_SECRET,
  },
  // debug: true,
  callbacks: {
    jwt: ({ token, account }) => {
      if (account != null) {
        token.idToken = account.id_token // comes from keycloak; you can do the same with every other property returned by it
        return token
      }
    },
    session: ({ session, token }) => {
      if (token?.idToken != null) {
        session.idToken = token.idToken // you can now access idToken anywhere in your app with getSession()
      }
      return session
    }
  }
});

Hope it helped!