Easy GitHub Auth with Node.js
5 Steps to install GitHub user login with Node.js
So you want to add GitHub login to your app or website, hey? Maybe you’ve had problems with Passport.js and want a more straight forward solution. Or maybe you’re just here for fun…
Well this is the article for you!
This article contains a step-by-step tutorial on how to code a GitHub login on your app using OAuth 2. I’ve broken the process as best I could to help you understand exactly what’s going on.
Before We Start ☝️
In this article, we are assuming you:
- Already know how to write code — preferably JavaScript.
Yep, that’s it. If you don’t know how to code or want a quicker way to add OAuth logins to your app or website, check out Authpack.
Step 1 of 5 🔒
To start, you’ll need to register your app on GitHub
- Go to the OAuth Apps section of the GitHub developer settings: https://github.com/settings/developers
- Click the New OAuth App button and create an app.
- Copy the Client ID and Client Secret as we will use them later.
Step 2 of 5 🔌
When a user is logged in with GitHub, they will then be redirected back to your app. To do this, we need to give GitHub the url that points to your app. You may need to create this app route if you haven’t already.
You can also test GitHub login on localhost, just provide the localhost address instead of the domain address.
- Create a route in your app such as
https://www.example.com/authenticate/github - GitHub will redirect users to this route after they login.
- Add the route to your GitHub App’s settings under Authorization callback URL.
Step 3 of 5 👉
Now it’s time for the good bit, we are going to start logging in your users with GitHub. All we need to do here is append a few parameters to the GitHub login url. When our users click a button or link, we will send them to this url. To make things easier, we are going to use the simple query-string library to append parameters to this url.
- Install the popular
query-stringlibrary on your app: https://www.npmjs.com/package/query-string - Create the GitHub login url.
- Make sure your scopes match up to the data that you wish to access later on in your code. For example, you will need to add the “user:email” scope to access the user’s email address.
- See url parameter options here: https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#1-request-a-users-github-identity
- See scope options here: https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/
Now that you’ve created the login url, add it to your app or website. Here is a simple React example.
Step 4 of 5 🔐
As mentioned before, once your users login, they will be redirected back to your app. The url they are redirect to will contain a special code. For example:
https://www.example.com/authenticate/github?code=CODE_IS_HEREWe will use to create an access token. An access token is required to authenticate any future requests we send to GitHub such as getting the user’s name or email address. To get the code and create the access token, we will use the same query-string library that we used before. Let’s go!
- Get the code from the url.
- The code returned by GitHub will expire after 10 minutes.
- Send the code to your server to be processed — not applicable when already on the server i.e. when using express.
- Create an access token from your code.
- See url parameter options here: https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#2-users-are-redirected-back-to-your-site-by-github
- Remember to store secret variables in
process.envwhich is easy to do with thedotenvlibrary: https://www.npmjs.com/package/dotenv
Step 5 of 5 👩💻
Now that you got the access token, we can use it to get data from the GitHub API. We’ve gone ahead and created an example request which you can use to get some basic user details.
- You can now use the access token to get data from the GitHub API.
- See the GitHub API options here: https://developer.github.com/v3/
Yahooo! 🎉
If you enjoyed this article, please give it a few claps — you can leave up to 50 — or you can comment if you have any questions, I’ll do my best to answer them!
Liked this tutorial? ❤️ Here are some more:
