Stop 12 · AuthenticationTopics · 4/10

GitHub Login

In short

Building a tool for developers? They almost all have GitHub. GitHub Login also gives you their username and avatar, perfect for portfolios, coding clubs and hackathon sites.

Implementing 'Sign in with GitHub' via GitHub's OAuth provider — especially common for developer-focused tools and portfolios.

The jaadu shows a college ID on a lanyard to a guard at a colourful tech fest gate.

Think of it like this

Your college ID at a tech fest

At another college's fest, the gate guard doesn't know you, but trusts your college ID card. For dev tools, GitHub is that ID card. Your app says 'show me your GitHub' and trusts what GitHub confirms.

Watch it happen

GitHub login without a library

Browser

Your server

GitHub

GET /login/oauth/…

1/7Your link sends the user to GitHub with client_id, scope=read:user and a random state.

The big ideas

What you need to know

Create an OAuth App

In GitHub Settings, Developer settings, OAuth Apps. Set the homepage and the callback URL.

Email may be private

Many users hide their email. Ask for the user:email scope and read the /user/emails endpoint if you need it.

The swap happens on the server

Exchanging the code for a token needs the client secret, so it must run in an API route, never in the browser.

See it in code

Walk through the code

1// app/api/auth/github/callback/route.ts (server only)2export async function GET(req: Request) {3  const code = new URL(req.url).searchParams.get("code"); // check state too!4  const res = await fetch("https://github.com/login/oauth/access_token", {5    method: "POST",6    headers: { Accept: "application/json", "Content-Type": "application/json" },7    body: JSON.stringify({ code,8      client_id: process.env.GITHUB_CLIENT_ID,9      client_secret: process.env.GITHUB_CLIENT_SECRET }),10  });11  const { access_token } = await res.json();12  const user = await fetch("https://api.github.com/user", {13    headers: { Authorization: `Bearer ${access_token}` },14  }).then((r) => r.json());15  // create your session cookie for user.id, then redirect16}

1/4Read the one-time code from the callback URL. Check the state value here too.

In a real app, Auth.js's GitHub provider does all of this. Writing it once shows you there's no magic, just two fetch calls.

Save yourself the pain

Common mistakes

Oops

Using the GitHub username as the user's database ID.

Do this instead

Usernames can be renamed. Store GitHub's numeric user id instead.

Oops

Sending the GitHub access token to the browser to call the API from there.

Do this instead

Keep it on the server. Give the browser your own session cookie and proxy any GitHub calls you need.

Your mission

Log in with GitHub, raw

~45 min

Quick check

Why must the code-for-token swap with GitHub happen in an API route and not in a React component?

Go deeper

1Register an OAuth app in GitHub's developer settings for a test project.
2Wire it up through NextAuth or a similar auth library.
3Compare the scopes you request — only ask for what your app actually needs.