Facebook Authentication with NodeJS and Passport.

This is a bit of a tricky one, but i if you can do it with one social provider you can easily do it anyone.

For this demo i will be using ExpressJS, AngularJS in the front end and JWT Tokens.

First thing you need to do is create your app in Facebook for Developers, every social provider requires the same and after doing this they will provide you a ID and a SECRET_KEY (maybe not with this same names…).

In our view we will place the link to login with Facebook, we will leave it hanging there because we need to configure the route that it will be using and some other things in the backend so keep that in mind:

<a href="/login/facebook" target="_self">Facebook Login</a>

Now the fun part. You need to have passportJS installed and each provider requires a specific passport extension. Your package.json should have something like this:

"express": "^4.15.2",
"jsonwebtoken": "^7.3.0",
“passport”: “⁰.3.2”,
“passport-facebook”: “².1.1”,

Once this is installed properly we can go to our server file and require passport and actually make our app to use facebook strategy.

var express = require('express');
var passport = require('passport');
var Strategy = require('passport-facebook').Strategy;
passport.use(new Strategy({
clientID: '1h321k2g3k12g3k1gkkgweliudh',
clientSecret: 'kjfhadfjhadkfjhgaldfhaldkhg',
callbackURL: 'http://localhost:3000/login/facebook/return'
}, function(accessToken, refreshToken, profile, done) {
      //here you can perform any DB query for saving the user or getting some information. we have access to his/her data through the 'profile' argument that we are been given. The 'done' argument is a callback function that we need to use with whatever is we want to send to the front end.

One thing to notice is that you should NEVER store the ID and SECRET this way, i just did it with the purpose of showing you where everything should go. You can store this keys as environmental variables in your computer or the server.

Another thing is the callbackURL that we provided to facebook. This is the route that they will use to hit us back in case we have a successful authentication!.

We can create that route in our server side now to perform the actual authentication, so it will use a passport function. This is the route that we use with the link at the beginning of this post. If our back end is set up this will do the call to the facebook servers to request permissions from the user.

app.get('/login/facebook', passport.authenticate('facebook'))

Now as we mentioned before if all works fine, Facebook will hit the other route that we provided, remember?

callbackURL: 'http://localhost:3000/login/facebook/return'

So lets define that route:

passport.authenticate('facebook', { failureRedirect: '/' }),
function(req, res) {
// In the 'req' a we have access to what ever is that we pass to the 'done' function and we can go back to the front end with that information. The way i found to do this is to just pass the data to the url as params in this redirect like this:

res.redirect('/?user=' + req.user.name)

In the front end the url will change and it will bring us the information the sent back. Angular has a way to take advantage of this through the $location:

$location.search() // this will break apart the query in the url giving you access to the data

Thats it!