Easy Facebook Auth with Node.js
5 Steps to install Facebook user login with Node.js
So you want to add Facebook 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 Facebook 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 Facebook.
- Go to the Facebook App page: https://developers.facebook.com/apps
- Add a new app and call it what ever you want to.
Now that your app is created, we will need to get it’s ID value which we will use later on in the code.
- Navigate to the app’s basic settings page — it’s in the left sidebar and is shown in the photo bellow.
- Copy your App ID.
Step 2 of 5 🔌
When a user is logged in with Facebook, they will then be redirected back to your app. To do this, we need to give Facebook the url that points to your app. You may need to create this app route if you haven’t already.
You can also test Facebook login on your localhost servers. Facebook automatically approves all localhost addresses while the app is in development mode, so you don’t have to add the url if it’s on localhost.
- Create a route in your app such as:
https://www.example.com/authenticate/facebook/ - Facebook will redirect users to this route after they login.
- Add this route to your Facebook App’s settings under Valid OAuth Redirect URIs.
Step 3 of 5 👉
Now it’s time for the good bit, we are going to start logging in your users with Facebook. All we need to do here is append a few parameters to the Facebook 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 Facebook 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 “email” scope to access the user’s email address.
- You can see all the url parameter options here: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow#login
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/facebook?code=CODE_IS_HEREWe will use to create an access token. An access token is required to authenticate any future requests we send to Facebook 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.
- Send the code to your server to be processed — not applicable when already on the server i.e. when using express.
- Create the access token from your code.
- See url parameter options here: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow#confirm
- Remember to store secret variables in
process.envwhich is easy to do with thedotenvlibrary: https://www.npmjs.com/package/dotenv
Troubleshooting: should Facebook say your redirect URI is incorrect, put a “/” (slash) at the end or the redirect URI.
Step 5 of 5 👩💻
Now that you got the access token, we can use it to get data from the Facebook API. We’ve gone ahead and created an example request which you can use to get some basic user details.
- Create a HTTP request with the access token to get the user’s data.
- See the Facebook API Explorer here: https://developers.facebook.com/tools/explorer
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:
