How to integrate GitHub login in your app

Integrating GitHub sign in to your web app lets consumers sign in to your app using their existing GitHub account. Azure Active Directory B2C supports external identity providers such as Facebook, Twitter, GitHub. In this post, I will show you how to add GitHub Login to your web app using this feature of Azure AD B2C.

Introduction

GitHub has 83+ million users as of June 2022. It is very popular among developers to host code, version control, manage projects and a lot more. Besides, GitHub also acts as an identity provider using the OAuth 2.0 protocol. To add GitHub authentication to your apps with Azure AD B2C, you configure GitHub as an identity provider in your AD B2C tenant. Users can authenticate to your app with their GitHub account without creating a new account only for your application.

For an overview of how adding external identity providers work in Azure AD B2C, refer to this post.

If you follow along this post, you should see the sign in with GitHub option like the one shown below on your AD B2C sign up / sign in user flow page. Clicking on the button redirects the user to GitHub. After authenticating the user, GitHub redirects them to your app along with information about the user, which your app can consume.

This is 6th post in the series covering AD B2C features. You can find earlier posts here.

1. Setting up a tenant in Azure AD B2C
2. Creating and testing user flows in Azure AD B2C
3. Use Azure AD B2C in a React JS SPAB2C
4. Protect Web API with Azure AD B2C
5. Add external identity provider to your apps with AD B2C

Prerequisites

1. Azure AD B2C tenant - If you have not created an AD B2C tenant yet this post details the process.

2. AD B2C user flow for Sign up and sign in - If not done yet, refer to this post to create an application registration and a sign up sign in user flow in your AD B2C tenant.

3. GitHub account

GitHub OAuth App

GitHub apps are the recommended way to build integration with GitHub. To enable sign-in with GitHub, you need to create an OAuth app on GitHub.

Create GitHub OAuth App

1. Sign in to GitHub, click on your profile photo and then select Settings.

2. On the Settings page, scroll down and click on <> Developer settings from the left side navigation menu.

3. On the developer settings page, click on OAuth Apps in the left side navigation menu. This page will list all the OAuth Apps that you create on GitHub.

To create a new OAuth App in GitHub, click on the Register a new application button. If you had created some OAuth App already, this button will say New OAuth App'.

4. Fill in details for your GitHub OAuth App.

Application name

Give some name to your GitHub OAuth app. This is displayed to users when they authenticate with GitHub from your application.

Homepage URL

This is the URL of your application in which you will be integrating Login with GitHub.

Application description

Optionally, you can add some description about your app.

Authorization callback URL

This is the URL that GitHub will redirect users to after they authenticate. This points to your Azure AD B2C tenant which will then further redirect authenticated users to your app. Populate this value with https://{YOUR-TENANT-NAME}.b2clogin.com/{YOUR-TENANT-NAME}.onmicrosoft.com/oauth2/authresp. Replace {YOUR-TENANT-NAME} with your AD B2C tenant name.

Enable Device Flow

Leave this unchecked.

Your completed OAuth App details should look something like this.

5. Finally, click on Register application.

You should see your app created as shown below. You can upload a logo image to represent this app as well.

Get GitHub OAuth App ID and secret

In order to add GitHub social login button back in your AD B2C tenant, you need two things from this OAuth app that you just created.

1. OAuth app client ID
2. OAuth app client secret

In your OAuth app, client ID is visible immediately after you create the app. However, you need to generate the secret for this app manually.

From your OAuth app, click on Generate a new client secret. You may be asked to confirm your GitHub credentials once again. GitHub then generates a secret for your app.

Copy the client ID and secret value as you will need it back in AD B2C.

This completes GitHub configuration to use GitHub as an authentication provider in AD B2C.

Configure GitHub identity provider in AD B2C

Now you have the client ID and client secret from the GitHub OAuth app. Next, configure your Azure AD B2C tenant to connect to the GitHub identity provider.

6. Login to Azure and navigate to your AD B2C tenant.

If you need a refresher about Azure AD B2C, refer to this post.

7. From the left side menu in your AD B2C tenant, click on Identity providers and select GitHub (Preview) from the listed identity providers.

8. Add name of the identity provider as GitHub and then add the Client ID and Client secret values that you had obtained from your GitHub OAuth app registration.

9. Click on Save.

You have now configured the AD B2C tenant to use GitHub as authentication provider.

Use GitHub identity provider in user flow

There is only one step you need to do now in order to provide your users the Login with GitHub experience. In the user flows that you have in your AD B2C tenant, you configure your sign in and sign up user flow to use this identity provider.

For a refresher on user flows in AD B2C, refer to this post.

10. Navigate to User flows in your AD B2C tenant.

11. Click on the Sign up and sign in flow that you would have created earlier, B2C_1_susi form the image above and then navigate to Identity providers in the flow. You should see the Identity provider GitHub (Preview) available for selection as shown below.

Select the identity provider GitHub (Preview) and click on Save.

Your configuration for integrating GitHub sign-in with AD B2C is now complete. It is time to press the beautiful Sign in with GitHub button.

Try Sign in with GitHub

Click on Run user flow and select your client application, reply URL that you would have registered earlier.

For a refresher on user flows in AD B2C, refer to this post.

When you run the user flow you should finally see the sign in, sign up user flow with the option to sign in with GitHub account.

When you choose sign in with GitHub, you are now redirected to GitHub asking your permission to authorize the GitHub OAuth app to access your GitHub information. It also shows what data the app can access on your behalf such as your email address and personal user data. Notice that this screen shows the OAuth app name and logo that you would have configured while registering the GitHub OAuth app. If you are not logged into GitHub already, you will be asked to provider your GitHub credentials first.

After you complete the authorization step, you are then redirected back to your application.

Since we are not running a real code at this point, you will be redirected back to the reply URL or the next step in your user flow to collect any additional user attributes.

Implement Login with GitHub in React app

As you have configured the AD B2C tenant and your user flow to use GitHub social login, all you have to do is use the user flow in your react app. If you had followed up the earlier tutorial on using Azure AD B2C in a React JS SPAB2C, then there is nothing else required to do. If you run the app again, you should see the user experience and option to Login with GitHub.

Summary

If you have reached this far and followed along, congratulations! You have successfully integrated login with GitHub to your application and made your user’s life easier.

You can learn about OAuth in depth here. For more information about Azure AD B2C, refer to Microsoft docs.

I hope you enjoyed this post and learned something new. If you liked this post, please spread the word by sharing this post on social media. If you have any suggestions or questions, I will be happy to help in the comments below. Keep learning!