DEV Community

loading...
Cover image for Setting up Keycloak using Github Identity provider in Express

Setting up Keycloak using Github Identity provider in Express

austincunningham profile image Austin Cunningham Updated on ・2 min read

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.

Alt Text

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 Click on the Add provider drop down and select Github
  • In the Add identity provider page copy the Redirect URI Alt Text
  • In Github go to Settings In Github go to Settings
  • In Setting go to Developer Settings Developer Settings
  • In Developer Settings select OAuth Apps
  • Click the New OAuth App button 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 Register new OAuth application
  • In the follow on page you can get the Client ID and Generate a new Client secret with the button get client id and secret
  • 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 add client id and secret
  • As you can see when a protected route is clicked we get redirected to keycloak and have an option for github Show github redirect
  • 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 });
Enter fullscreen mode Exit fullscreen mode
  • Add an idp hint to the Keycloak object as follows
var keycloak = new Keycloak({ store: memoryStore, idpHint: 'github' });
Enter fullscreen mode Exit fullscreen mode
  • And our login flow looks like this Show github redirect without keycloak login screen

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.

Discussion (0)

Forem Open with the Forem app