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

#programming #webdev #javascript #beginners

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 when users 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;