Login with LinkedIn in Node JS

Node js linkedin login example; in this tutorial; i am going to show you from scratch on how to build social linkedin login authentication system in node js with passport js.

You should have basic Knowledge of the followings:

Basic knowledge of HTML/CSS
A good understanding of JavaScript and Node.js
Latest Node.js version installed on your system

LinkedIn uses OAuth 2.0 to authenticate requests, and we need to provide a callback URL. To play around with the API, you do not need a public domain. Under the Auth tab and OAuth 2.0 settings, edit the Authorized redirect URLs for your app field with your callback URL.

Linkedin login in node js tutorial; you will understand how to make login system using linkedin social auth in node js express app.

Node js Social Linkedin Login Example

Step 1 – Install Node Express JS Setup
Step 2 – Install Required Node Module
Step 3 – Import Modules in app.js
Step 4 – Create Routes
Step 5 – Create views
Step 6 – Create Config.js
Step 7 – Start App Server

Step 1: Install Node Express JS Setup

In this step, execute the following command on terminal to create directory:

mkdir LinkedinAuth

After open LinkedinAuth directory with any text editor. And use the following command to enter your LinkedinAuth app directories, So open your cmd and run the following command:

cd LinkedinAuth

Step 2 – Install Required Node Module

Execute the following commands on terminal to install express, ejs, express-session and passport:

npm init
npm install express ejs express-session passport passport-linkedin-oauth --save

express-flash

Flash is an extension of connect-flash with the ability to define a flash message and render it without redirecting the request.
In this node js mysql crud tutorial express flash is used to display a warning, error and information message

express-session

Express-session is used to made a session as like in PHP. In this node js mysql crud tutorial, session is needed as the express requirement of express-flash.

EJS

To render HTML pages for login and profile

passport

Social Authentication package for Node.js

passport-linkedin-oauth2

A simple passport strategy for LinkedIn OAuth2 http://www.passportjs.org/packages/passport-linkedin-oauth2/

Recommended:-Node js Express Form Post Example

Step 3 – Import Modules in app.js

In this step, you need to create a file app.js in the root folder of your app and add the following code:

const express = require('express');
const app = express();
const session = require('express-session');
const passport = require('passport');
const LinkedInStrategy = require('passport-linkedin-oauth2').Strategy;
const routes = require('./routes.js');
const config = require('./config')
app.set('view engine', 'ejs');
app.use(session({
  resave: false,
  saveUninitialized: true,
  secret: 'SECRET'
}));
app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser(function (user, cb) {
  cb(null, user);
});
passport.deserializeUser(function (obj, cb) {
  cb(null, obj);
});
passport.use(new LinkedInStrategy({
  clientID: config.linkedinAuth.clientID,
  clientSecret: config.linkedinAuth.clientSecret,
  callbackURL: config.linkedinAuth.callbackURL,
  scope: ['r_emailaddress', 'r_liteprofile'],
}, function (token, tokenSecret, profile, done) {
  return done(null, profile);
}
));
app.use('/', routes);
const port = 3000;
app.listen(port, () => {
  console.log('App listening on port ' + port);
});

Step 4 – Create Routes

Create a file named route.js in the root directory and paste the following code:

const passport = require('passport');
const express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
  res.render('pages/index.ejs'); // load the index.ejs file
});
router.get('/profile', isLoggedIn, function (req, res) {
  res.render('pages/profile.ejs', {
    user: req.user // get the user out of session and pass to template
  });
});
router.get('/auth/linkedin', passport.authenticate('linkedin', {
  scope: ['r_emailaddress', 'r_liteprofile'],
}));
router.get('/auth/linkedin/callback',
  passport.authenticate('linkedin', {
    successRedirect: '/profile',
    failureRedirect: '/login'
  }));
router.get('/logout', function (req, res) {
  req.logout();
  res.redirect('/');
});
function isLoggedIn(req, res, next) {
  if (req.isAuthenticated())
    return next();
  res.redirect('/');
}
module.exports = router;

Step 5 – Create views

Create directory name pages. So, visit the views directory in your app and create the pages directory. And inside the pages/ direcotry,create the following views file:

index.ejs
profile.ejs

Add the following code into index.ejs file; as given below:

<!doctype html>
<html>
<head>
  <title>Linkedin Node Authentication</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  <style>
    .linkedin {
      background-color: #0073b1 !important;
      color: #fff !important;
    }
    .fa-linkedin-f:before,
    .fa-linkedin:before {
      content: "\f0e1";
    }
  </style>
</head>
<body>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>
    </div>
  </nav>
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <div class="row center">
        <div class="col s6 offset-s3">
          <div class="card">
            <div class="card-content">
              <span class="card-title">Linkedin Login using Node and passport</span>
            </div>
            <div class="card-action">
              <a href="/auth/linkedin" class="waves-effect waves-light btn social linkedin">
                <i class="fa fa-linkedin"></i> Sign in with Linkedin
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Add the following code into profile.ejs file; as given below:

<!doctype html>
<html>
<head>  
  <title>LinkedIn Node Authentication</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  <style>
    .card:hover {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
      margin-bottom: 54px;
    }
  </style>
</head>
<body>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>
      <a href="/logout" class="right">Logout</a>
    </div>
  </nav>
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <div class="row center">
        <div class="col s12">
          <div class="card">
            <div class="card-content blue lighten-3">
              <span class="card-title white-text"><strong><i class="large material-icons">person</i>
                </strong></span>
            </div>
            <div class="card-action">
              <h5><b><%= user.displayName %></b></h5>
              <p><strong>Linkedin id</strong>: <%= user.id %></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Step 6 – Create Config.js

Create config.js file in the root directory. Then add the following code into it with linkeding secret details:

module.exports = {
  'linkedinAuth': {
    'clientID': '<CLIENT_ID>', // your App ID
    'clientSecret': '<CLIENT_SECRET>', // your App Secret
    'callbackURL': 'http://127.0.0.1:3000/auth/linkedin/callback'
  }
}

Step 7 – Start App Server

Execute the following command on terminal to start app server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000
OR
http://localhost:3000

Conclusion

Sign in with LinkedIn in node js tutorial; You have learned how to create LinkedIn authentication in node js express with passport.