{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/google-authentication-with-nodejs-and-passportjs/","result":{"data":{"markdownRemark":{"id":"dc9e30b3-2b48-50cf-886f-15ae7fcf58aa","excerpt":"In this blog, we’ll be implementing OAuth in node js application via Google. For this, we’ll be using Passport.js, an authentication package for Node.js. Here…","html":"

In this blog, we’ll be implementing OAuth in node js application via Google. For this, we’ll be using Passport.js, an authentication package for Node.js. Here’s a quick guide on implementing OAuth 2.0 in node js​.

\n

Before You Get Started

\n

This tutorial assumes you have:

\n\n

Step 1: Create a Google client ID and client secret

\n

We can create a client ID and client secret using its Google API Console. You need to follow below steps once you open Google Auth API Console

\n\n

Note: If Google doesn't support http://localhost:3000, then use http://127.0.0.1:3000

\n

Step 2: Initialize a node.js project with all the dependencies

\n

To create OAuth nodejs authentication, first in an empty folder run the below command

\n
npm init
\n

It essentially just creates the package.json file with all the basic information you will provide. after that, we will install all the dependencies needed in our project

\n\n
npm install express ejs express-session passport passport-google-oauth --save
\n

Step 3: Writing express server code to accept web requests

\n

Create a file index.js in the root folder of your app and add the following code:

\n
// index.js\n\n/*  EXPRESS */\n\nconst express = require('express');\nconst app = express();\nconst session = require('express-session');\n\napp.set('view engine', 'ejs');\n\napp.use(session({\n  resave: false,\n  saveUninitialized: true,\n  secret: 'SECRET' \n}));\n\napp.get('/', function(req, res) {\n  res.render('pages/auth');\n});\n\nconst port = process.env.PORT || 3000;\napp.listen(port , () => console.log('App listening on port ' + port));
\n

Our web server has been set up, now we will add the code related to the passport at the bottom of the index.js file:

\n
// index.js\n\n/*  PASSPORT SETUP  */\n\nconst passport = require('passport');\nvar userProfile;\n\napp.use(passport.initialize());\napp.use(passport.session());\n\napp.set('view engine', 'ejs');\n\napp.get('/success', (req, res) => res.send(userProfile));\napp.get('/error', (req, res) => res.send("error logging in"));\n\npassport.serializeUser(function(user, cb) {\n  cb(null, user);\n});\n\npassport.deserializeUser(function(obj, cb) {\n  cb(null, obj);\n});
\n

Now, at last, we are ready to implement Google Authentication in our app, Add the following code at the bottom of your index.js file, use your client Id and Secret instead of placeholders:

\n
// index.js\n\n/*  Google AUTH  */\n \nconst GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;\nconst GOOGLE_CLIENT_ID = 'our-google-client-id';\nconst GOOGLE_CLIENT_SECRET = 'our-google-client-secret';\npassport.use(new GoogleStrategy({\n    clientID: GOOGLE_CLIENT_ID,\n    clientSecret: GOOGLE_CLIENT_SECRET,\n    callbackURL: "http://localhost:3000/auth/google/callback"\n  },\n  function(accessToken, refreshToken, profile, done) {\n      userProfile=profile;\n      return done(null, userProfile);\n  }\n));\n \napp.get('/auth/google', \n  passport.authenticate('google', { scope : ['profile', 'email'] }));\n \napp.get('/auth/google/callback', \n  passport.authenticate('google', { failureRedirect: '/error' }),\n  function(req, res) {\n    // Successful authentication, redirect success.\n    res.redirect('/success');\n  });
\n

Note: The callback URL should be the same as used in the google app configuration.

\n

Step 4: Creating a Login and Profile page

\n

Create an ejs file under path views/pages/auth.js, it will render into a nice looking social login page:

\n
<!-- views/pages/auth.ejs -->\n<!doctype html>\n<html>\n<head>\n    <title>Google SignIn</title>\n    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">\n    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n    <style>\n        body        { padding-top:70px; }\n    </style>\n</head>\n<body>\n<div class="container">\n    <div class="jumbotron text-center text-primary">\n        <h1><span class="fa fa-lock"></span> Social Authentication</h1>\n        <p>Login or Register with:</p>\n        <a href="/auth/google" class="btn btn-danger"><span class="fa fa-google"></span> SignIn with Google</a>\n    </div>\n</div>\n</body>\n</html>
\n

After it we wll create an ejs file under path views/pages/success.js, it will be used to show the user profile information we will get after authenticated by google

\n
<!-- views/success.ejs -->\n<!doctype html>\n<html>\n  <head>\n    <title>Google SignIn</title>\n    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- load bootstrap css -->\n    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- load fontawesome -->\n      <style>\n          body        { padding-top:70px; }\n      </style>\n  </head>\n  <body>\n    <div class="container">\n      <div class="jumbotron">\n          <h1 class="text-primary  text-center"><span class="fa fa-user"></span> Profile Information</h1>\n          <div class="row">\n            <div class="col-sm-6">\n                <div class="well">\n                        <p>\n                            <strong>Id</strong>: <%= user.id %><br>\n                            <strong>Email</strong>: <%= user.emails[0].value %><br>\n                            <strong>Name</strong>: <%= user.displayName %>\n                        </p>\n                </div>\n            </div>\n        </div>\n      </div>\n    </div>\n  </body>\n</html>
\n

Note: Here we are also using bootstrap and font-awesome css to make our web pages look good.

\n

We have finished building our social login page, let's run the application by below command

\n
node index.js
\n

Once our server is running, we can see our social login page on http://localhost:3000/

\n

\n \n \n

\n

After login with our google credentials, it will redirect back to our application and on the success page, we can see the details of the logged-in user and can save this detail in a database for future use also.

\n

\n