Yes, I found a lot of posts regarding facebook login with passport.js. So you are curious why I have sat to write this post. Though I have found a lot, I didn’t find anything where the frontend and backend is on different server like React as Frontend and Node.js as Backend. That costs me a lot of time. Maybe this post will save some times of you.

So, here in my post I am using -

  • React as Frontend (you can use anything)

  • Node.js as Backend (express)

  • Passport.js as Facebook Login strategy

The full source code is available here.

Configure the Backend part first.
I have used yarn init -y to initialise package.json

Then, install express, passport & passport-facebook by running this command

yarn add express express-session passport passport-facebook

Install other utilities

yarn add cookie-parser body-parser

Here is the full code of the backend server

Now lets go through the code one by one

const express = require('express');

const app = express();

const port = 8080;

const passport = require('passport');

const Strategy = require('passport-facebook').Strategy;

const config = require('./config');

On this part I have imported all the libraries and the config file. This is the config file where I have set all the environment variables

module.exports = {

  FRONTEND_HOST: '', 

  FACEBOOK_CLIENT_ID: '',

  FACEBOOK_CLIENT_SECRET: '',

}

FROTEND_HOST is the domain name of your frontend
FACEBOOK_CLIENT_ID is the client ID of your facebook app
FACEBOOK_CLIENT_SECRET is the client secret of your facebook app

Here I have configured the facebook strategy,
callbackURL is the url which will be called after authentication.
profileFields are the informations we want to be returned from facebook
passReqToCallback says the req param to be present on the callback function

On the callback function, we will get

  • req param from the get call

  • accessToken is used to call facebook api next time, it can be used once

  • refreshToken is used to get the new accessToken

  • profile is the param where we will get the information of the user

  • cb is a callback function, MUST be called at the end of this function

    passport.serializeUser(function(user, cb) {

    cb(null, user);
    

    });

    passport.deserializeUser(function(obj, cb) {

    cb(null, obj);
    

    });

This two functions are used to serialize and deserialize the informations passed from the facebook callback function.

app.use(passport.initialize());
app.use(passport.session());

passport.initialize() is used to initialise the passport authentication
passport.session() is used to initialise the passport session

First /facebook endpoint is called from the frontend
Second /facebook/callback endpoint is called from the facebook after authentication.

You have completed the Backend part. Easy, right? 🤔

Let’s configure the Frontend part now.
I have used create-react-app to initialise a simple react app.

yarn create react-app frontend

I have kept the Frontend part real simple. Just added the anchor tag to call http://localhost:8080 and thats it. Everything will work on backend and return to the url res.send(${config.FRONTEND_HOST}/success);, you have declared here.

That’s it. Frontend part is complete

Now, Let’s configure the facebook app and get ClientId & ClientSecret.

  1. Add a new app from here

  2. Go to Settings → Basic

  3. You will get the Client ID and Client Secret here

  1. On the left side of the bar, click on the + sign beside products

  2. Select Facebook LogIn setup

  3. You don’t have to do anything here, passport.js has done everything for you

  1. Go to the settings on Facebook Login

  1. Setup the app like the above image, **MUST **add the redirect URI as described on the backend.

  1. Go to the app settings and add localhost as app domain

That’s it.

Now it should work as expected. Comment here if you face any problem.

About the Author

I am currently a Full Stack Software Engineer at Sapien.Network. I also do researches on Deep Learning, Natural Language Processing, Bioinformatics. Besides these, I am a Founder and CTO of Helix Development Inc.

Follow me on Medium and check out my personal website here. You can also connect with me on LinkedIn, Twitter or Facebook.

Feel free to post any Comments or Suggestions.

"I'M STILL LEARNING." – MICHELANGELO