Implement OAuth in WebApp

This will guide how to implement GitHub OAuth in a WebApp. We will be using Nodejs Golang Application as an example.

What is OAuth?

OAuth is an open standard for access delegation, commonly used as a way for Internet users to grant websites or applications access to their information on other websites but without giving them the passwords as per Wikipedia.

In simple terms, you are asking a third party to authenticate your users and then get user details from them if the user authorizes.
For example, When a user comes on your app, you provide an option for login as Login with GitHub or Login with Google.
So, what happens is this will redirect users to GitHub Page and GitHub will authenticate the user for us, and then we will ask GitHub if the user is valid and get the user details from GitHub. You would be able to access user details only when the user authorizes to do so on GitHub Login Page.

In this post, We will see how we can implement GitHub OAuth in a Nodejs and Golang App.

Let’s understand the flow first

• User click on Login with GitHub on our App’s Page.
• This will redirect the user to GitHub.
• Now, the User will log in using GitHub credentials.
• Once logged in successfully, GitHub will ask the user that we are asking for user details from GitHub. Do you want to Authorize? GitHub will show the details which we are asking for.
• If the user authorizes then GitHub will redirect the user back to our app with an Authorization Code.
• Now, Once the user comes back to our app. we use that code and call a GitHub API and it will validate the code and gives us an access token for the user.
• Using the Access token we can get the user details from GitHub and save it.

This is one of the OAuth flows, there are other flows that you can read here.

OAuth APP

In our app we have UI and API, you can get thesource code from here.

Prerequisites

• Npm (UI)
• Golang (API)
• Postgres (Database)

NOTE: The UI code is not so good, you can write better. This will only give you an idea of how OAuth will work with UI.

To Run:

• Create a GitHub OAuth. Find the steps to create here. Use http://localhost:3000 as Homepage URL and Authorization callback URL
• Add the OAuth configuration in the API code. Update it here in the api.go
• Assuming you have installed Postgres in local machine, update the DB credential in the API main.go . You can also run a Postgres docker container.
• Run the API server using go run ./cmd/oaut The server would be running at localhost:8000.
• Now, to run the UI, update the src/config.js for OAuth configuration and run using npm start

How this works?

• Visit http://localhost:3000 you would be able to see the page.
• Click on SHOW USER DETAILS , it asks you to log in first.
• If you click on Sign in with GitHub this redirects you to GitHub and you can log in using GitHub credentials.
• It will ask for permission to share your details if you authorize this will redirect you back to http:localhost:3000 with a Authorization code .
• Once you are back it will call an API /oauth/redirect and pass the authorization code.
• On the API Server, it will call a GitHub API to get the access token.
• Using the access token it will get the user details and save in DB.
• After adding the details in DB, it will create a JWT and return to UI.
• On UI, you can see User Login Successfull... Now, click on SHOW USER DETAILS ,it will use the JWT and call /details API.
• On the API server, it will validate the JWT and return the user details.

You can find the source codehere. Feel free to create a PR to improve the code.

Reach to me on GitHub/LinkedIn to collaborate. ;)