{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/36","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"What is Deno? Deno is a JavaScript/TypeScript runtime with secure defaults and great developer experience. It's built on V8, Rust, and Tokio…","fields":{"slug":"/engineering/build-a-cli-tool-using-deno/"},"html":"

What is Deno?

\n

Deno is a JavaScript/TypeScript runtime with secure defaults and great developer experience. It's built on V8, Rust, and Tokio.\nI suggest you watch these talks by Ryan: He talks about his mistakes with Nodejs here and a more in-depth look into deno here

\n
Features
\n\n

Let's Build Something!!!

\n

In this article, we're going to build a simple cli tool to demonstrate some of the features of deno. Our cli will be interacting with a COVID API to fetch live data.

\n
\n

Requirement: make sure you have deno installed. If you don't, refer to this link. It's pretty straightforward.

\n
\n

Deno has the entry file mod.ts so we will follow the same in this article if you are following this article along with the coding you can create a folder named covid-cli, inside that folder you can create a file called mod.ts and copy the below code there.

\n
const { args } = Deno;\nimport { parse } from "https://deno.land/std/flags/mod.ts";\n\nconsole.dir(parse(args));
\n

Here the parse(args, options = {}); contains two parameters where args is an Array and options is an object, let try to run the above code using this cmd.

\n
deno run mod.ts arg1 -f hello --flag World --booleanFlag
\n

After running the above code you will see the output as

\n
{ _: [ "arg1" ], f: "hello", flag: "World", booleanFlag: true }
\n
\n

The first property in the object is always an array containing all arguments that did not have an option associated with them(i.e it doesn't match -f or --flag). If you do not pass a corresponding value to a flag, it defaults to true.

\n
\n

I will be using the this postman doc for all the COVID related API and we will perform the below to action through our CLI.

\n
    \n
  1. A summary of new and total cases globally updated daily.
    2. \n
  2. A summary of new and total cases per country updated daily.
    3. \n
\n

Let's write out the function for our first command, so our mod.ts file will look like this.

\n
const { args } = Deno;\nimport { parse } from "https://deno.land/std/flags/mod.ts";\n\n// flags:\n// -h, --help: display help message\n// -g, --global: display global stats\n// -c, --country: get data of mentioned country\n\nconst BASE_URL: string = "https://api.covid19api.com/"\nconst parsedArgs = parse(args)\n\nasync function getGlobalStats() {\n    const res = await fetch(`${BASE_URL}summary`)\n    const data = await res.json();\n    console.log(data["Global"])\n}
\n

Here, we have an async function that returns the data from our API call. We're making a fetch request (yes, deno has browser functionality in-built) to the API endpoint to get the global stat of covid19.

\n

The function for the second command looks very similar, just we need to filter our data only for a particular country which is provided.

\n
async function getCountryStats(country: string) {\n  if (country) {\n    const res = await fetch(`${BASE_URL}summary`);\n    const data = await res.json();\n    const index = data["Countries"].findIndex((c: any) => c.Country.toLowerCase() === country.toLowerCase())\n    if (index !== -1) {\n        console.log(data["Countries"][index])\n    } else {\n        console.log("Country Not Found")\n    }\n  } else {\n    console.log("Country Name is needed")\n  }\n}
\n

We will now write our main() function. We have a switch statement to check the first flag that was passed and calls the appropriate function. The default case simply displays a welcome message. Let add the below code in our mod.ts file

\n
async function main() {\n  switch (Object.keys(parsedArgs)[1]) {\n    case "help":\n    case "h":\n      console.log(displayHelpMsg());\n      break;\n    case "global":\n    case "g":\n      await getGlobalStats();\n      break;\n    case "country":\n    case "c":\n       let country = parsedArgs.c || parsedArgs.country || ""\n       await getCountryStats(country)\n       break;\n    default:\n       console.log(displayHelpMsg());\n  }\n}\n\nmain()
\n

And our displayHelpMsg() will look something like this

\n
function displayHelpMsg() {\n  return "flags:\\n-h, --help: display help message\\n-g, --global: display global stats\\n-c, --country: get data of mentioned country ";\n}
\n

Testing Time!!!

\n

To test our program, we're going to run $ deno run --allow-net mod.ts -g. We should get the following result:

\n\n

\n \n \n

\n\n

\n here. In conclusion, Deno is a very exciting project especially because you get all the benefits of typescript out of the box without the need to compile your files to js.

\n

You can build a lot with it, ranging from cli Programs to HTTP servers. Do have a look at one of my blog where I have built a basic calculator app using the abc module.

\n","frontmatter":{"date":"June 08, 2020","updated_date":null,"description":null,"title":"Build A Simple CLI Tool using Deno","tags":["Deno","CLI","Programming"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/313a3b2de31b5d15db618e72b377a867/ee604/cli-tool.png","srcSet":"/static/313a3b2de31b5d15db618e72b377a867/69585/cli-tool.png 200w,\n/static/313a3b2de31b5d15db618e72b377a867/497c6/cli-tool.png 400w,\n/static/313a3b2de31b5d15db618e72b377a867/ee604/cli-tool.png 800w,\n/static/313a3b2de31b5d15db618e72b377a867/5493e/cli-tool.png 860w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"excerpt":"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…","fields":{"slug":"/engineering/create-rest-api-in-deno/"},"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

\n \n \n

\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

\n \n \n

\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":{"date":"June 08, 2020","updated_date":null,"description":null,"title":"Create REST API using deno ","tags":["Deno","REST","API"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/760c77dba96d96a216f28565d2a442eb/ee604/task.png","srcSet":"/static/760c77dba96d96a216f28565d2a442eb/69585/task.png 200w,\n/static/760c77dba96d96a216f28565d2a442eb/497c6/task.png 400w,\n/static/760c77dba96d96a216f28565d2a442eb/ee604/task.png 800w,\n/static/760c77dba96d96a216f28565d2a442eb/f3583/task.png 1200w,\n/static/760c77dba96d96a216f28565d2a442eb/e4d72/task.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null}}}},{"node":{"excerpt":"We're delightfully announcing the open source automation suite to test all the standard authentication cases of LoginRadius Identity…","fields":{"slug":"/engineering/opensource-automation-for-identity-experience-framework/"},"html":"

We're delightfully announcing the open source automation suite to test all the standard authentication cases of LoginRadius Identity Experience Framework.\nThe details have been given below.

\n\n

idx auto tester

\n

About LoginRadius Identity Experience Framework

\n

Identity Experience Framework is a ready-to-use solution for all the necessary actions. It is a set of registration, authentication, and related web pages such as forgot password, profile. It allows you to customize the UI and UX elements as per your requirements.

\n

Why to use this automation suite?

\n

The Standard Authentication Functionality which is available with LoginRadius Identity Experience Framework can be tested via using these automation scripts. By running all the scripts, you can ensure your implementation.

\n

What is the technology/framework used to build this automation suite?

\n\n

Test cases covered:

\n\n

Note: Currently, the test cases are scripted to run with only 'Required Email Verification' flow.

\n

What's next?

\n

We are continuously working on improving this automation suite and soon we will be announcing the roadmap for automation suite.

\n","frontmatter":{"date":"June 04, 2020","updated_date":null,"description":null,"title":"Automation for Identity Experience Framework is now open-source !!!","tags":["OpenSource","Automation"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/cf1bf1337d69f66b3411484def3a3c58/ee604/automation_ief.png","srcSet":"/static/cf1bf1337d69f66b3411484def3a3c58/69585/automation_ief.png 200w,\n/static/cf1bf1337d69f66b3411484def3a3c58/497c6/automation_ief.png 400w,\n/static/cf1bf1337d69f66b3411484def3a3c58/ee604/automation_ief.png 800w,\n/static/cf1bf1337d69f66b3411484def3a3c58/f3583/automation_ief.png 1200w,\n/static/cf1bf1337d69f66b3411484def3a3c58/e4d72/automation_ief.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudhey Sharma","github":"sudheysharma","avatar":null}}}},{"node":{"excerpt":"Hello, let's create a simple web app using deno, In this blog, I will be using the Deno Third-Party Module called abc for creating a simple…","fields":{"slug":"/engineering/a-webapp-in-deno/"},"html":"

Hello, let's create a simple web app using deno, In this blog, I will be using the Deno Third-Party Module called abc for creating a simple web application.

\n

I am assuming that you are familiar with the basic setup of deno. If not you can start with basic deno installation from here

\n

Simple Web Application

\n

So without wasting time Let's jump into the code and write a simple hello world program using the abc module.

\n

Create a file index.ts, and copy the code there.

\n
import { Application } from "https://deno.land/x/abc@v1.0.0-rc10/mod.ts";\n\nconst app = new Application();\n\napp\n  .get("/hello", (c) => {\n    return "Hello, Abc!";\n  })\n  .start({ port: 8000 });
\n

After saving the file you can run the code using the below cmd

\n
deno run --allow-net=0.0.0.0:8000 index.ts
\n

Explanation:\nDeno is secure by default. Therefore, unless you specifically enable it, a deno module has no file, network, or environment access for example. Access to security-sensitive areas or functions requires the use of permissions to be granted to a deno process on the command line.

\n

--allow-net=\\<allow-net> Allow network access. You can specify an optional, comma-separated list of domains to provide a whitelist of allowed domains. For more information on the different kind of permissions needed in the deno you can visit Permissions in Demo

\n

Now once you run the above cmd you can see the Hello, Abc! in the browser by redirecting to http://localhost:8000/hello

\n

Let's Go Deeper!!!

\n

Now let's try to serve the static file using the abc module. In the above example, app will have lots of different methods that we can use, one of them is static(), it used to serve the static files.

\n

Let us create a folder called public in the root of the project. And inside that create an index.html file. Your index.html will look something like this.

\n
<!doctype html>\n<html>\n    <head>\n        <title>Deno Web Application</title>\n    </head>\n    \n    <body>\n    <div>\n        <h1>Deno Web Application</h1>\n    </div>\n    </body>\n</html>
\n

After creating this file let's modify our index.tsx file by adding the below code.

\n
import { Application } from "https://deno.land/x/abc@v1.0.0-rc10/mod.ts";\n\nconst app = new Application();\n\napp\n  .get("/hello", (c) => {\n    return "Hello World"\n  })\n  .static("/", "./public")\n  .start({ port: 8000 });
\n

Explanation:\nAs you can see .static(\"/\", \"./public\") we have added this route / and we are serving our static file using the static() method provided by the abc module.

\n

static() registers a new route with path prefix to serve static files from the provided root directory.

\n

Let's try to run this using the previous cmd that is

\n
deno run --allow-net=0.0.0.0:8000 index.ts
\n

Oops!! once you try to run this it will compile successfully but when you visit this path\nhttp://localhost:8000/index.html, you will get below error in the browser.

\n
{"statusCode":500,"error":"Internal Server Error","message":"read access to <CWD>, run again with the --allow-read flag"}
\n

It's because as we know deno requires the permission to read the file from the system. Hence to run the above cmd with --allow-read flag will solve our problem. So let's use this cmd to compile our index file.

\n
deno run --allow-read --allow-net=0.0.0.0:8000 index.ts
\n

After successful compile, you will see the output as below.

\n

\n \n \n

\n

Creating a basic calculator app

\n

Hence after the successful serving of our static file, we can also add js in it. Let start with the basic calculator app for now.

\n

Firstly Let's modify our index.html file and add the below code

\n
<html>\n  <head>\n    <script src="script.js"></script>\n    <link rel="stylesheet" type="text/css" href="style.css">\n  </head>\n  <!-- create table -->\n  <body>\n    <div class="title">Deno Calculator App</div>\n    <table border="1">\n      <tr>\n        <td colspan="3"><input type="text" id="result" /></td>\n        <!-- clr() function will call clr to clear all value -->\n        <td><input type="button" value="c" onclick="clr()" /></td>\n      </tr>\n      <tr>\n        <!-- create button and assign value to each button -->\n        <!-- dis("1") will call function dis to display value -->\n        <td><input type="button" value="1" onclick="dis('1')" /></td>\n        <td><input type="button" value="2" onclick="dis('2')" /></td>\n        <td><input type="button" value="3" onclick="dis('3')" /></td>\n        <td><input type="button" value="/" onclick="dis('/')" /></td>\n      </tr>\n      <tr>\n        <td><input type="button" value="4" onclick="dis('4')" /></td>\n        <td><input type="button" value="5" onclick="dis('5')" /></td>\n        <td><input type="button" value="6" onclick="dis('6')" /></td>\n        <td><input type="button" value="-" onclick="dis('-')" /></td>\n      </tr>\n      <tr>\n        <td><input type="button" value="7" onclick="dis('7')" /></td>\n        <td><input type="button" value="8" onclick="dis('8')" /></td>\n        <td><input type="button" value="9" onclick="dis('9')" /></td>\n        <td><input type="button" value="+" onclick="dis('+')" /></td>\n      </tr>\n      <tr>\n        <td><input type="button" value="." onclick="dis('.')" /></td>\n        <td><input type="button" value="0" onclick="dis('0')" /></td>\n        <!-- solve function call function solve to evaluate value -->\n        <td><input type="button" value="=" onclick="solve()" /></td>\n        <td><input type="button" value="*" onclick="dis('*')" /></td>\n      </tr>\n    </table>\n  </body>\n</html>
\n

As you can see the above code we have already imported our js and css inside to so Let's create JS file called script.js and add the following functions in it.

\n
//function that display value\nfunction dis(val) {\n  document.getElementById("result").value += val;\n}\n\n//function that evaluates the digit and return result\nfunction solve() {\n  let x = document.getElementById("result").value;\n  let y = eval(x);\n  document.getElementById("result").value = y;\n}\n\n//function that clear the display\nfunction clr() {\n  document.getElementById("result").value = "";\n}
\n

And also add some css into it by creating style.css file.

\n
.title {\n  margin-bottom: 10px;\n  text-align: center;\n  width: 210px;\n  color: #0d8dcf;\n  border: solid black 2px;\n}\n\ninput[type="button"] {\n  background-color: #0d8dcf;\n  color: black;\n  border: solid black 2px;\n  width: 100%;\n}\n\ninput[type="text"] {\n  background-color: white;\n  border: solid black 2px;\n  width: 100%;\n}
\n

Great!!! Our calculator app is now almost ready, let's save all the file and reload the http://localhost:8000/index.html.

\n

You can see our calculator app in the browser like below.

\n

\n \n \n

\n

If you'd like to see the full code, the repository is linked here.

\n","frontmatter":{"date":"June 03, 2020","updated_date":null,"description":null,"title":"Creating a Web Application using Deno","tags":["Deno"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.8018018018018018,"src":"/static/f298cd015f4f5a18176173e399b9bd68/14b42/deno.jpg","srcSet":"/static/f298cd015f4f5a18176173e399b9bd68/f836f/deno.jpg 200w,\n/static/f298cd015f4f5a18176173e399b9bd68/2244e/deno.jpg 400w,\n/static/f298cd015f4f5a18176173e399b9bd68/14b42/deno.jpg 800w,\n/static/f298cd015f4f5a18176173e399b9bd68/47498/deno.jpg 1200w,\n/static/f298cd015f4f5a18176173e399b9bd68/ec6c5/deno.jpg 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"excerpt":"Hello, Deno Deno is a new platform for writing applications using JavaScript and TypeScript. It is based on the V8 JavaScript engine and the…","fields":{"slug":"/engineering/hello-world-deno/"},"html":"

Hello, Deno

\n

Deno is a new platform for writing applications using JavaScript and TypeScript. It is based on the V8 JavaScript engine and the Rust.

\n

Deno’s lowest level binding layer to the system is tied to promises (called ops). Deno is secure by default, provides first-class TypeScript support, has built-in utilities like a dependency inspector, and supports third-party modules such as lodash .

\n

Btw, this is the best damn geeky one-liner code to explain what is Deno. Totally cool.

\n

\n \n \n

\n

Installation

\n

Deno works on macOS, Linux, and Windows. Deno is a single binary executable and it has no external dependencies.

\n

See all installation.

\n

Install Deno on Windows 10/8/7

\n

Launch Windows PowerShell and run the following command to install Deno on Windows 10/8/7

\n
iwr https://deno.land/x/install/install.ps1 -useb | iex
\n

Install Deno on Linux and macOS

\n

Launch terminal and run the following command to install Deno on Linux and Mac

\n
curl -fsSL https://deno.land/x/install/install.sh | sh
\n

Open a new terminal and run deno. You should get a > prompt. Type exit.

\n

After installing deno on your system we just need to create a simple Hello World program by using the following steps :

\n

Step 1. Create a Folder as per your project name by using command prompt

\n
mkdir HelloWorldDeno
\n

Step 2. Create a typeScript file and name it index.ts.

\n

Step 3. Add the following code in index.ts.

\n
const helloWorld = (name: string = "world") => {\n  console.log(`Hello ${name}!!`);\n}\n\nhelloWorld();\n\nhelloWorld("Friend");
\n

Step 4. Run the following project by using the following command

\n
deno run index.ts
\n

You can check the result here

\n

\n \n \n

\n

Yupppp it works this is your first Deno program !!

\n","frontmatter":{"date":"June 02, 2020","updated_date":null,"description":null,"title":"Hello world with Deno","tags":["Deno","HelloWorld","NodeJs"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/9e27529ebed74724b5d86438b9445e49/ee604/deno.png","srcSet":"/static/9e27529ebed74724b5d86438b9445e49/69585/deno.png 200w,\n/static/9e27529ebed74724b5d86438b9445e49/497c6/deno.png 400w,\n/static/9e27529ebed74724b5d86438b9445e49/ee604/deno.png 800w,\n/static/9e27529ebed74724b5d86438b9445e49/f3583/deno.png 1200w,\n/static/9e27529ebed74724b5d86438b9445e49/e4d72/deno.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ashish Sharma","github":"ashish8947","avatar":null}}}},{"node":{"excerpt":"Social login is the need for simplifying your registration process and increasing the conversion rates. Here we will be implementing…","fields":{"slug":"/engineering/facebook-authentication-using-node-and-passport/"},"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

\n \n \n

\n\n

\n \n \n

\n\n

\n \n \n

\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

\n \n \n

\n

\n \n \n

\n

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

\n","frontmatter":{"date":"June 01, 2020","updated_date":null,"description":null,"title":"Facebook authentication using NodeJS and PassportJS","tags":["Facebook","NodeJs","Authentication","PassportJS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/e5b200d627ef5a68314069ffe94b984f/ee604/facebook_node_passport.png","srcSet":"/static/e5b200d627ef5a68314069ffe94b984f/69585/facebook_node_passport.png 200w,\n/static/e5b200d627ef5a68314069ffe94b984f/497c6/facebook_node_passport.png 400w,\n/static/e5b200d627ef5a68314069ffe94b984f/ee604/facebook_node_passport.png 800w,\n/static/e5b200d627ef5a68314069ffe94b984f/f3583/facebook_node_passport.png 1200w,\n/static/e5b200d627ef5a68314069ffe94b984f/e4d72/facebook_node_passport.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"

Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.

\n

What does it mean for user authentication?

\n

On one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).

\n

On the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.

\n

In this article, we’ll discuss:

\n\n

How is User Authentication Affected?

\n

Third-party cookie restrictions affect user authentication in three ways, as follows.

\n

External Identity Providers

\n

If your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.

\n

Web SSO

\n

If you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.

\n

If you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.

\n

For example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.

\n

Federated SSO

\n

Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.

\n

Usually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.

\n

For example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.

\n
\n

Note: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).

