Creating an OAuth2 App in GitHub: A Comprehensive Guide
Written on
Chapter 1: Introduction
In this guide, we will walk through the process of setting up an OAuth2 application within GitHub and illustrate its implementation in a practical context. We will integrate our OAuth2 app into a sample project, showcasing its functionality.
Let’s dive in!
In a related article, we detail the steps for creating an OAuth2 app using Google as the identity provider:
How to Create an OAuth2 App in Google
A Step-by-Step Guide to Creating an App in Google for Seamless Authentication
Chapter 1.1: Reference Project
For this demonstration, we will utilize the GitHub repository named ivangfr/springboot-react-social-login. To follow along, clone the repository and adhere to the README instructions to set up and run the movie-app application.
Interested in how we integrated Social Login in the ivangfr/springboot-react-social-login repository? Check out the following article:
Implementing Social Login in a Spring Boot and React App
A Step-by-Step Guide on Implementing Social Login in a Spring Boot and React App
Chapter 1.2: Overview of the Movie App
The movie-app consists of two components: the backend, which is the movie-api running on port 8080, and the frontend, the movie-ui operating on port 3000.
Once set up, you can log in using two predefined accounts: admin and user. The admin account (password: admin) allows various actions such as viewing, commenting, adding, updating, and deleting movies. In contrast, the user account (password: user) only permits viewing and commenting. Users can also create new accounts via the Sign Up link on the registration page.
Chapter 1.3: Creating an OAuth2 App in GitHub
To set up an OAuth2 application in GitHub, log in to your GitHub account and click on your profile picture in the top-right corner of any page, then select Settings from the dropdown menu.
On the subsequent page, navigate to Developer settings. Click on OAuth Apps, and then add a new application by selecting the Register a new application button, or if you have existing apps, choose the New OAuth App option on the right side of the screen.
Fill in the Register a new OAuth application form:
- Application name: movie-app
- Homepage URL: http://localhost:8080
- Authorization callback URL: http://localhost:8080/login/oauth2/code/github
Finally, click on the Register application button.
After registration, you’ll see the Client ID for the movie-app displayed. To acquire the Client Secret, simply click the Generate a new client secret button.
With this, we have successfully established an OAuth2 app in GitHub. To facilitate communication between the movie-app OAuth2 app and the movie-api backend, we will use the Client ID and Client Secret generated by GitHub. These credentials need to be configured in the movie-api application properties. For detailed instructions, consult the README.
Chapter 2: Demonstration
To demonstrate the setup, open a browser and navigate to http://localhost:3000. Once the page is open, click on the Login button located in the upper-right corner.
You will see an option to log in using GitHub. Select it.
After selecting GitHub as your identity provider, you will be redirected to a page asking for your GitHub username or email and password.
Once you enter your credentials, you will be taken to a page requesting authorization for the movie-app.
After you authorize the movie-app, you will be redirected back to the application, confirming successful integration with GitHub.
Chapter 2.1: Social Login Flow Analysis
For a detailed analysis of the requests and redirects occurring among the movie-ui, movie-api, and GitHub during the Social Login flow, refer to the article linked below:
Implementing Social Login in a Spring Boot and React App
Implementing Social Login in a Spring Boot and React App for Seamless Access and Enhanced User Experience
Chapter 3: Conclusion
In this guide, we successfully created an OAuth2 app within GitHub and demonstrated its functionality by integrating it into the Movie App. We showcased how users can authenticate and gain access to the Movie App using their GitHub credentials.
Support and Engagement
If you found this guide helpful and would like to support my work, please consider the following actions:
- Engage by clapping, highlighting, and commenting on my story. I’m here to answer any questions you might have.
- Share my story on social media.
- Connect with me on: Medium | LinkedIn | Twitter | GitHub.
- Subscribe to my newsletter to stay updated on my latest posts.
Chapter 3.1: Video Resources
For further insights, check out these helpful YouTube videos:
Setup GitHub OAuth Sign In in 5 Minutes
A quick guide to setting up GitHub OAuth sign-in for your applications.
How to Create GitHub OAuth App (Client ID and Client Secret)
Learn how to create a GitHub OAuth app, including generating your client ID and secret.