Implementing Facebook Authentication With Node.js

Submitted by admin on Wednesday, December 14, 2016 - 11:09.

In this small project we'll see how to implement Facebook authentication for your Node app with a help of Passport.js. Facebook authentication might sound like a lot of work but with the help of Passport, it is a surprisingly easy task. To give you a good feeling about the volume of code that you're about to write: It is about 80 lines of JavaScript and couple more lines of HTML. Before we start let's see how our application will look like. This is a truely minimalistic app with two pages: a login page and a "secret" page that only authenticated users are allowed to see. We'll let users authenticate with Facebook and then see the page. Reloading the page will keep the "logged in" status as user data is preserved in a "mini-database" (an in-memory object). Let's start from setting up the dependencies. In this project we will need 'express', 'express-session', 'cookie', 'cookie-parser', 'ejs', 'passport' and 'passport-facebook'. Having them installed, let's configure our basic express application.

const express  = require('express');
const passport = require('passport');
const cookieParser = require('cookie-parser');
const session = require('express-session');
 
const app = express();
 
app.use(cookieParser());
app.set('view engine', 'ejs');
app.use(session({
  secret: 'keyboardcat',
  resave: true,
  saveUninitialized : true
}));
 
/******* Routes *********/
 
app.get('/', (req, res) => res.render('index.ejs'));
app.get('/secret', secured, (req, res) => res.render('secret.ejs'));
 
function secured(req, res, next) {
  console.log('You shall not pass!');
  res.redirect('/');
}
 
app.listen(8080, () => console.log('Ready on 8080'));

This is a fairly standard app that has sessions, cookies and EJS templates, together with two pages: an index page that is accessibe to everybody and /secret page that nobody can go to, because our dedicated secured() function redirects all requests to index, printing famous Gandalf's words to console. To keep the listing complete, here are our EJS views. index.ejs:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Auth Demo</title>
</head>
<body>
  <div class="container">
    <a href="/fb">Facebook Login</a>
  </div>
</body>
</html>

and secret.ejs:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Auth Demo</title>
</head>
<body>
  secret page
</body>
</html>

You can try this app now to make sure it works and you are on a right track. Now, let's make it real Facebook-friendly application with some Passport magic. First thing you will have to do is go to https://developers.facebook.com and register your application. You will need to complete this step, find your Application ID, secret key and set up callback URL to http://localhost:8080/fb-callback (find it under "Facebook Auth" menu item). Once you have the keys, you're ready to write the rest of the code. Let's start from setting up our "User Database" and adding Passport.

const passport = require('passport');
const FacebookStrategy = require('passport-facebook').Strategy;
 
/* express.js setup code here */
 
app.use(passport.initialize());
app.use(passport.session());
 
/******** Mini user DB **************/
let maxId = 0;
 
const users = {
};
 
function newUser(fbId) {
  const id = ++maxId;
  return users[id] = { id, fbId };
}
 
/******** SETTING UP PASSPORT *************/
 
passport.serializeUser((user, done) => done(null, user.id));
 
passport.deserializeUser((id, done) => {
  setImmediate(() => {
    done(null, users[id]);
  })
});

This code does few things. Firstly, we add Passport to the express middleware stack. Passport will work together with session middleware to find user ID (if present), find user in database and put user object into a session. This whole process is orchestrated by two functions that we define: serializeUser() and deserializeUser(). These functions "know" how to find user in DB and which part of User object is a "key" that can be later used to perform search. This code is very simple as we are using a JS object as a DB. In a real-world scenario you would probably put here your MongoDB or PostgreSQL code. Now, that Passport.js is in place we can re-write our "security middleware".

function secured(req, res, next) {
  if (req.isAuthenticated()) {
    console.log('This user is OK to see secrets');
    return next();
  } else {
    console.log('You shall not pass!');
    res.redirect('/');
  }
}

req.isAuthenticated() is a new function that Passport.js adds to the request object. Since passport only knows how to save users (but not how to authenticate them), this function is still not letting anybody in. However once we finish our Passport.js setup, it will work! The last step is to set up the routes required for authentication together with passport's Facebook strategy.

app.get('/fb', passport.authenticate('facebook', { scope : 'email' }));
 
app.get('/fb-callback', passport.authenticate('facebook', {
  successRedirect : '/secret',
  failureRedirect : '/'
}));
 
passport.use(new FacebookStrategy({
    clientID : '<client-id>',
    clientSecret : '<client-secret>',
    callbackURL : 'http://localhost:8080/fb-callback'
  },
  (token, refreshToken, profile, done) => {
    const fbId = profile.id;
    done(null, newUser(fbId));
    console.log('Authenticated with Facebook. FB ID is', fbId);
  }));

That's it! Once you configured the Facebook strategy Passport will take care to redirect browser to Facebook and retrieve the information from Facebook once user confirms access. Afterwards, you will receive an object called "profile" that contains the information that you requested. At this point you can count your user authenticated.

Add new comment

190 views