Muthu Annamalai Venkatachalam
Muthu Annamalai Venkatachalam's Blog

Muthu Annamalai Venkatachalam's Blog

How to Add a GitHub Social Connection in Auth0

How to Add a GitHub Social Connection in Auth0

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

In Auth0 applications, the user database is included by default, but what happens when you want to connect social media? Your applications will be easier to use if your users are able to connect with social networks. Throughout this article, we'll be seeing how to add the Github social connection.

How to Get Started

For this tutorial, you will need an Auth0 account, which you can create for free. Here is the link to sign up.

Auth0 requires you to create a tenant if you are using it for the first time. The Auth0 dashboard React code will serve as an example for this demo. There will be no need for React experience since there will be no code changes.

Go to the "Applications" tab and select "Single Page Web Applications".

Applications (1).png

Following that, you'll see the Quick Start Window. Choose "React" and then click "Download Sample". A second window may appear with additional information but click on "Download".

Application Deta.png

Executing the Sample Code

Our next step is to run the code example. Open the project in your preferred text editor. In our sample code configuration, we have to modify it since we neglected to follow the instructions in Part 2 of the QuickStart documentation.

In the root folder of the project, remove the audience property from the authorization configuration file. After deleting it Install npm along with its dependencies

npm install

You can now start the app by running the following command.

npm run spa

run-the-demo-app.jfif

Click the "Login" button to begin that process when the app is running. When you log in for the first time, you will need to create an account. Logging in with an existing account is possible if you're already logged in to this app or another in the same tenant. In the top right, you will see your profile image showing that you have successfully logged in.

Screenshot (1741).png

Setup Github connection

Once we have our sample app that supports logins, we can connect to Github.

  • Authentication -> Social
  • Connections -> Social

Create a social connection with Github by clicking "Create Social Connection". Auth0 will inform you of the required permissions, so you can read them and then click "Continue".

Social Connectio.png

You'll see there are two main credentials that we will need to get from Github.

  1. Client ID

  2. Client Secret

From here, we should go to the Github Developer Account Set up a project to get those credentials. Click on "Register A New Application"

Developer applic.png

Give your project a name, and you'll be prompted to answer to provide the Homepage URL and Authorization callback URL. I suggest adding

i) Homepage URL as https://YOUR_DOMAIN

ii) Authorization callback URL as https://YOUR_DOMAIN/login/callback

After you've finished those details, click "Register a New Application"

New OAuth Applic.png

When that finishes, you'll be shown the two credentials needed by Auth0. Copy over the Client ID and Client secret properties to Auth0.

After Doing it click Create and make sure you have enabled the GitHub connection by toggling the button on for your app

Social Connectio (1).png

Finally, after doing all the steps mentioned above when you try to log in to your application Github shows up as an authentication option

Github Authentication.png

I hope that this tutorial helped you to see how easy it is in Auth0 to add additional types of login methods for your customers.

You can now extend your support by buying me a Coffee.😊👇

Buy Me A Coffee

If you want to contact me you can do it here:

Thanks for Reading 😊

Did you find this article valuable?

Support Muthu Annamalai Venkatachalam by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this
Proudly part of