-
Notifications
You must be signed in to change notification settings - Fork 0
Home
In this part, we’ll be implementing authentication via Facebook and GitHub in a Node.js web application. For this, we’ll be using Passport, an authentication middleware for Node.js. Passport supports authentication with OpenId/OAuth providers.
Before getting started, make sure you have Node.js installed on your machine.
We’ll begin by creating the folder for our app and then accessing that folder on the terminal:
mkdir AuthApp
cd AuthApp
To create the node app we’ll use the following command:
npm init
You’ll be prompted to provide some information for Node’s package.json. Just hit enter until the end to leave the default configuration.
Next, we’ll need an HTML file to send to the client. Create a file called auth.html in the root folder of your app, with the following contents:
<html>
<head>
<title>Node.js OAuth</title>
</head>
<body><br>
<a href=auth/facebook>Sign in with Facebook</a>
<br>
<a href=auth/github>Sign in with Github</a>
</body>
</html>
That’s all the HTML we’ll need for now.
You’ll also require Express, a framework for building web apps. In order to install Express, from the terminal type the following command:
npm install express --save
Once you’ve done that, it’s time to write some code.
Create a file index.js in the root folder of your app and add the following content to it:
const express = require('express');
const app = express();
app.get('/', (req, res) => res.sendFile('auth.html', { root : __dirname}));
const port = process.env.PORT || 3000;
app.listen(port , () => console.log('App listening on port ' + port));
Now we should start our app to make sure all is working correctly. Simply write the following command on the terminal:
node index.js
You should see the message: App listening on port 3000.
Moving on, let’s see if our page is being served to the client. Go to your web browser and navigate to http://localhost:3000.
As you’ll soon come to realize, Passport makes it a breeze to provide authentication for our users. Let’s install Passport with the following command:
npm install passport --save
Now we have to set up Passport. Add the following code at the bottom of the index.js file:
/* ### PASSPORT SETUP */
const passport = require('passport');
app.use(passport.initialize());
app.use(passport.session());
app.get('/success', (req, res) => res.send("You have successfully logged in"));
app.get('/error', (req, res) => res.send("error logging in"));
passport.serializeUser(function(user, cb) {
cb(null, user);
});
passport.deserializeUser(function(obj, cb) {
cb(null, obj);
});
This very simple demo app will work just fine without deserializeUser, but it kills the purpose of keeping a session, which is something you’ll need in every app that requires login.
That’s all for the Passport setup.
The first thing we’ll need to do in order to provide Facebook Authentication is installing the passport-facebook package. You know how it goes:
npm install passport-facebook --save
Now that everything’s set up, adding Facebook Authentication is extremely easy. Add the following code at the bottom of your index.js file:
/* ### FACEBOOK AUTH */
const FacebookStrategy = require('passport-facebook').Strategy;
const FACEBOOK_APP_ID = 'your app id';
const FACEBOOK_APP_SECRET = 'your app secret';
passport.use(new FacebookStrategy({
clientID: FACEBOOK_APP_ID,
clientSecret: FACEBOOK_APP_SECRET,
callbackURL: "/auth/facebook/callback"
},
function(accessToken, refreshToken, profile, cb) {
return cb(null, profile);
}
));
app.get('/auth/facebook',
passport.authenticate('facebook'));
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { failureRedirect: '/error' }),
function(req, res) {
res.redirect('/success');
});
That’s it! you have just set up Facebook Authentication. Pretty easy, right?
The process for adding GitHub Authentication is quite similar to what we did for Facebook. First, we’ll install the passport-github module:
npm install passport-github --save
Now go to the index.js file and do the same as what we did with Facebook Authentication. The only difference is that we’re using the GithubStrategy instead of FacebookStrategy.
Thumbs up to Paul Orac Visit his Post here....