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 (
httpvshttps), same host, same port, same path. If there is a mismatch, GitHub rejects the request with an error. A common mistake is registeringhttp://localhost:3000/auth/github/callbackbut sendinghttp://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?