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.

Setting up idp is well documented here.

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.