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

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 this down into manageable steps for your frontend and backend.

---

Step 1: Registering Your App on GitHub

1. Go to GitHub Settings: Navigate to GitHub Developer Settings.

2. OAuth Apps: Click on OAuth Apps in the sidebar.

1. 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.

1. Copy the Client ID: Once created, GitHub will provide a Client ID.

2. 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

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

---

Bonus: LiveAPI Makes Your Life Easier

I’m working on a tool called LiveAPI that generates secure, beautiful API documentation directly from your codebase. Bonus: It lets you execute APIs and generate request snippets in any language!

Try it out and save time on documentation while focusing on your app. Happy coding!