Keycloak Express openid-client

How to use Keycloak in Express using OIDC

Prerequisites

• node v16 >
• npm v8 >
• keycloak 17.0.0

Install

npm install
npm start

NOTE: Keycloak is deprecating their client adapters (keycloak-connect) for Node and recommending openid-client as a replacement.

Setup Keycloak

First I download keycloak extract it and you can run it with the following command

bin/kc.sh start-dev

You can then login http://localhost:8080, first time you do keycloak asks you to set an admin user and password.

Create a Realm and give it an name and create it. I am using keycloak-express for my realm name

The create a Client using openid-connect in the Realm

Set the Valid Redirect URIs and select save,

NOTE:you can specify specific routes here but I am using a wild card(not recommend best practice)

Create a user its documented here so I won't go into it.

That's it for Keycloak setup

Setup Openid-client with Passport in Express

We are going to use this openid-client and passport to connect to keycloak.

From the Realm we need the openid-configuration can be got an endpoint

/realms/{realm-name}/.well-known/openid-configuration

So in my case the realm name is keycloak-express so the url will be http://localhost:8080/realms/keycloak-express/.well-known/openid-configuration the output is as follows All we need for is the issuer:"http://localhost:8080/realms/keycloak-express" url to connect openid-client to keycloak as follows

'use strict';

import express from 'express';
import { Issuer, Strategy } from 'openid-client';
import passport from 'passport';
import expressSession from 'express-session';

const app = express();

// use the issuer url here
const keycloakIssuer = await Issuer.discover('http://localhost:8080/realms/keycloak-express');


// client_id and client_secret can be what ever you want
// may be worth setting them up as env vars 
const client = new keycloakIssuer.Client({
    client_id: 'keycloak-express',
    client_secret: 'long_secret-here',
    redirect_uris: ['http://localhost:3000/auth/callback'],
    post_logout_redirect_uris: ['http://localhost:3000/logout/callback'],
    response_types: ['code'],
  });

Views and login flow