Implementing Facebook Login using Nodejs and Express

In this article, we will see how to implement facebook login in application using Nodejs and Express. Implementing Facebook Login using Nodejs and Express.

Facebook Login is widely used for authentication in lots of applications. Instead of asking user to register, application can simply using social websites to get the user information

Recent Article in Node.js,

Crafting multi-stage builds with Docker in Node.js

Building a Production – Ready Node.js App with TypeScript and Docker

Setting up Developer's Account

we need Facebook developer credentials for application development. So , go to https://developers.facebook.com, and create an application.

app creation

As a result, it creates an application an redirects to dashboard. After that, go to Settings -> Basic to get the app credentials.

Capture 1

Now, you have the application credentials. it's time to write some code.

Implementation

passportjs is used for facebook authentication in Nodejs/Express application.

That is to say, Install the dependencies for application, such as

  • express - Node.js Framework to run the web server.
  • Passportjs - it is an authentication middleware for Node.js application.
  • handlebars - Templating engine for Javascript application.
1npm install --save express express-handlebars passport passport-facebook

Add the following code to setup the express server.

1const express = require("express")
2
3const app = express()
4
5app.get("/", (req, res) => {
6 res.send("Server")
7})
8
9app.listen(3000, () => {
10 console.log("Server is Running in Port 3000")
11})

You can run the application using the script node app.js.

After that, visit the url http://localhost:3000 to see the output.

Now, it is time to set up web page for button and data list after login. For that, we need handlebars. add the following code for handlebars initialization.

1const express = require('express');
2const exphbs = require('express-handlebars');
3
4const app = express();.
5
6app.engine('handlebars', exphbs());
7app.set('view engine', 'handlebars');
8
9app.get("/",(req,res) => {
10 res.render('home');
11});
12
13app.listen(3000,() => {
14 console.log("Server is Running in Port 3000");
15});

it imports the express handlebars library and set it as the template engine for the express application.

After that, Create a folder called views in the root directory. Inside that, create a folder layout that contains the basic layout.

Meanwhile , If you are new to Handlebars. i recommend you to watch this tutotial

folder

Views contains all the handlebar files. Firstly, add the following code in the main.handlerbars. it will create a basic html page for application. it can be reused in all the subsequent handlebar files.

1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Example App</title>
6 <link
7 rel="stylesheet"
8 href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
9 />
10 </head>
11
12 <body>
13 {{{body}}}
14 </body>
15</html>

After that, add the following code in home.handlebars, it creates an button element through which user can login.

1<div class="ui one column stackable center aligned page grid">
2 <div class="column twelve wide">
3 <div class="ui facebook button">
4 <i class="facebook icon"></i>
5 <a href="/auth/facebook" style="color: white;">Login with Facebook</a>
6 </div>
7 </div>
8</div>

Likewise , data.handlebars contains the user data after facebook login.

1<div class="ui two column centered grid">
2 <div class="column">
3
4 <h2>Display Name : {{user.displayName}}</h2>
5 </div>
6</div>

Passportjs Implementation

Now, it's time to integrate passport.js with express application.

Import the passport and passport-facebook package in the app.js

1const passport = require("passport")
2const FacebookStrategy = require("passport-facebook").Strategy

secondly , initialize passport and passport sesstion.

1app.use(passport.initialize())
2app.use(passport.session())

passport.session() acts as a middleware to alter the req object and change the user value in the request session

Moreover , To store and retrieve in the session. the user value should be serialized.

1passport.serializeUser(function(user, done) {
2 done(null, user)
3})
4
5passport.deserializeUser(function(user, done) {
6 done(null, user)
7})

After that, we use the Passport Facebook Strategy to authenticate the application.

1passport.use(
2 new FacebookStrategy(
3 {
4 clientID: "Client ID",
5 clientSecret: "Client Secret",
6 callbackURL: "http://localhost:3000/auth/facebook/callback",
7 },
8 function(accessToken, refreshToken, profile, cb) {
9 return cb(null, profile)
10 }
11 )
12)

That is to say, Passport registers the Facebook Strategy for authentication. Mainly it takes ClientID and ClientSecret to register strategy.

As a result, we can use it as a middleware in express app routes.

Above all , when authentication is done, it will call the callback function with the user profile data.

As a result Once login is successfull, it calles the callback url with the user profile data. it sends the data to handlebars to display it in the dashboard.

1app.get("/auth/facebook", passport.authenticate("facebook"))

Complete Code

1const express = require("express")
2
3const exphbs = require("express-handlebars")
4const passport = require("passport")
5const FacebookStrategy = require("passport-facebook").Strategy
6let app = express()
7
8app.engine("handlebars", exphbs())
9app.set("view engine", "handlebars")
10
11app.use(passport.initialize())
12app.use(passport.session())
13
14passport.serializeUser(function(user, done) {
15 done(null, user)
16})
17
18passport.deserializeUser(function(user, done) {
19 done(null, user)
20})
21
22passport.use(
23 new FacebookStrategy(
24 {
25 clientID: "Client ID",
26 clientSecret: "Client Secret",
27 callbackURL: "http://localhost:3000/auth/facebook/callback",
28 },
29 function(accessToken, refreshToken, profile, cb) {
30 return cb(null, profile)
31 }
32 )
33)
34
35app.get("/auth/facebook", passport.authenticate("facebook"))
36
37app.get(
38 "/auth/facebook/callback",
39 passport.authenticate("facebook", { failureRedirect: "/" }),
40 function(req, res) {
41 console.log("req", req.user)
42 res.render("data", {
43 user: req.user,
44 })
45 }
46)
47
48app.get("/", (req, res) => {
49 res.render("home", {
50 user: req.user,
51 })
52})
53
54app.listen(3000, () => {
55 console.log("Server is Running in Port 3000")
56})

Conclusion

To sum up , passport is a simplest way to implement social login in express application.

In conclusion, we learned how to implement facebook login in express application.

To Read More

How to build an Actionable data ta...

In this article, we will see how to build an Actionable data table using a react...

How to Integrate Google Sheet in No...

This article explains how to Integrated Google sheet with your Nodejs Applicatio...

Kubernetes for Nodejs developers

Do you keep hearing the word kubernetes in the tech community and you couldn't u...