Published in


Setting up Keycloak using Github Identity provider in Express

First what is meant by 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.

Open Source Identity Solution for Applications, Services and APIs

Recommended from Medium

I Wish I Had Known These Tools When I Started Coding

Learning to test React Native with Jest — part 4

Completing 30 vanilla JS projects in 30 days — Part 3

Vue 3: easy custom global store with computed properties

Creating a blog with Vuepress

How to generate dynamic ENUM type in GraphQL from DataBase using NestJS, MongoDB

Serverless Data Flow Sequencing with Watson Data API and IBM Cloud Functions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Austin Cunningham

Austin Cunningham

Senior Software Engineer at Red Hat

More from Medium

Database Sharding

How To Develop A Loan lending Application: Cost, Price, and Features

Making Real-Time Apps.

Percona Backup for MongoDB with SSL/TLS