Athreya aka Maneshwar

Posted on Jan 1, 2025 • Edited on Mar 7

How To Integrate GitHub Sign-In: A Four Step Guide

#webdev #programming #javascript #beginners

Hello, I'm Maneshwar. I'm building git-lrc, an AI code reviewer that runs on every commit. It is free, unlimited, and source-available on Github. Star Us to help devs discover the project. Do give it a try and share your feedback for improving the product.

Hello, I'm Maneshwar. I'm working on FreeDevTools online currently building **one place for all dev tools, cheat codes, and TLDRs* — a free, open-source hub where developers can quickly find and use tools without any hassle of searching all over the internet.

Problem

Remember the days whenusers needed unique usernames and passwords for every app? It’s time to move on.

Let’s make logging into your app simpler by integrating GitHub Sign-In, a great choice for developers and tech-savvy users.

Solution

GitHub OAuth allows you to seamlessly authenticate users and access their public profile or additional data via GitHub’s API.

Let’s break thi
s down into manageable steps for your frontend and backend.

Step 1: Registering Your App on GitHub

Go to GitHub Settings: Navigate to GitHub Developer Settings.
OAuth Apps: Click on OAuth Apps in the sidebar.

Register a New OAuth App:
- Homepage URL: Use http://localhost:3000 (or your app’s local URL).
- Authorization Callback URL: Use http://localhost:3000 (or the deployment URL where you plan to integrate GitHub Sign-In). You can update these later.

Copy the Client ID: Once created, GitHub will provide a Client ID.
Create a Client Secret: Generate a Client Secret that will be required for backend operations, such as exchanging tokens for user data.

Step 2: Frontend Implementation

Add a GitHub Sign-In Button

Use the following HTML and CSS to display a GitHub login button:

<div class="github-signin-container">
  <button class="github-signin-btn" onClick={handleGithubLogin}>
    <img
      src="https://cdn.pixabay.com/photo/2022/01/30/13/33/github-6980894_1280.png"
      alt="GitHub Icon"
      class="github-icon"
    />
    Sign in with GitHub
  </button>
</div>

.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Handle the Login Button Click

Use JavaScript to redirect the user to GitHub’s authorization page:

const handleGithubLogin = () => {
  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=read:user`;
  window.location.href = githubAuthUrl;
};

Replace GITHUB_CLIENT_ID and REDIRECT_URI with your values.

Step 3: Handling GitHub’s Redirect

GitHub will redirect back to your app with a ?code=<AUTH_CODE> in the URL. Use this code to exchange for an access token.

useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");

  if (!code) return;

  const target = `https://backend.com/external-signup?app=${appName}&accessToken=${code}&provider=github`;
  callBackendAPI("GET", target);
}, []);

This sends the code to your backend to securely exchange it for an access token.

Step 4: Backend Implementation

Exchange Authorization Code for Access Token

Use GitHub’s OAuth token endpoint:

const GITHUB_ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token';

const url = `${GITHUB_ACCESS_TOKEN_URL}?client_id=${GITHUB_CLIENT_ID}&client_secret=${GITHUB_SECRET_ID}&code=${request.body.code}`;

const response = await fetch(url, {
  method: "GET",
  headers: {
    Accept: "application/json",
    "Accept-Encoding": "application/json",
  },
});

const githubUserData = await response.json();
const accessToken = githubUserData.access_token;

Replace GITHUB_CLIENT_ID and GITHUB_SECRET_ID with the values from Step 1.

Fetch User Data

With the access token, call GitHub’s User API to retrieve user information:

const GITHUB_USER_API_URL = "https://api.github.com/user";

const userProfileResponse = await fetch(GITHUB_USER_API_URL, {
  method: "GET",
  headers: {
    Accept: "application/vnd.github+json",
    Authorization: `Bearer ${accessToken}`,
    "X-GitHub-Api-Version": "2022-11-28",
  },
});

const userProfileData = await userProfileResponse.json();

const email = userProfileData.email;
const name = userProfileData.name;
const picture = userProfileData.avatar_url;

Use this data to create or update a user in your database.

TL;DR

Register your app on GitHub to get a Client ID and Client Secret.
Add a GitHub Sign-In button to your frontend.
Redirect users to GitHub’s OAuth page to log in.
Handle the redirect with an authorization code.
Exchange the code for an access token on your backend.
Use thetoken to fetch user data from GitHub’s API.

A collection of UI/UX-focused tools crafted to simplify workflows, save time, and reduce friction in searching tools/materials.

Any feedback or contributors are welcome!

It’s online, open-source, and ready for anyone to use.

Let’s make it even better together.

*AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.

git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.*

Any feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.

⭐ Star it on GitHub:

HexmosTech / git-lrc

Free, Unlimited AI Code Reviews That Run on Commit

git-lrc

Free, Unlimited AI Code Reviews That Run on Commit

AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.

git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.

See It In Action

See git-lrc catch serious security issues such as leaked credentials, expensive cloud operations, and sensitive material in log statements

git-lrc-intro-60s.mp4

Why

🤖 AI agents silently break things. Code removed. Logic changed. Edge cases gone. You won't notice until production.
🔍 Catch it before it ships. AI-powered inline comments show you exactly what changed and what looks wrong.
🔁 Build a habit, ship better code. Regular review → fewer bugs → more robust code → better results in your team.
🔗 Why git? Git is universal. Every editor, every IDE, every AI…

View on GitHub

DEV Community