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

   
   
   
   
   
   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.
      
      
      
      
   
   
   
   
   
   
   
   
   
   

   
   
   
   Step 2: Frontend Implementation
   

   
   
   

   
   
   
   Add a GitHub Sign-In Button
   

   
   
   

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

   
   
   
   
   

   CODE Kopieren

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

   
   
   
   
   
   
   
   
   
   
   
   

   CODE Kopieren

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

   
   
   
   
   

   CODE Kopieren

   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.
   
   

   
   
   
   
   

   CODE Kopieren

   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:
   
   

   
   
   
   
   

   CODE Kopieren

   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:
   
   

   
   
   
   
   

   CODE Kopieren

   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;
   
   

   
   
   
   
   
   
   
   

   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!

   Vollständiger Original-Artikel

   Den kompletten Beitrag mit allen Details direkt auf dev.to lesen.

   ↗ Original-Artikel auf dev.to lesen