Teron Bullock

GitHub OAuth: How to Register an App

Image of GitHub figurine in front of a laptop with the main page of the GitHub Open

When building an app, it’s often better not to reinvent the wheel by creating your own authentication logic. In this case, we usually reach for a library to handle it. These libraries connect to providers, and one of these providers is GitHub.

GitHub verifies the user’s identity and sends back an authentication token. In this guide, I’ll show you how to register your GitHub OAuth app.

Step 1: Head to the Right Place

The first thing to do is go to the GitHub page where we’ll register our new app. Go to: https://github.com/settings/applications/new

Image of the App Register page for GitHub.

Step 2: Fill Out the Form

Now we need to fill in the form with our details:

  • Application name: This is what your users will see on the GitHub authorization page. We need to pick something descriptive.
  • Homepage URL: This is the public URL of our app’s website. For local development, use the URL below:
http://localhost:3000/
  • Authorization callback URL: This is an important field. It’s the URL that GitHub will redirect to after a user has successfully authenticated. For local development, use: 
http://localhost:3000/api/auth/callback/github

Lastly, we need to click the Register application button at the bottom of the page.

Step 3: Grab Your Credentials

After the app is registered, we are taken to the settings page. This is where we’ll find the credentials we need to connect our app to GitHub.

There are two key pieces of information we need:

  • Client ID: This is a public identifier for the app.
  • Client Secret: This is the private key for the app. It’s important that we keep this a secret and never share it publicly.

We need to generate a new secret. We do this by clicking the “Generate a new client secret” button.

Step 4: Add the Credentials to the .env File

Our last step is to save the new credentials in our app. The best way to do this is by using a .env file in the app. This is where we keep our secrets, so that they stay out of our code.

Go to the .env file and add these two values. The variable names must be in a specific format and must match what’s below.

AUTH_GITHUB_ID="<Your Client ID Here>"
AUTH_GITHUB_SECRET="<Your Client Secret Here>"

Now our app is successfully registered and configured with GitHub. From here, we can move on to implementing the rest of the OAuth flow in the code.

If you are looking to add Authentication to your Next.js app, check out this article: How to Add User Authentication to Next.js with Auth.js