\n
\n

Chrome’s Alternatives for Third-Party Cookies

\n

Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.

\n

Specific to authentication, Google recommends the following:

\n
    \n
  1. Cookies Having Independent Partitioned State (CHIPS)
    2. \n
  2. Storage Access API
    3. \n
  3. Related Website Sets
    4. \n
  4. Federated Credential Management (FedCM) API
    5. \n
\n

Cookies Having Independent Partitioned State (CHIPS)

\n

CHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.

\n

For example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.

\n

If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.

\n

You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.

\n

If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.

\n

However, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.

\n

Storage Access API

\n

With Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.

\n

Storage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.

\n

It is most suitable when loading cross-site resources and interactions, such as:

\n

Verifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.

\n

As it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.

\n

Related Website Sets

\n

With Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.

\n

Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets

\n

It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.

\n

It is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.

\n

The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.

\n

If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.

\n

Related Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.

\n

Federated Credential Management (FedCM) API

\n

FedCM API enables federated SSO without third-party cookies.

\n

With FedCM API, a user follows these steps for authentication:

\n
    \n
  1. The User navigates to a Service Provider (SP) — aka., Relying Party (RP)
    2. \n
  2. As the user requests to authenticate, the SP requests the browser through FedCM API to initiate authentication.
    3. \n
  3. The browser displays a list of available identity providers (supported by the RP), such as social IdPs like Google, Apple, LinkedIn, and Facebook, or other OAuth IdPs like LoginRadius.
    4. \n
  4. Once the user selects an IdP, the browser communicates with the IdP. Upon valid authentication, the IdP generates a secure token.\nThe browser delivers this secure token to the RP to facilitate user authorization.
    5. \n
\n

You can access a user demo of FedCM here: FedCM.

\n

For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.

\n\n

Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.

\n

We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.

\n

Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.

\n

In Conclusion

\n

The proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.

\n

Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.

\n

From LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.

\n

Glossary

\n

Top-level site: It is the primary site a user has visited.

\n

First-party cookie: A cookie set by the top-level site.

\n

Third-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.

\n

References

\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":210,"currentPage":36,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}