hectoday
DocsCoursesChangelog GitHub
DocsCoursesChangelog GitHub

Access Required

Enter your access code to view courses.

Invalid code

← All courses OAuth and Social Login

Why OAuth?

  • The Problem with Passwords
  • OAuth 2.0 in Plain English
  • The Authorization Code Flow, Step by Step
  • Project Setup

GitHub Login

  • Register a GitHub OAuth App
  • The Authorization Redirect
  • The State Parameter
  • The Callback Handler
  • Fetching the User Profile
  • Creating or Linking Accounts
  • The Complete Flow

Google Login

  • Register a Google OAuth App
  • Building Google Login

Production Concerns

  • Multiple Providers, One User
  • Combining OAuth with Password Auth
  • Error Handling
  • Logout and Token Cleanup
  • Common Mistakes
  • Capstone: Multi-Provider Login Page

Register a GitHub OAuth App

What you need

Before your app can use “Log in with GitHub,” you must register it with GitHub. This tells GitHub your app exists and gives you the credentials (client ID and client secret) needed for the OAuth flow.

You need a GitHub account. If you do not have one, create one at github.com.

Create the OAuth App

Go to github.com/settings/developers and click “New OAuth App” (or go directly to github.com/settings/applications/new).

Fill in the form:

Application name: Whatever you want. This is shown to users on the consent screen. Something like “OAuth Course Dev” is fine.

Homepage URL: http://localhost:3000. This is your app’s URL. For development, localhost is fine.

Authorization callback URL: http://localhost:3000/auth/github/callback. This is the exact URL where GitHub will redirect users after they approve your app. It must match what your server sends in the redirect_uri parameter.

[!WARNING] The callback URL must match exactly: same scheme (http vs https), same host, same port, same path. If there is a mismatch, GitHub rejects the request with an error. A common mistake is registering http://localhost:3000/auth/github/callback but sending http://localhost:3000/auth/github/callback/ (with a trailing slash).

Click “Register application.”

Get your credentials

After registering, you will see:

  • Client ID: A string like Iv1.abc123def456. This is public.
  • Client secret: Click “Generate a new client secret.” A string like abcdef1234567890abcdef1234567890abcdef12. This is private.

Copy both values immediately. The client secret is only shown once. If you lose it, you will need to generate a new one.

Add them to your .env

Open .env and fill in the values:

GITHUB_CLIENT_ID=Iv1.abc123def456
GITHUB_CLIENT_SECRET=abcdef1234567890abcdef1234567890abcdef12
BASE_URL=http://localhost:3000

Now start (or restart) your server:

npm run dev

The server should start without errors. If you see “Missing required environment variable,” double-check your .env file.

What these credentials do

The client ID is sent to GitHub in the authorization URL (Step 1 of the flow). It tells GitHub which app the user is authorizing. It is safe to expose in browser-visible URLs.

The client secret is sent to GitHub in the token exchange (Step 4 of the flow). It proves your server is the legitimate owner of the app. It must never appear in browser-visible code, URLs, or client-side JavaScript.

Together, they are like a username and password for your app’s identity with GitHub.

Exercises

Exercise 1: Go to your GitHub OAuth App settings page and look at the fields. Note that you can change the callback URL later. In production, you would change it to your real domain (e.g. https://myapp.com/auth/github/callback).

Exercise 2: Try starting the server without the GITHUB_CLIENT_SECRET in your .env (comment it out or delete the value). Observe the error message from the required() function. This is why we validate environment variables at startup: you find out immediately, not when a user tries to log in.

What happens if the callback URL registered on GitHub does not match the redirect_uri your server sends?

← Project Setup The Authorization Redirect →

© 2026 hectoday. All rights reserved.