{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/130","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"This blog article will guide you to add \"log in with LinkedIn\"\nfunctionality in your application. Here we will be implementing Linkedin…","fields":{"slug":"/engineering/linkedin-login-using-node-passport/"},"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

\n \n \n

\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

\n \n \n

\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

\n Hello world with Deno

\n

Part 1: Read a file and print text out of it

\n

First, add a file called quotes.txt in the folder you want to run the Deno code, We will read these quotes with the help of Deno

\n
Don't worry about what anybody else is going to do. The best way to predict the future is to invent it. - Alan Kay\nPremature optimization is the root of all evil in programming. - Donald Knuth\nClarity and brevity sometimes are at odds. When they are, I choose clarity.  - Jacob Kaplan-Moss\nOptimism is an occupational hazard of programming; feedback is the treatment. - Kent Beck\nA lot of times, people don't know what they want until you show it to them.  - Steve Jobs\nNine people can't make a baby in a month. - Fred Brooks\nA clever person solves a problem. A wise person avoids it. - Albert Einstein
\n

And then create an index.ts file in which we will write Deno code, we can also write Deno code in javascript instead of Typescript, but as Deno is built on TypeScript we are using Typescript here

\n
const getQuotes = async (fileName: string): Promise<Array<string>> => {\n const decoder = new TextDecoder("utf-8");\n\n const text: string = decoder.decode(await Deno.readFile(fileName));\n return text.split("\\n");\n};\n\nconst quotesArr: Array<string> = await getQuotes("quotes.txt");\n\nconst randomQuote: string =  quotesArr[Math.floor(Math.random() * quotesArr.length)];\nconsole.log(randomQuote);
\n

In the getQuotes function, we are using Deno.readFile #readfile to read the contents of a file as an array of bytes and using TextDecoder to convert the bytes to string and then splitting it in a string array and return

\n

Then we are just picking a randomQuote with Math.random and console.log that on our screen

\n

To run the above code we need to put --allow-read flag in our command as shown below because we need to access the local filesystem to read the file.

\n
deno run --allow-read index.ts
\n

Deno is secure by default, with no file, network, or environment access unless explicitly enabled. You can run deno run --help to see all the available flags for different permissions

\n

Once your program run initially you will see that Deno is compiling the index.ts file and printing a random quote from quotes.txt, if you run the programme again without changing the code it will not compile it again and will just show another random quote.

\n
deno run --allow-read index.ts\nCompile file:///C:/Users/PuneetSingh/Documents/deno_fs/index.ts\nPremature optimization is the root of all evil in programming. - Donald Knuth\n\n\ndeno run --allow-read index.ts\nA lot of times, people don't know what they want until you show it to them.  - Steve Jobs
\n

Part 2: Create a file and write text in it

\n

Let's create another TypeScript file write.ts and put the below code in it

\n
import { readLines } from "https://deno.land/std@v0.52.0/io/bufio.ts";\n\nconsole.log('Start typing...');\n\nconst encoder = new TextEncoder();\nawait Deno.writeFile("input.txt", new Uint8Array());\n\n// Listen to stdin input by readLines\nfor await(const line of readLines(Deno.stdin)) {\n   const data = encoder.encode(line+"\\n");\n   await Deno.writeFile("input.txt", data, {append: true});\n   console.log("Wrote the above text in input.txt\\n") \n}
\n

In the above code we are using readLines to raed user input line by line, Every time we run the code Deno.writeFile(\"input.txt\", new Uint8Array()) will create an empty input.txt file in the folder.

\n

Then const line of readLines(Deno.stdin) in a loop will wait for the user to input any text, as we will give any input Deno.writeFile with {append: true} is used to append data in input.txt

\n

Let's run the program, Once we run it, whatever text we will give to the program through standard input will be written to input.txt

\n
deno run --allow-write write.ts\n\nStart typing...\nThis is a demo for Deno\nWrote the above text in input.txt\n\nIn this demo, we will write some text in a file\nWrote the above text in input.txt
\n

If you check the input.txt file you will found the content which was given as input

\n
This is a demo for Deno\nIn this demo, we will write some text in a file
\n

Now you know how to read from a text file and how to write in a text file with Deno, You can found the complete source code used in the above blog on our Github Repo

\n","frontmatter":{"date":"June 09, 2020","updated_date":null,"description":null,"title":"Read and Write in a local file with Deno","tags":["Deno"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6666666666666667,"src":"/static/051c3d60bd1877dbdbc0c04965cdc4db/2a4de/deno_file_system.png","srcSet":"/static/051c3d60bd1877dbdbc0c04965cdc4db/69585/deno_file_system.png 200w,\n/static/051c3d60bd1877dbdbc0c04965cdc4db/497c6/deno_file_system.png 400w,\n/static/051c3d60bd1877dbdbc0c04965cdc4db/2a4de/deno_file_system.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Puneet Singh","github":"puneetsingh24","avatar":null}}}},{"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}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"

Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.

\n

We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.

\n

The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.

\n

So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.

\n

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.

\n

The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.

\n

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!

\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},"pageContext":{"limit":6,"skip":774,"currentPage":130,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}