Working with GitHub OAuth Authentication

Hello everyone,

In this blog post, I’ll discuss my second pull request (PR) as part of the Release 0.3 series for my assignment. This PR continues my work on the GitExplorer project, which I initially contributed to during the Hacktoberfest event. For this week issue, the project maintainer requested the implementation of GitHub authentication functionality.

Overview of GitExplorer

GitExplorer is a project aimed at simplifying interactions with GitHub repositories. If you’re interested in learning more about the project or my previous contributions to it, feel free to check out my previous blog post for this repository.

The specific issue I tackled this time was the lack of GitHub authentication in the application. This limitation prevented the app from providing personalized features like starring repositories. My task was to implement a GitHub authentication feature that enables users to log in and log out using their GitHub accounts. Additionally, users would be able to star their favorite repositories and fetch a list of all their starred repositories with a simple button click.

Challenges: Working Without a UI Framework

GitExplorer does not use any modern UI frameworks like React. Instead, it relies solely on vanilla JavaScript, CSS, and HTML. While this simplicity has its advantages, it required me to dedicate more time to the issue as the original codebase was front-end focused. Adding GitHub authentication and related backend functionality meant venturing beyond the existing structure and implementing a server-side solution.

Migrating the Project and Setting Up the Backend

To support the new features, I first restructured the project. I moved all existing front-end code into a public folder and created a backend folder to house the server-side implementation. For the backend, I chose the Express framework as it integrates well with Passport.js, a library I used to handle GitHub authentication.

The steps included:

• Setting up Express to serve the application.
• Configuring Passport.js to handle authentication using CLIENT_ID and CLIENT_SECRET, which I stored in an .env file for security.
• Adding routes to manage user actions like starring and unstarring repositories.

GitHub API Integration

After setting up the backend, I integrated GitHub’s API to support the required functionality. This included:

• Enabling users to log in via their GitHub accounts.
• Adding the ability to star and unstar repositories directly from the application.
• Fetching a list of the user’s starred repositories and displaying them on a dedicated page, accessible through a button on the UI.

Writing Modular, DRY Code

Beyond implementing functionality, I focused on improving code quality by applying the DRY (Don’t Repeat Yourself) principle. I modularized the code by separating functions into reusable components, making it easier to maintain and extend in the future.

Lessons Learned and Looking Ahead

This was my first experience working with GitHub authentication, and it provided valuable insights into integrating third-party APIs and managing backend services. While the project initially appeared simple, working on both the front-end and back-end gave me a deeper understanding of full-stack development.

GitExplorer still has many interesting issues open for collaboration. If time permits, I plan to contribute further. The project has proven to be beginner-friendly while offering ample opportunities to learn new technologies and concepts.

Thank you for reading, and I hope this post inspires you to explore similar opportunities for learning and growth.