Setting up Keycloak using Github Identity provider in Express

First what is meant by Identity provider? it’s allowing a third party to handle your authentication to your application like Facebook, Github or Linkedin see Keycloaks supported list below in image.

In this example I will use Github. I have a previous blog detailing how to setup an Express app with Keycloak. This basically covers setting up a keycloak realm , client, user, and adding the keycloak.json to your express app and using the keycloak-connect module.

Once you have your app setup with Keycloak you can add an identity provider.

• In Keycloak select Identity Providers
• Click on the Add provider drop down and select Github
• In the Add identity provider page copy the Redirect URI

• In Github go to Settings

• In Setting go to Developer Settings

• In Developer Settings select OAuth Apps
• Click the New OAuth App button

• In the Register a new OAuth application
• Add a Application Name
• Add a Homepage URL (in this case I am running locally)
• Add Authorization callback URL (we copied this earlier from Keycloak i.e. Redirect URI)
• Then click the Register application button

• In the follow on page you can get the Client ID and Generate a new Client secret with the button

• Copy the Client ID and Client secret
• Back in Keycloak Add identity provider page add the Client ID and Client secret and click the save button

• As you can see when a protected route is clicked we get redirected to Keycloak and have an option for github

• One final refinement we don’t want show our users two different ways to login, so we change the Keycloak object from

var keycloak = new Keycloak({ store: memoryStore });

• Add an idp hint to the Keycloak object as follows

var keycloak = new Keycloak({ store: memoryStore, idpHint: ‘github’ });

• And our login flow looks like this

NOTE: As I am logged into Github and have an active session I am not redirected to the Github login I just have to authorize.