OAuth 2.0 is the most widely used and accepted industry-standard protocol for authorization. As a protocol, it provides a bunch of tools, patterns, and best practices to help developers with the arduous task of accomplishing authorization flows for all sorts of applications, such as web, mobile, and embedded.

So, What About OAuth2?

There are a lot of misconceptions and over-complications when ,it comes to understanding what OAuth is really about. 
OAuth2 has a couple of predefined flows that you can use on your projects; however, some of them will not apply to your situation. 
Here, we'll demonstrate a scenario in which the interested party who owns the web application in development (in this case, you) makes use of a third-party system to infer authorization within the application. 
Among the third-party systems, you may consider the big players, such as Google, Facebook, or, in our case, GitHub.

 

Authorization upon Facebook's systems. 

Typically, OAuth2’s most commonly used flow is divided into three main steps:

Your application pops up a new window for the third-party authorization app, asking the user (who must have an account and be logged in on the system) to grant permission for your application and then be able to take actions on his/her behalf.

Once properly authenticated and authorized, the third-party app acknowledges the permission and redirects the user back to your app via a pre-configured URL.

Your application exposes an endpoint for such callback operations and hits the third-party provider API to ask for an access token based on the response code returned by the previous redirect process.

First, we make use of the useState hook to create two state objects: a Boolean to detect whether the user is logged in and a user object to hold GitHub's response. Both with the respective setter methods.

Then, we set up a use effect hook to load only once when the whole component page is loaded and check for the user's details based on the access token provided via query param. If the param is present, let's set both the user and logged-in state values so that the logic to render the component will consider them. Otherwise, we simply present the Sign-up component.

The render function takes care of displaying the proper component based on the current authorization state. We won't go into detail about how React components work here, but feel free to change them with as much of the cool stuff from Bootstrap as you want.

Note that we're providing GitHub with the URL for the client_id on the button. Make sure to change it with yours.