My approach took a different direction from the discussion thread mentioned here.
I wasn't fond of the numerous redirects occurring in my application or the idea of creating a new endpoint solely for managing the "post-logout handshake."
Instead, I opted to directly include the id_token in the original JWT token generated. Additionally, I attached a function named doFinalSignoutHandshake to the events.signOut, which automates a GET request to the keycloak service endpoint and logs out the user's session automatically.
This method allows me to retain all existing application flows and utilize the standard signOut method provided by next-auth without requiring any specific modifications on the front end.
Since this is written in TypeScript, I extended the JWT definition to incorporate the new values (this step may not be necessary in vanilla JS).
// located under /types/next-auth.d.ts in your project
// Most editors will merge the definitions automatically
declare module "next-auth/jwt" {
interface JWT {
provider: string;
id_token: string;
}
}
Below is my implementation of /pages/api/[...nextauth.ts]
import axios, { AxiosError } from "axios";
import NextAuth from "next-auth";
import { JWT } from "next-auth/jwt";
import KeycloakProvider from "next-auth/providers/keycloak";
// I defined this outside of the initial setup so
// that I wouldn't need to keep copying the
// process.env.KEYCLOAK_* values everywhere
const keycloak = KeycloakProvider({
clientId: process.env.KEYCLOAK_CLIENT_ID,
clientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
issuer: process.env.KEYCLOAK_ISSUER,
});
// This function handles the final handshake for the keycloak provider
// The way it's structured could potentially work for other providers as well
async function doFinalSignoutHandshake(jwt: JWT) {
const { provider, id_token } = jwt;
if (provider == keycloak.id) {
try {
// Add the id_token_hint to the query string
const params = new URLSearchParams();
params.append('id_token_hint', id_token);
const { status, statusText } = await axios.get(`${keycloak.options.issuer}/protocol/openid-connect/logout?${params.toString()}`);
// The response body should confirm that the user has been logged out
console.log("Completed post-logout handshake", status, statusText);
}
catch (e: any) {
console.error("Unable to perform post-logout handshake", (e as AxiosError)?.code || e)
}
}
}
export default NextAuth({
secret: process.env.NEXTAUTH_SECRET,
providers: [
keycloak
],
callbacks: {
jwt: async ({ token, user, account, profile, isNewUser }) => {
if (account) {
// Copy the expiry from the original keycloak token
// Overrides the settings in NextAuth.session
token.exp = account.expires_at;
token.id_token = account.id_token;
// Update includes the "provider" property
token.provider = account.provider;
}
return token;
}
},
events: {
signOut: ({ session, token }) => doFinalSignoutHandshake(token)
}
});