How to sign in users on Keycloak using Github

In the last post I explained how to setup a user sign in using Keycloak and Google, without writing a single line of code.

Today we are going to do the same thing with another provider, Github. This procedure requires again three steps:

• Create a new realm on Keycloak
• Create a Github Application on the Github developer settings
• Configure Keycloak with the credentials from your Github Application

Let’s start.

Create a new realm on Keycloak

As I explained in another post, it’s important to create a new realm instead of using the Master realm that Keycloak assign you out of the box.

Login to your Keycloak admin interface and point your mouse on the left column, over the word Master. A dropdown menu will appear, click the Add realm button.

Add a name to the new realm, for this example we will use GithubAuth. Then click on Create.

Now click on Identity providers on the left column and select Github between the available providers.

In the new page that appears take note of the Redirect URI, we will need it later when we setup the Github Application. It should be something like:

https://YOUR_KEYCLOAK_DOMAIN/auth/realms/YOUR_REALM_NAME/broker/github/endpoint

Keep this page open in a tab of your browser, we will move to Github for a while but we will continue on Keycloak in the last step of this guide.

Create a Github Application

Head over to your Developers Settings page on Github and click on New Application.

Then in the following page fill in the form with the appropriate fields for:

• Application name: The name for this application on Github.
• Homepage url: The url of your application, like http://yourwebsite.com
• Authorization callback URL: the Redirect URI we got from Keycloak at the end of the previous step in this tutorial.

Then click on Register application.

On the following page Github will show the Client ID and Client Secret that you will need for Keycloak (hidden on the next screen for security reasons).

Now head back on Keycloak to complete our integration.

Configure Keycloak with the credentials from your Github Application

As final step we need to enter the Client ID and Client Secret we got from Github in the Keycloak page we left open at the end of the first step. Finally, click on Save to complete the setup.

We are done, now when we head over to our Signin page on Keycloak we will see another option, Github.

Click on Github and you will be redirected for the sign in on Github.com.

That’s all!

If you enjoyed this article signup to the KeycloakThemes newsletter below to get all updates on new tutorials and new themes.