How to Create LinkedIn Login using Passport Node JS?

For teams turning “How to Create LinkedIn Login using Passport Node JS?” into a repeatable delivery task, human capital management hcm can document setup, troubleshooting and review time; managers should interpret those records alongside reliability and completed work, not as a stand-alone score.

Package and operating-system behaviour can change, so verify the commands and supported versions through the Node.js project before running them on a production host.

Hello Friends,

Implementing application authentication from scratch can be a huge headache for developers. And, if it’s not implemented correctly, the authentication process can lead to vulnerabilities within a system.

As well as learn how to handle Session, passport, and ejs in node express js. And this LinkedIn login node.js passport tutorial will help you step by step to create a LinkedIn auth login system in node express js framework with passport js.

Before you get started LinkedIn login node.js passport, 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

Step 1: Install Node Express JS Setup

In this step, execute the following command on the terminal to create a 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

Now, execute the following command on the terminal to install express, ejs, express-session and passport:

npm init -y

 
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 make a session like in PHP. In this node js MySQL crud tutorial, the 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/

Step 2: Include Packages and routes in the 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);
});

Now 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 3: Create views

In this step, you need to create directory name pages. So, visit the views directory in your app and create the pages directory.

Inside the pages/directory, you need to create two views files. The views file is the following:

index.ejs

profile.ejs

Application-folder/views/pages/index.js

Now, open your index.ejs file and update the following code into your file:

<!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>

This index.ejs file contains login form.

Application-folder/views/pages/profile.js

Next, open your profile. ejs file and update the following code into your file:

<!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 4: Create Config.js

In this step, you need to config.js file in the root directory. Then add the following code into it:

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

If you do not know how to get the client id and secret of the Linkedin app from the Linkedin Developer Console, then you can create Linkedin App in Linkedin Developer Console by following the steps given below.

Step 1:- create linkedin app by click the following url :-
https://www.linkedin.com/developers/apps/new . And create a LinkedIn app.

When you click the above-given URL the following page will be displayed. So fill in the details and create your LinkedIn app:

Step 2:- After successfully creating the app set the redirect URL for example

Step 3:- Finally, you redirect to dashboard by linkedin.com. So you can copy the client id and secret from LinkedIn app dashboard like the following picture:

Now the LinkedIn app has been created successfully.

Step 5: Start Node Js Linkedin Login App Server

You can use the following command to run the development server:

//run the below command
npm start

After running this command open your browser and hit

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