Authentication using GitHub OAuth 2.0 with NodeJS

This blog is about the basic implementation of Authentication using GitHub auth.

I was involved in a full-stack project with JavaScript frameworks where I was asked to provide authentication using OAuth 2.0.

There were a lot of resources available to do them using Google API,Facebook API,Twitter API and so on… But hardly I was able to find authentication using GitHub( may be I didn’t look into it properly ).

So I though of implementing this requirement with GitHun Auth. I the actual implementation I used React for front-end and ExpressJs,NodeJs for Back-end.

But here for the simplicity and to make it easier for the blog reader to understand I’ll mainly focus on the Back-end where as for the view I’ll make use of simple html.

Part 1: Setting Up GitHub Portal App

In order to work with Github Auth we need to regiter new application at https://github.com/settings/applications/new

Fig 👆1

As mentioned in the diagram, you need to fill with appropriate Application name,Homepage URL and callback URL.(App description is optional)

Once you have filled out the details, if you go to your GitHub https://github.com/settings/developers pageyou could see something like in Figure 2.

Fig 👆2

When you get into this you could get the Client ID and secret which are needed for the development

Fig 👆3

Part 2: Coding

Ahead of start coding I just want to explain the process flow, then it’ll be more easy for you to understand.

Process flow Steps

From the browser (think just of an html),client makes a request to the https://github.com/login/oauth/authorize with the appropriate clientID we obtain by registering (refer Fig:3)

Above operation Authorize the Client using the Github login and redirect to the callback URL we defined when registering App(refer Fig:1) with request token

Now with the use of Request token,ClientID and Client secret we request Github API for the Access token

If all the values we’ve provided is valid, API will respond with the Access token for client to make authorised request.

Now it’s time to get our hands dirty…..
Lets code…

Let’s Do This !!!

//Setup a node project
> mkdir authentication
> cd authentication
> npm init -y

Above set of command will create a new folder and initialize a node project.Now we need to install set of dependencies we require

//Setup a node project
> npm install express
> npm install axios

Now basically we need to create and setup index.js

Now we have successfully created our back-end and we can run it by

> node index.js

Now we need to create our views for client interaction,from the index.js you may have figured out that we need two html files index.html and home.html

Above html file just has a link for GitHub OAuth, in the URL you need to replace YOUR_CLIENT_ID with you generate id.

Now the final resulting view, home.html

We are done. For the verification check out your project structure to be as follows (Fig 4)

Fig 👆4

Before windup, I just want to share the screenshots of the full-stack development I ended up with this GitHub Auth.

This is just to make you confident of things and make you also implement such a complete App.All you need is just basic understanding the technologies you use

Fig 👆5 :Click the Authenticate button

Fig 👆6 : Sign In with appropriate credentials

Fig 👆7 :Finally you will be directed to Home page

Hope you have also successfully accomplished the task.So until see you all in my next blog.Good bye!!!