Hey everyone, in this blog we will be setting up the "Sign in with GitHub" option using Keycloak. We will be using a self-hosted Keycloak instance deployed on Elestio. So, to get started head over to Elestio Dashboard and deploy and login into the Keycloak instance to get started. To set up GitHub as an identity provider in Keycloak, follow these detailed steps. Keycloak’s integration with GitHub allows users to log in using their GitHub credentials, simplifying authentication and enhancing security.
Creating New Realm
According to the Keycloak documentation
A realm manages a set of users, credentials, roles, and groups. A user belongs to and logs into a realm. Realms are isolated from one another and can only manage and authenticate the users that they control.
Once you are logged in, head over to the drop-down menu on the top left hand. It is important to notice that there is a realm " Keycloak master" already available. This realm has higher privileges hence it is recommended to create a new realm. Click on " Create realm".
Now add the realm information such as Realm name. For eg: Here I have given it a name " GitHub-Auth". Click on " Create" to create new realm.
Initial Setup in Keycloak
Navigating to the Identity Providers section. From the Social section, select GitHub to create a new GitHub identity provider integration. This selection opens a configuration page where you’ll input the necessary credentials to connect with GitHub.
On this configuration page, you’ll find a Redirect URI specific to Keycloak, which you’ll need to register with GitHub later in the setup. Copy this Redirect URI, as it will be essential when configuring the GitHub app to ensure a smooth login flow.
Register a New OAuth App on GitHub
Next, you need to register Keycloak as an OAuth application in GitHub. Start by logging into your GitHub Developer Settings and navigating to OAuth Apps. Click on New OAuth App to start the registration process.
In the registration form, provide your application’s details, including the Application name and Homepage URL. In the Authorization callback URL field, paste the Redirect URI you copied from Keycloak’s setup page. This callback URL ensures that, after a successful GitHub login, users are redirected back to Keycloak to complete the authentication process.
Obtain Client ID and Client Secret
After completing the form, GitHub will generate a Client ID and Client Secret for your new OAuth app. These credentials allow Keycloak to securely communicate with GitHub’s authentication system. Copy both the Client ID and Client Secret, as you’ll need them for the next step.
To view the Client Secret , select the Generate a new client secret option in the OAuth app settings if you haven’t done so already. It’s important to store this information securely since it enables your Keycloak instance to interact with GitHub for user authentication.
Enter GitHub Credentials in Keycloak
Return to Keycloak and, on the GitHub identity provider configuration page, paste the Client ID and Client Secret you obtained from GitHub. Save your changes to finalize the integration. Once saved, Keycloak will now treat GitHub as a valid identity provider, allowing users to authenticate with their GitHub credentials.
For a little last configuration, scroll a little bit down until you find the First login flow override option and if not on the first broker login by default then change it to it.
And done! Now you can head over to the sign-in url specific to your realm and you will find an option to Sign in with GitHub.
Thanks for reading ❤️
Thank you so much for reading and do check out the resources provided to learn more about the Keycloak. You can click the button below to create your service on Elestio and implement this authentication method. See you in the next one👋
Top comments (0)