{"componentChunkName":"component---src-pages-author-author-yaml-id-js","path":"/author/aman-agrawal/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"93bbb368-57d3-55a5-8c9d-0e7bce82b726","html":"

We often hear that JavaScript is a single-threaded programming language, which means it executes all of the instructions line by line in a synchronous manner. Thus since everything works on the main thread, there seems to be no possibility of executing parallel processes in JavaScript.

\n

But now let's assume that we have a function which is taking some time to execute, for example in the below function which is having a loop over 10k times, the console.log() would be executed once the loop is over and in the meantime, our UI interaction with the browser would be interrupted.

\n
function someTimeTakingFunc() {\n  for(var i = 0; i < 10000; i++) {\n\n  }\n  console.log("Loop has been executed")\n}
\n

The above scenario seems to be impractical, but there might be cases where any function can take an indeterminate amount of time and our main thread would be blocked, for example calling an API for fetching data from the server-side. And this is the practical use case we are dealing with in development every day. So how JavaScript handles this and where does the event loop come into the picture? We will surely get to know this, but before moving further, let's understand the basic memory architecture in JavaScript.

\n

Memory Organization of JavaScript:

\n

The Javascript Engine consists of two main components:

\n\n

Understanding the Call Stack

\n

Call stack is a LIFO (last in first out) data structure. All of the function calls are pushed into this call stack and are said to be a frame. In short function, a stack is nothing but the simple stack data structure which keeps track of the function currently being executed.

\n

Let's understand the above concept with the example of the following code snippet:

\n
 function square(b) {\n   return b * b ; \n }\n\n function cube(x) {\n   return x * square(x)\n }\n\n console.log(cube(8));
\n

The above snippet is an example of defining a cube function, which is calling a square function, to find the cube of a number passed in the argument. But how does this work in call stack? Let's understand step by step:

\n
    \n
  1. When we call the console.log() line, this code/function is pushed into the call stack.
    2. \n
  2. Now the above console.log() function is called the cube function, hence this function is pushed into the stack.
    3. \n
  3. After this the cube function is calling the square function, and now this would be pushed into the stack.
    4. \n
  4. Now once the square function is executed, and the result is returned, then the square function is popped out of the stack.
    5. \n
  5. Since at this step, we have got the square function result, so cube function would be executed and popped out of the call stack.
    6. \n
  6. At last, the console.log() would be executed and this function would be popped out of the stack and the stack would now be empty.
    7. \n
\n

\"Call

\n

Now since we have understood that call stacks are possible to execute the function in a step by step manner, there seems to be no possibility of keeping something into parallel. But there is something called \"WEB APIs\" in the browser environment, which is some additional capabilities provided by browsers in addition to JavaScript Engine.

\n

Javascript Web APIs

\n

These are the additional functionality, that helps us perform some additional tasks which cannot be run using the main thread. However, since our JavaScript runtime is single-threaded, it can export some tasks to the WEB APIs which helps us to respond to multiple threads. Example of some web APIs are:

\n\n

For instance, setTimeout() is called, the browser delegates the task to a different thread to calculate the time interval specified in the argument of the setTimeout() method, and once done this tread would then call the desired function in callback stack.

\n

Since JavaScript is single-threaded, the browser has the capability of delegating the task in multiple threads. But how does the event loop help in these executions? But now we are good to go ahead with Event Loop.

\n

Event Loop && Event Queue

\n

Since we know that Web APIs delegate some of the tasks to different threads, on completion of these tasks, how the main or desired functions are sent to the call stack.

\n

Event Queue is a special queue, which keeps track of all the functions queues, which are needed to be pushed into the call stack.\nThe event queue is responsible for sending new functions to the track for processing. The queue data structure is required to maintain the correct sequence in which all operations should be sent for execution.

\n

Let's take an example, in the following example, we are using a setTimeout function, which will log the \"executed\" string after 2000 milliseconds.

\n
  \n  setTimeout(function(){\n    console.log("Executed";)\n  }, 2000);
\n

Now when a setTimeout operation is processed in the call stack. On its execution, it calls a web API which fires a timer for 2000 milliseconds. After 2000 milliseconds has been elapsed, the web API, place the callback function of setTimeout in the event queue.

\n

Here need to mention that, just placing our function does not necessarily imply that the function will get executed. This function has to be pushed into the call stack for execution and here the event loop comes into the picture. The event loop waits for the function stack to be empty, once the call stack is empty this will push the first function from the event queue to the call stack, and in this way, the desired function will be called.

\n

\"Event

\n

Thus event loop works in a cyclic manner, where it continually checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

\n","frontmatter":{"title":"Understanding event loop in JavaScript","author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null},"date":"September 19, 2020","updated_date":null,"tags":["JavaScript","event-loop","call stack","event queue","multi-threaded"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/a6f240c6e67891e816aa9b6541eeb62b/58556/index.webp","srcSet":"/static/a6f240c6e67891e816aa9b6541eeb62b/61e93/index.webp 200w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/1f5c5/index.webp 400w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/58556/index.webp 800w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/99238/index.webp 1200w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/135cd/index.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Aman Agrawal","slug":"/engineering/understanding-event-loop/"}}},{"node":{"id":"435fd784-932e-5873-a64f-1906f4f4894d","html":"

Introduction

\n

Authentication is the necessary implementation for secure and genuine access to resources of web and mobile applications. It helps to authorize the user and provide access control for applications based on the user’s credentials.

\n

There are various authentication mechanisms like Email, Phone numbers, Biometrics, etc. However, Email is still considered the primary means of authentication because other mechanisms are not as optimized or in approach to everyone.

\n

So it is safe to say that most of your application users used email for creating their accounts. With that, some users tend to use disposable email services for fake account creation. These fake accounts result in additional liability to your application resources and servers.

\n

You can effectively reduce such spams for your applications by analyzing the user’s email address during registration for the following aspects:

\n\n

There are some tools available that could help you analyze the above factors, and one such tool is EVA, an Email Verification API. It is a free API and analyzes the user’s email for all of the factors mentioned above.

\n

API Details

\n

The details of Email Verification API (API) is as follows:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParametersValue
URLhttps://api.eva.pingutil.com/email
Query Param{ email: test@mail7.io }
Response{ \"status\": \"success\", \"data\": { \"email_address\": \"test@mail7.io\", \"domain\": \"mail7.io\", \"valid_syntax\": true, \"disposable\": true, \"deliverable\": true }}
\n

Valid_syntax, disposable, and deliverable are three attributes of this API, let’s see how these works:

\n

Output Parameters:

\n

valid_syntax\nThis attribute verifies the syntax of the entered email address matches the standard email address format or not. It is useful in the cases where the end-user might misspell email addresses while typing.

\n

disposable\nThis attribute verifies whether the entered email address domain belongs to the disposable email service. EVA checks the email address against a valid database of more than 4500 disposable email services. Thus, it can effectively help the developer to prevent users from registering using disposable email.

\n

deliverable\nThis attribute verifies whether the email domain has valid MX records or not. The email address is considered deliverable if the valid MX record for the email domain is found.

\n
\n

Note: A mail exchanger record (MX record) specifies the mail server responsible for accepting email messages on behalf of a domain name. It is a resource record in the Domain Name System (DNS).

\n
\n

The response received for the above three attributes of API can help you take further action. These attributes are not just limited to registration use cases, you can utilize them for other use cases like if you have an existing user base but would like to limit the spammers (who have registered using disposable emails) from commenting on the blog or accessing your application resources.

\n

This API tool has been developed and designed as a way of giving back to the developer community initiative by LoginRadius Developers. Your opinion is important to us. This way we can keep improving our product for the developer community. Please share your feedback here

\n","frontmatter":{"title":"Email Verification API (EVA)","author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null},"date":"August 31, 2020","updated_date":null,"tags":["Free tool","Developer Resources ","Verification","Email"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/9674b13085ba4d36812d596ecc764c38/58556/eva.webp","srcSet":"/static/9674b13085ba4d36812d596ecc764c38/61e93/eva.webp 200w,\n/static/9674b13085ba4d36812d596ecc764c38/1f5c5/eva.webp 400w,\n/static/9674b13085ba4d36812d596ecc764c38/58556/eva.webp 800w,\n/static/9674b13085ba4d36812d596ecc764c38/99238/eva.webp 1200w,\n/static/9674b13085ba4d36812d596ecc764c38/135cd/eva.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Aman Agrawal","slug":"/engineering/email-verification-api/"}}},{"node":{"id":"900830f6-a83d-58a9-b674-70381cdebd8d","html":"

This blog article will guide you to add \"log in with LinkedIn\"\nfunctionality in your application. Here we will be implementing Linkedin Login using NodeJS and Passport.

\n

Passport is an authentication middleware for Node, which authenticates requests and delegates all other functionality to the application. Considering the unique application requirements, Passport has stuck to authentication mechanisms known as strategies. In the blog, we will be implementing a similar strategy for Login with Linkedin.

\n

Pre -Requisites:

\n
    \n
  1. Basic Knowledge of NodeJS
    2. \n
  2. Node JS should be installed on your system.
    3. \n
\n

Steps to configure

\n
    \n
  1. Creating Linkedin APP_ID and APP_SECRET
    2. \n
  2. Go to Developer Linkedin and login with your Linkedin account.
    3. \n
  3. Once you have registered, click on the create app link and add the required details to create an app
    4. \n
\n

\"Create

\n

Provide basic details about your app:

\n\n
  cd Linkedin-node-authentication
\n
    \n
  1. In the root create a file package.json and copy the following code
    2. \n
\n

The dependencies, we are going to use in the projects are

\n\n
{\n  "name": "linkedin-login-node",\n  "version": "1.0.0",\n  "description": "Basic application for setting up Linkedin login using node and passport",\n  "main": "index.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1",\n    "start": "node server.js"\n  },\n  "author": "LoginRadius",\n  "license": "ISC",\n  "dependencies": {\n    "ejs": "^3.1.2",\n    "express": "^4.17.1",\n    "express-session": "^1.17.1",\n    "passport": "^0.4.1",\n    "passport-linkedin-oauth2": "^2.0.0"\n  }\n}
\n
    \n
  1. \n

    After this run the following command in the terminal

    \n
    npm install
    \n
    2. \n
  2. Now create a file named server.js and paste the following code
    3. \n
\n
const express = require('express');\nconst app = express();\nconst session = require('express-session');\nconst passport = require('passport');\nconst LinkedInStrategy = require('passport-linkedin-oauth2').Strategy;\nconst routes = require('./routes.js');\nconst config = require('./config')\n\napp.set('view engine', 'ejs');\n\napp.use(session({\n  resave: false,\n  saveUninitialized: true,\n  secret: 'SECRET'\n}));\n\napp.use(passport.initialize());\napp.use(passport.session());\n\npassport.serializeUser(function (user, cb) {\n  cb(null, user);\n});\n\npassport.deserializeUser(function (obj, cb) {\n  cb(null, obj);\n});\n\npassport.use(new LinkedInStrategy({\n  clientID: config.linkedinAuth.clientID,\n  clientSecret: config.linkedinAuth.clientSecret,\n  callbackURL: config.linkedinAuth.callbackURL,\n  scope: ['r_emailaddress', 'r_liteprofile'],\n}, function (token, tokenSecret, profile, done) {\n  return done(null, profile);\n}\n));\n\napp.use('/', routes);\n\nconst port = 3000;\n\napp.listen(port, () => {\n  console.log('App listening on port ' + port);\n});
\n
    \n
  1. Now create a file named routes.js in the root directory and paste the following code
    2. \n
\n
const passport = require('passport');\nconst express = require('express');\nvar router = express.Router();\n\nrouter.get('/', function (req, res) {\n  res.render('pages/index.ejs'); // load the index.ejs file\n});\n\nrouter.get('/profile', isLoggedIn, function (req, res) {\n  res.render('pages/profile.ejs', {\n    user: req.user // get the user out of session and pass to template\n  });\n});\n\nrouter.get('/auth/linkedin', passport.authenticate('linkedin', {\n  scope: ['r_emailaddress', 'r_liteprofile'],\n}));\n\nrouter.get('/auth/linkedin/callback',\n  passport.authenticate('linkedin', {\n    successRedirect: '/profile',\n    failureRedirect: '/login'\n  }));\n\nrouter.get('/logout', function (req, res) {\n  req.logout();\n  res.redirect('/');\n});\n\n\nfunction isLoggedIn(req, res, next) {\n  if (req.isAuthenticated())\n    return next();\n  res.redirect('/');\n}\n\nmodule.exports = router;
\n
    \n
  1. Create a directory views and under this create a directory named pages. Under this folder create two pages named profile.ejs and index.ejs
    2. \n
\n
// index.ejs\n<!doctype html>\n<html>\n\n<head>\n  <title>Linkedin Node Authentication</title>\n  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n  <link rel="stylesheet" type="text/css"\n    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">\n  <style>\n    .linkedin {\n      background-color: #0073b1 !important;\n      color: #fff !important;\n    }\n    .fa-linkedin-f:before,\n    .fa-linkedin:before {\n      content: "\\f0e1";\n    }\n  </style>\n</head>\n\n<body>\n  <nav class="light-blue lighten-1" role="navigation">\n    <div class="nav-wrapper container">\n      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>\n    </div>\n  </nav>\n  <div class="section no-pad-bot" id="index-banner">\n    <div class="container">\n      <br><br>\n      <div class="row center">\n        <div class="col s6 offset-s3">\n          <div class="card">\n            <div class="card-content">\n              <span class="card-title">Linkedin Login using Node and passport</span>\n            </div>\n            <div class="card-action">\n              <a href="/auth/linkedin" class="waves-effect waves-light btn social linkedin">\n                <i class="fa fa-linkedin"></i> Sign in with Linkedin\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</body>\n\n</html>
\n
<!- profile.ejs->\n<!doctype html>\n<html>\n\n<head>  \n  <title>LinkedIn Node Authentication</title>\n  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n  <link rel="stylesheet" type="text/css"\n    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">\n  <style>\n    .card:hover {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n      margin-bottom: 54px;\n    }\n  </style>\n</head>\n\n<body>\n  <nav class="light-blue lighten-1" role="navigation">\n    <div class="nav-wrapper container">\n      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>\n      <a href="/logout" class="right">Logout</a>\n    </div>\n  </nav>\n  <div class="section no-pad-bot" id="index-banner">\n    <div class="container">\n      <br><br>\n      <div class="row center">\n        <div class="col s12">\n          <div class="card">\n            <div class="card-content blue lighten-3">\n              <span class="card-title white-text"><strong><i class="large material-icons">person</i>\n                </strong></span>\n            </div>\n            <div class="card-action">\n              <h5><b><%= user.displayName %></b></h5>\n              <p><strong>Linkedin id</strong>: <%= user.id %></p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</body>\n\n</html>
\n
    \n
  1. Finally, when you are done with the above code you can now write all your app details gathered in step 1 to config.js file created in the root directory
    2. \n
\n
module.exports = {\n  'linkedinAuth': {\n    'clientID': '<CLIENT_ID>', // your App ID\n    'clientSecret': '<CLIENT_SECRET>', // your App Secret\n    'callbackURL': 'http://127.0.0.1:3000/auth/linkedin/callback'\n  }\n}
\n
    \n
  1. Let's have a final check with the repository, aftre follwoing all the steps in the same pordr the directory structure of your code will look like below:
    2. \n
\n
// Final directory structure\nLinkedin-node-authentication/\n  --|node_modules\n  --|views/\n    |--|pages/\n    |----|error.ejs\n    |----|profile.ejs\n    |----|index.ejs\n  --|config.js\n  --|package.json\n  --|package-lock.json\n  --|routes.js\n  --|server.js
\n
    \n
  1. Now run the server by executing below command in the directory Linkedin-node-authentication/
    2. \n
\n
npm start
\n
    \n
  1. Visit the browser with the URL http://localhost:3000
    2. \n
\n

\"Linkedin

\n

Click on the sign in button, and you will be asked to login through Linkedin. Once logged in you will be redirected to profile page as below:

\n

\"Linkedin

\n

The complete sample code for the above tutorial can be found here

\n","frontmatter":{"title":"LinkedIn Login using Node JS and passport","author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null},"date":"June 10, 2020","updated_date":null,"tags":["LinkedIn","Login","NodeJs","PassportJS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/717d9ce34aacf1736c240b0fa8d67551/58556/linkedin_login_node.webp","srcSet":"/static/717d9ce34aacf1736c240b0fa8d67551/61e93/linkedin_login_node.webp 200w,\n/static/717d9ce34aacf1736c240b0fa8d67551/1f5c5/linkedin_login_node.webp 400w,\n/static/717d9ce34aacf1736c240b0fa8d67551/58556/linkedin_login_node.webp 800w,\n/static/717d9ce34aacf1736c240b0fa8d67551/99238/linkedin_login_node.webp 1200w,\n/static/717d9ce34aacf1736c240b0fa8d67551/135cd/linkedin_login_node.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Aman Agrawal","slug":"/engineering/linkedin-login-using-node-passport/"}}},{"node":{"id":"8e0b3946-ce61-5423-abc4-f8abce19f7fc","html":"

Deno, the creation of Ryan Dahl is a simple, modern, and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. As Deno 1.0.0 has released, there is much-awaited curiosity amongst developers around working with this new stack.

\n

When it comes to learning a new language, the first thing that comes to our mind is the creation of a todo app, supporting CRUD functionality. So here we will be creating a very simple Todo application using the Deno.

\n

So before starting I assume you have installed Deno on your system, if not then you can find the link here.\nFor the database, we will be using the JSON file as of now to completely focus on creating web API using Deno. Not more words and now let's start.

\n

The file structure we are going to follow is as below

\n
  // Final directory structure\n  deno-todo-api/\n    --|controllers/\n      |--|todo.ts\n      |data/\n      |--|todos.ts\n      |interfaces/\n      |--|Todo.ts\n      |routes/\n      |--|todo.ts\n    --|server.ts\n
\n

At any point in time, if you are stuck somewhere, you can follow this link to get the complete code.

\n
    \n
  1. Create a directory named deno-todo-api and move into that directory
    2. \n
\n
  mkdir deno-todo-api && cd deno-todo-api
\n
    \n
  1. Create the file server.ts in the root of the directory.
    2. \n
  2. Write the following code into the server.ts file to start a server
    3. \n
\n
import { Application, Router } from "https://deno.land/x/oak@v17.1.4/mod.ts";\n\nconst app = new Application();\nconst port: number = 8080;\n\nconst router = new Router();\nrouter.get("/", ({ response }: { response: any }) => {\n  response.body = {\n    message: "Rest API tutorial with Deno",\n  };\n});\napp.use(router.routes());\napp.use(router.allowedMethods());\n\nconsole.log('running on port ', port);\nawait app.listen({ port });
\n

Unlike NodeJS Deno does not need the package.json file for dependency management. Dependency management is simplified by having a list of modules and their respective URLs.

\n

Here we have used oak, a middleware framework for Deno's HTTP server, including a router middleware.

\n
    \n
  1. server.ts is the entry point for our web application. To check it run the following command in the root directory
    2. \n
\n
deno run --allow-net server.ts
\n

Open the browser and hit the URL http://localhost:8080/

\n

You can see the following output in your browser

\n

\"Browser

\n
    \n
  1. Now following the directory structure, we will create following folders in our project with the help of below command
    2. \n
\n
mkdir controllers data interfaces routes
\n
    \n
  1. First of all, we will create dummy data to play with our todo APIs.Go to the data folder and create a file called todos.ts and the following code into it
    2. \n
\n
import { v4 } from "https://deno.land/std/uuid/mod.ts";\n// interface\nimport Todo from '../interfaces/Todo.ts';\n\nlet todos: Todo[] = [\n  {\n    id: v4.generate(),\n    task: 'Hello world app with Deno',\n    done: true,\n  },\n  {\n    id: v4.generate(),\n    task: 'Simple Rest API with Deno',\n    done: false,\n  },\n];\n\nexport default todos;
\n

We will be using v4 provided by the uuid module to generate unique IDs.

\n
    \n
  1. Now create a file in interface/ folder Todo.ts and paste the following code.
    2. \n
\n
export default interface Todo {\n  id: string,\n  task: string,\n  done: boolean,\n}
\n

What are the interfaces??

\n

An interface defines the specifications of an entity.

\n
\n

One of TypeScript’s core principles is that type checking focuses on the shape that values have. In TypeScript, interfaces fill the role of naming these types and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

\n
\n
    \n
  1. Now create a file named todo.ts in controllers/ directory and paste the following code
    2. \n
\n
import { v4 } from "https://deno.land/std/uuid/mod.ts";\n// interfaces\nimport Todo from "../interfaces/Todo.ts";\n// stubs\nimport todos from "../data/todos.ts";\n\nexport default {\n  getAll: ({ response }: { response: any }) => {\n    response.status = 200;\n    response.body = {\n      data: todos\n    };\n  },\n  create: async (\n    { request, response }: { request: any; response: any },\n  ) => {\n    const body = await request.body();\n    if (!request.hasBody) {\n      response.status = 400;\n      response.body = {\n        message: "Please provide the task detail and  status",\n      };\n      return;\n    }\n    let newTodo: Todo = {\n      id: v4.generate(),\n      task: body.value.todo,\n      done: false,\n    };\n    let data = [...todos, newTodo];\n    response.body = {\n      data\n    };\n  },\n  getById: (\n    { params, response }: { params: { id: string }; response: any },\n  ) => {\n    const todo: Todo | undefined = todos.find((t) => {\n      return t.id === params.id;\n    });\n    if (!todo) {\n      response.status = 404;\n      response.body = {\n        message: "No task found related to given ID",\n      };\n      return;\n    }\n    response.status = 200;\n    response.body = {\n      data: todo\n    };\n  },\n  update: async (\n    { params, request, response }: {\n      params: { id: string },\n      request: any,\n      response: any,\n    },\n  ) => {\n    const todo: Todo | undefined = todos.find((t) => t.id === params.id);\n    if (!todo) {\n      response.status = 404;\n      response.body = {\n        message: "No todo found",\n      };\n      return;\n    }\n\n    const body = await request.body();\n    const updatedData: { task?: string; done?: boolean } = body.value;\n\n    let newTodos = todos.map((t) => {\n      return t.id === params.id ? { ...t, ...updatedData } : t;\n    });\n    response.status = 200;\n    response.body = {\n      data: newTodos,\n    };\n  },\n  delete: (\n    { params, response }: { params: { id: string }; response: any },\n  ) => {\n    const allTodos = todos.filter((t) => t.id !== params.id);\n\n    response.status = 200;\n    response.body = {\n      data: allTodos,\n    };\n  },\n};
\n
    \n
  1. Now go to routes and create todo.ts file in it and paste the following code
    2. \n
\n
import { Router } from "https://deno.land/x/oak/mod.ts";\n\nconst router = new Router();\n// controller\nimport todoController from "../controllers/todo.ts";\n\nrouter\n  .get("/todos", todoController.getAll)\n  .post("/todos", todoController.create)\n  .get("/todos/:id", todoController.getById)\n  .put("/todos/:id", todoController.update)\n  .delete("/todos/:id", todoController.delete);\n\nexport default router;
\n
    \n
  1. Now since we have created the complete MVC project for our todo APIs, we will be going to update our main server.ts file with following code
    2. \n
\n
import { Application, Router } from "https://deno.land/x/oak/mod.ts";\nimport todoRouter from "./routes/todo.ts"; // added the router call\n\nconst app = new Application();\nconst port: number = 8080;\n\napp.use(todoRouter.routes()); // Intitialize the router with our application. \napp.use(todoRouter.allowedMethods());\n\napp.addEventListener("listen", ({ secure, hostname, port }) => {\n  const protocol = secure ? "https://" : "http://";\n  const url = `${protocol}${hostname ?? "localhost"}:${port}`;\n  console.log(`Listening on: ${port}`);\n});\n\nawait app.listen({ port });
\n
    \n
  1. Now run again the server with the following command
    2. \n
\n
deno run --allow-net server.ts
\n

Now open the postman and hit the get URL http://localhost:8080/todos/

\n

\"Browser

\n

To check the getByID router, copy the ID of any task and hit the URL like

\n

http://localhost:8080/todos/:id

\n

You will be getting output like below

\n
{\n    "data": {\n        "id": "eeacacdc-e55b-4299-aab7-5f631a2e3975",\n        "task": "Hello world app with Deno",\n        "done": true\n    }\n}
\n

Similarly, we can verify the complete crud API created. Below is the reference of all APIs created in the blog post

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
APIMethodDescription
http://localhost:8080/todos/GETFetch All todos
http://localhost:8080/todos/{id}GETFetch todo by ID
http://localhost:8080/todos/POSTCreate New todo
http://localhost:8080/todos/{id}PUTUpdate todo by ID
http://localhost:8080/todos/{id}DELETEDelete todo by ID
\n

You can find the complete code of the repo here

\n","frontmatter":{"title":"Create REST API using deno ","author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null},"date":"June 08, 2020","updated_date":null,"tags":["Deno","REST","API"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4a65a81c1ab5e2211f19e9aeeb888f6b/58556/task.webp","srcSet":"/static/4a65a81c1ab5e2211f19e9aeeb888f6b/61e93/task.webp 200w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/1f5c5/task.webp 400w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/58556/task.webp 800w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/99238/task.webp 1200w,\n/static/4a65a81c1ab5e2211f19e9aeeb888f6b/135cd/task.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Aman Agrawal","slug":"/engineering/create-rest-api-in-deno/"}}},{"node":{"id":"f652e592-7e69-5c0b-9e26-fa0afe59d322","html":"

Social login is the need for simplifying your registration process and increasing the conversion rates. Here we will be implementing Facebook Login using NodeJS and Passport.

\n

Passport is authentication middleware for Node, which authenticates requests and delegates all other functionality to the application. Considering the unique application requirements, passport has stuck to authentication mechanisms known as strategies. In the blog, we will be implementing a similar strategy for Login with Facebook.

\n

Pre -Requisites:

\n
    \n
  1. Basic Knowledge of NodeJS
    2. \n
  2. Node JS should be installed on your system.
    3. \n
\n

Steps to configure

\n
    \n
  1. Creating Facebook APP_ID and APP_SECRET
    2. \n
  2. Go to Facebook and login with your Facebook account.
    3. \n
  3. Once you have registered, click on the create app link and you will need to enter the details in the following pop-up
    4. \n
\n

\"Create

\n\n

\"Add

\n\n

\"App

\n
    \n
  1. \n

    Now enough, let's move to code, First of all, create a directory named facebook-node-authentication

    \n
    mkdir facebook-node-authentication
    \n
    2. \n
  2. Move to the directory facebook-node-authentication/
    3. \n
\n
  cd facebook-node-authentication
\n
    \n
  1. In the root create a file package.json and copy the following code
    2. \n
\n

The dependencies, we are going to use in the projects are

\n\n
{\n  "name": "facebook_login_node",\n  "version": "1.0.0",\n  "description": "\\"Basic application for setting up Facebook logij using node and passport\\"",\n  "main": "index.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1",\n    "start": "node server.js"\n  },\n  "author": "",\n  "license": "ISC",\n  "dependencies": {\n    "ejs": "^3.1.2",\n    "express": "^4.17.1",\n    "express-session": "^1.17.1",\n    "passport": "^0.4.1",\n    "passport-facebook": "^3.0.0"\n  }\n}
\n
    \n
  1. \n

    After this run the following command in the terminal

    \n
    npm install
    \n
    2. \n
  2. Now create a file named server.js and paste the following code
    3. \n
\n
const express = require('express');\nconst app = express();\nconst session = require('express-session');\nconst passport = require('passport');\nconst FacebookStrategy = require('passport-facebook').Strategy;\nconst routes = require('./routes.js');\nconst config = require('./config')\n\napp.set('view engine', 'ejs');\n\napp.use(session({\n  resave: false,\n  saveUninitialized: true,\n  secret: 'SECRET'\n}));\n\napp.use(passport.initialize());\napp.use(passport.session());\n\npassport.serializeUser(function (user, cb) {\n  cb(null, user);\n});\n\npassport.deserializeUser(function (obj, cb) {\n  cb(null, obj);\n});\n\npassport.use(new FacebookStrategy({\n    clientID: config.facebookAuth.clientID,\n    clientSecret: config.facebookAuth.clientSecret,\n    callbackURL: config.facebookAuth.callbackURL\n  }, function (accessToken, refreshToken, profile, done) {\n    return done(null, profile);\n  }\n));\n\napp.use('/', routes);\n\nconst port = 3000;\n\napp.listen(port, () => {\n  console.log('App listening on port ' + port);\n});
\n
    \n
  1. Now create a file named route.js in the root directory and paste the following code
    2. \n
\n
const passport = require('passport');\nconst express = require('express');\nvar router = express.Router();\n\nrouter.get('/', function (req, res) {\n  res.render('pages/index.ejs'); // load the index.ejs file\n});\n\nrouter.get('/profile', isLoggedIn, function (req, res) {\n  res.render('pages/profile.ejs', {\n    user: req.user // get the user out of session and pass to template\n  });\n});\n\nrouter.get('/error', isLoggedIn, function (req, res) {\n  res.render('pages/error.ejs');\n});\n\nrouter.get('/auth/facebook', passport.authenticate('facebook', {\n  scope: ['public_profile', 'email']\n}));\n\nrouter.get('/auth/facebook/callback',\n  passport.authenticate('facebook', {\n    successRedirect: '/profile',\n    failureRedirect: '/error'\n  }));\n\nrouter.get('/logout', function (req, res) {\n  req.logout();\n  res.redirect('/');\n});\n\nfunction isLoggedIn(req, res, next) {\n  if (req.isAuthenticated())\n    return next();\n  res.redirect('/');\n}\n\nmodule.exports = router;
\n
    \n
  1. Create a directory views and under this create a directory named pages. Under this folder create two pages named profile.ejs and index.ejs
    2. \n
\n
// index.ejs\n<!doctype html>\n<html>\n\n<head>\n  <title>Facebook Node Authentication</title>\n  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n  <link rel="stylesheet" type="text/css"\n    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">\n  <style>\n    .facebook {\n      background-color: #3b5998 !important;\n      color: #fff !important;\n    }\n    .fa-facebook-f:before,\n    .fa-facebook:before {\n      content: "\\f09a";\n    }\n  </style>\n</head>\n\n<body>\n  <nav class="light-blue lighten-1" role="navigation">\n    <div class="nav-wrapper container">\n      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>\n    </div>\n  </nav>\n  <div class="section no-pad-bot" id="index-banner">\n    <div class="container">\n      <br><br>\n      <div class="row center">\n        <div class="col s6 offset-s3">\n          <div class="card">\n            <div class="card-content">\n              <span class="card-title">Facebook Login using Node and passport</span>\n            </div>\n            <div class="card-action">\n              <a href="/auth/facebook" class="waves-effect waves-light btn social facebook">\n                <i class="fa fa-facebook"></i> Sign in with facebook\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</body>\n\n</html>
\n
<!- profile.ejs->\n<!doctype html>\n<html>\n\n<head>  \n  <title>Facebook Node Authentication</title>\n  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n  <link rel="stylesheet" type="text/css"\n    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">\n  <style>\n    .card:hover {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n      margin-bottom: 54px;\n    }\n  </style>\n</head>\n\n<body>\n  <nav class="light-blue lighten-1" role="navigation">\n    <div class="nav-wrapper container">\n      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>\n      <a href="/logout" class="right">Logout</a>\n    </div>\n  </nav>\n  <div class="section no-pad-bot" id="index-banner">\n    <div class="container">\n      <br><br>\n      <div class="row center">\n        <div class="col s12">\n          <div class="card">\n            <div class="card-content blue lighten-3">\n              <span class="card-title white-text"><strong><i class="large material-icons">person</i>\n                </strong></span>\n            </div>\n            <div class="card-action">\n              <h5><b><%= user.displayName %></b></h5>\n              <p><strong>Facebook id</strong>: <%= user.id %></p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</body>\n\n</html>
\n
    \n
  1. Finally, when you are done with the above code you can now write all your app details gathered in step 1 to config.js file created in the root directory
    2. \n
\n
module.exports = {\n\t'facebookAuth': {\n\t\t'clientID':  '<APP_ID>', // your App ID\n\t\t'clientSecret':  '<APP_SECRET>', // your App Secret\n\t\t'callbackURL':  'http://localhost:3000/auth/facebook/callback'\n\t}\n}
\n
    \n
  1. Let's have a final check with the repository, aftre follwoing all the steps in the same pordr the directory structure of your code will look like below:
    2. \n
\n
// Final directory structure\nfacebook-node-authentication/\n  --|node_modules\n  --|views/\n    |--|pages/\n    |----|error.ejs\n    |----|profile.ejs\n    |----|index.ejs\n  --|config.js\n  --|package.json\n  --|package-lock.json\n  --|routes.js\n  --|server.js
\n
    \n
  1. Now run the server by executing below command in the directory facebook-node-authentication/
    2. \n
\n
npm start
\n
    \n
  1. Visit the browser with the URL http://localhost:3000
    2. \n
\n

\"Facebook

\n

\"Facebook

\n

You can found the complete code used in this tutorial on our Github Repo

\n","frontmatter":{"title":"Facebook authentication using NodeJS and PassportJS","author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null},"date":"June 01, 2020","updated_date":null,"tags":["Facebook","NodeJs","Authentication","PassportJS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/adba71048e93f4d775b486dff18c1ca8/58556/facebook_node_passport.webp","srcSet":"/static/adba71048e93f4d775b486dff18c1ca8/61e93/facebook_node_passport.webp 200w,\n/static/adba71048e93f4d775b486dff18c1ca8/1f5c5/facebook_node_passport.webp 400w,\n/static/adba71048e93f4d775b486dff18c1ca8/58556/facebook_node_passport.webp 800w,\n/static/adba71048e93f4d775b486dff18c1ca8/99238/facebook_node_passport.webp 1200w,\n/static/adba71048e93f4d775b486dff18c1ca8/135cd/facebook_node_passport.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Aman Agrawal","slug":"/engineering/facebook-authentication-using-node-and-passport/"}}}]},"authorYaml":{"id":"Aman Agrawal","bio":"Aman is a software developer at LoginRadius and keen to learn and work upon new technologies.","github":"aman-agrwl","stackoverflow":null,"linkedin":null,"medium":null,"twitter":null,"avatar":null}},"pageContext":{"id":"Aman Agrawal","__params":{"id":"aman-agrawal"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}