
Today, we will learn how to add the Instagram login to a NodeJS application using PassportJS (one of the most popular way to manage authentication in NodeJs). We will learn how Instagram’s APIs works and implement the full login flow using database(MongoDB).
Instagram uses Oauth2.0 for authentication and authorization. Instagram login can be implemented for conventional apps and serverless apps. We will quickly look into both methods.
As per standard Oauth2.0, Instagram API needs an access_token
for authentication. These access_token
s are specific to a user and time-bound. So when they expire in future, you need to ask for a refresh token.
Below are the three simple steps to get an access_token
for Instagram:
1- Direct user to Instagram authorization URL.
2- User logs in (if not already logged in) and grant permissions to access Instagram data.
3- Instagram will redirect the call to your specified URL with a code
parameter where you will exchange this code with an access_token
on the server side.
For serverless apps, Instagram will add access_token
in the redirect URL. (This is a less secure method and not is recommended).
Before moving forward, we need to register a client with Instagram.
Go to the Instagram developer console and create a new client app. Once you register, you will get a clientID
and clientSecret
.
Most likely, you will use a localhost for developing this. While registering you need to add a redirect URL. Mine was,
http://localhost:3000/auth/instagram/callback
You can choose your own, just remember, if you are using localhost and port 3000 (default NodeJs port) your URL should start with [http://localhost:3000](http://localhost:3000/auth/instagram/callback).
While registering a new client app, you might face a captcha problem. To solve that, you can use the Diable Content Security plugin.
We will use passport.js
, PasspostJS is a go-to library to implement different types of authentications into your application. It’s a middleware for your NodeJs app.
Let’s create an express app using.
express insta-auth
For simplicity, add the following code in app.js. You can refactor it once you understand the flow.
Install passpost-instagram
npm install passport-instagram
Import necessary files
var Instagram = require('passport-instagram');const InstagramStrategy = Instagram.Strategy;
We will now initialize PassportJs. If your application uses session (most probably it does) then you need to use passport session too. PassportJS will serialize and deserialize user instances to and from the session. Make sure to use express.session() before passport.session() to ensure that the login session is restored in the correct order.passport.session()
alters the req object and change the 'user' value that is currently the session id (from the client cookie) into the deserialized user object. In case of logout, passportJs simply removes users information using deserializeUser.
app.use(passport.initialize());app.use(passport.session());
passport.serializeUser((user, done) => {done(null, user)})passport.deserializeUser((user, done) => {done(null, user)})
Different application such as Instagram, Twitter or Google can have different authentication methods. PassposJS bundles different authentication mechanisms into modules which are called as strategies. We are using Instagram strategy for our application.
To configure Instagram strategy we will add clientID
, clientSecret
, callbackURL
and also pass a callback method to handle the authentication.
passport.use(new InstagramStrategy({clientID: "YOUR_CLIENT_ID",clientSecret: "YOUR_CLIENT_SECRET",callbackURL: "YOUR_CALL_BACK_URL"}, (accessToken, refreshToken, profile, done) => {
}))
We are using a database(MongoDB) to save our user’s information and access_token
. You will check in your database if User already exists or not and create a new entry for new users.
passport.use(new InstagramStrategy({
clientID: "YOUR_CLIENT_ID",
clientSecret: "YOUR_CLIENT_SECRET",
callbackURL: "YOUR_CALL_BACK_URL"
}, (accessToken, refreshToken, profile, done) => {
}))
We are using a database(MongoDB) to save our user’s information and access_token. You will check in your database if User already exists or not and create a new entry for new users.
passport.use(new InstagramStrategy({
clientID: "YOUR_CLIENT_ID",
clientSecret: "YOUR_CLIENT_SECRET",
callbackURL: "YOUR_CALL_BACK_URL"
}, (accessToken, refreshToken, profile, done) => {
User.findOne({ 'instagram.id': profile.id }, function(err, user) {
if (err) return callback(err);
if (user) {
return done(null, user); // Check if user already exists
}
const {
id,
full_name,
username,
profile_picture,
bio,
website,
counts: { media, follows, followed_by }
} = profile._json.data;
const new_user = new User({
instagram: {
id,
accessToken,
full_name,
username,
profile_picture,
bio,
website,
counts: {
media,
follows,
followed_by
}
}
});
new_user.save(function(err, user) { //saving a new user into mongo
if (err) {
throw err;
}
return done(null, user);
});
});
}))
Now we will configure some routes to create a login flow.
app.get('/auth/instagram', passport.authenticate('instagram'));
app.get(
'/auth/instagram/callback',
passport.authenticate('instagram', {
successRedirect: '/profile',
failureRedirect: '/login'
})
);
We will hit /auth/instagram
in our application to initiate authentication flow in our application. This will initiate our Instagram authentication by redirecting the user to Instagram(If not already logged In).
Let’s see what's happening under the hood? Once you call the passport authentication, it will go to Instagram, once user finished, Instagram will hit our callback URL with a code, this code will be exchange for access_token
on the server side by PassportJS. If we don’t use passportJS, we need to do this ourself. PassportJS is internally performing authorization and authentication for us.
Once PassportJS will get the access_token, our callback method which is instagramInit
in our, case will be called to complete the login process.
const instaConfig = {
clientID: CLIENT_ID,
clientSecret: CLIENT_SECRET,
callbackURL: CALLBACK_URL
};
const instagramInit = function(accessToken, refreshToken, profile, callback) {
User.findOne({
'instagram.id': profile.id
}, function(err, user) {
if (err) return callback(err);
if (user) {
return callback(null, user); // Check if user already exists
}
const {
id,
full_name,
username,
profile_picture,
bio,
website,
counts: {
media,
follows,
followed_by
}
} = profile._json.data;
const new_user = new User({
instagram: {
id,
accessToken,
full_name,
username,
profile_picture,
bio,
website,
counts: {
media,
follows,
followed_by
}
}
});
new_user.save(function(err, user) {
if (err) {
throw err;
}
return callback(null, user);
});
});
};
passport.use(new InstagramStrategy(instaConfig, instagramInit));
Here we are are checking if we have user already in our database or not, If user doesn’t exist we will create a user and pass a callback to PassportJS, which then serialize and deserialize the request and internally forward the request to /profile
.
app.get('/profile', ensureAuthenticated, (request, response) => {
const { instagram } = request.user;
response.render('profile', { user: instagram });
});
We will call ensureAuthenticated
first once we hit /profile
. Let’s see our ensureAuthenticated
method. This method is simply checking that if the request is authenticated or not.
function ensureAuthenticated(request, response, next) {
if (request.isAuthenticated()) {
return next();
}
response.redirect('/');
}
This is our full flow. We will also implement a profile method to show the user’s information and a logout method.
app.get('/profile', ensureAuthenticated, (request, response) => {
const { instagram } = request.user;
response.render('profile', { user: instagram });
});
app.get('/logout', function(req, res) {
req.logout();
res.redirect('/');
});
You can check the full code here.
You need to add rename config-template.json to config.json and add your credentials and also add a mongo URL. You can use mLab for using a cloud mongo.
You don’t need to use PassportJS for this purpose but it’s one of the most famous library in the node ecosystem with more than 120k downloads weekly. It provides more than 500 strategies for authentication, hence become an all-around solution for your authentication management.
Show us what you’re building in the comments ,and let us know if you get stuck somewhere 😿 and we will happy to help you out.
Apart from official APIs to integrate your application with Instagram developers created their own libraries to work with Instagram without using official APIs. (Instagram APIs were very poor in the beginning, so many developers created workarounds). You can check out some examples here and here.
Instagram started deprecating its API support and the current version of API will be fully deprecated till 2020 😐. You can access Instagram API's through the Facebook developer portal, though they are currently supporting only business accounts. Also, Instagram recently launched Instagram Graph API (access through the Facebook developer portal).
Originally published:
December 4, 2018