Integrate GitHub Login in Your App Using Auth0

In this lab, you will:

• Set up a GitHub OAuth app.
• Configure and test a "Login with GitHub" button using an Auth0 social connection.

Why Use GitHub For Social Login?

Given that GitHub is the most popular platform for developers to build and ship code, if you are building an application for other developers, you should consider allowing users to log in using their GitHub account. This can also give you access to verified user metadata to populate their user profiles. GitHub social login is easy to set up with Auth0.

What if your users modify their GitHub profile information? By default, Auth0 automatically syncs GitHub user profile data with each user login, which ensures that changes made in the user's GitHub profile are automatically updated in Auth0. Optionally, you can disable user profile data synchronization to keep the scope of updating user profile information within your application.

Let's get started with using GitHub to log in!

Lab Setup

Create a GitHub Account

Before you begin, sign up for a GitHub account if you don't have one already.

Create an Auth0 Account

If you already have an Auth0 account, you can log in to your tenant and continue to the next step.

Otherwise, sign up for a free Auth0 account.

During the sign-up process, you create something called an Auth0 Tenant, representing the product or service to which you are adding authentication.

Get Your Auth0 Domain

Your Auth0 domain is a unique URL to access your Auth0 tenant. At the same time, other services, such as GitHub, use that unique URL to communicate with your Auth0 tenant to process user logins, create rich logs, and much more.

You can obtain your Auth0 domain by following these instructions:

• Open the Applications section of the Auth0 Dashboard.
• Click on any of the applications that show up.
• Click on the "Settings" tab of the application page.
• Locate the "Domain" field under the "Basic Information" section.
• Store the "Domain" value in the following field to set up your GitHub credentials in the next section:

Create a GitHub OAuth App

To obtain the necessary credentials, you need to register an OAuth App in the GitHub Developer Settings.

Click the "New OAuth App" button in the page's top-right corner.

Fill out the "Register a new OAuth app" form that comes up with the following data:

Application name:

GitHub will show this name to your users when they are redirected to GitHub to log in.

Quick Authentication Demo

In production, you'll use a value that easily associates the GitHub application with your business branding or name.

Homepage URL:

While the GitHub form indicates that this is the full URL of your application homepage, in the context of authentication with Auth0, this value is your full tenant URL because the Auth0 tenant acts as the target application for GitHub.

https://AUTH0-DOMAIN

Application description:

You can use this text to give your users some context about this application.

See GitHub Social Login in Action

Authorization callback URL:

You are starting to see the pattern, right? Auth0 will receive and process data from the GitHub login transaction in the /login/callback endpoint of your Auth0 tenant. Once Auth0 does that, it redirects users to your actual application home page with the results of the login transaction. You don't have to worry about writing a single line of code to process GitHub responses.

https://AUTH0-DOMAIN/login/callback

But wait a minute. Could anyone hit that /login/callback endpoint? Not at all. There needs to be a secure handshake. Once you enter all this information, click the "Register application" button.

The "Quick Authentication Demo" page loads up with all the GitHub credentials that you need for the GitHub authorization server to identify itself with your Auth0 tenant. You'll store such credentials in your tenant so that it knows who to expect; in this case, what to expect since GitHub is a machine acting on behalf of a user to log in with Auth0.

For now, click the "Generate a new client secret" button to create a client secret to authenticate as the application to Auth0.

Keep this GitHub page handy, as you'll need its values in the next section.

Configure the GitHub Social Connection in the Auth0 Dashboard

Follow these steps to integrate the Auth0 social connection in your tenant with your GitHub OAuth app:

• Head to the Auth0 Dashboard.
• Click the "Authentication" tab on the left-hand menu and then click the "Social" option.
• Click the "Create Connection" button.
• Type "GitHub" in the search bar and click the GitHub social connections card that shows up.
• Read the description and disclosures in the "New GitHub Social Connection" page that comes up.
• Click the "Continue" button.

Head back to the GitHub OAuth app page and do the following:

• Copy the "Client ID" value from the GitHub OAuth0 app page and paste it as the value of the "Client ID" field in the Auth0 configuration page.
• Copy the "Client Secret" value from the GitHub OAuth0 app page and paste it as the value of the "Client Secret" field in the Auth0 configuration page.
• Click the "Create" button.

A new page loads up with the "Applications" tab active. Enable this GitHub social connection in any of the Auth0 applications you have created.

Test Your GitHub Social Connection

Ensure you have configured your GitHub social connection correctly using the Auth0 Dashboard.

Use the Auth0 Dashboard to log in

Instructions

• Visit the Auth0 Dashboard home page.
• Locate the "Try your Login box" under the "Next Steps" section.
• Click the "Try it out" link to open the Auth0 /tester app.
• The Auth0 Universal Login page loads up, which is a hosted page that Auth0 provides so that you don't have to write a single line of code to build the ultimate login and signup form.
• Click the "Continue with GitHub" button.

Expected results

You'll see a GitHub Login page loads up with the name of the GitHub app, its author, and the data it can access on your behalf. If this Auth0 social connection also requested additional permissions, you'll see them listed here.

If you'd like to see the full login flow in action, click the "Authorize iam-login" button.

You'll see a message that says you are being redirected, and then you'll see a page titled "It works!" if everything goes well. On this page, you'll see user metadata about you that this Auth0 demo app got from GitHub. For example:

{
  "sub": "github|1234567890",
  "nickname": "githubusername",
  "name": "FirstName LastName",
  "picture": "https://example.com",
  "updated_at": "2025-02-12T20:00:00.060Z"
}

Next Steps

As a final piece of advice, for purposes of data sanitation, management, and regional privacy policies, it is a good idea to separate data in environments. A best practice when working with Auth0 is to have different tenants for your project environments.

For example, it's recommended for developers to specify a production tenant. A production tenant gets higher rate limits than non-production tenants. Check out the "Set Up Multiple Environments" Auth0 document to learn more about how to set up development, staging, and production environments in the Auth0 Identity Platform.

You can create a GitHub OAuth app that pairs with each Auth0 tenant. Then, you can configure the GitHub social connection for each tenant using the credentials from its corresponding GitHub OAuth app.

Under the Hood: Auth0 Universal Login

As you have seen, Auth0 allows you to provide a delightful yet robust authentication experience to your users. With Auth0, you can scale up your application security by enabling social identity providers with just a few clicks. With Auth0, developers don't have to invest any time into building complicated sign-up and login forms that need to support different social connections, such as Google, Facebook, and GitHub.

Auth0 Universal Login lets developers delegate the responsibility of building complex login forms that support social identity providers to Auth0. When you use Auth0 to protect your client applications, you delegate the authentication process to a centralized login page: the Auth0 Universal Login page.

With Universal Login, when your users need to log in, your client redirects them to a central domain, through which Auth0 performs the authentication process. Once your users log in successfully, Auth0 takes them back to your application. With Auth0, you can use your tenant URL or a custom domain as your central domain for authentication. Auth0 Universal Login supports both login and sign-up transactions.

Google services are a solid example of centralized authentication. Whenever you need to access any Google service (such as Gmail, Google Calendar, YouTube, etc.), if you have not logged in yet, Google will redirect you to https://accounts.google.com to log in. Once you successfully log in, Google redirects you to the application that initialized the login process.

With every successful login transaction, Auth0 returns to your client application an ID token and an access token. Your client application can use the ID token to personalize the user interface. It can use the access token to make authenticated requests to access protected resources from an API that you also protect using Auth0.