{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/128","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"There is a constant need for compliance and security in every industry that uses customer identities for tracking records, transactions, or…","fields":{"slug":"/identity/loginradius-consumer-audit-trail-data-analysis/"},"html":"

There is a constant need for compliance and security in every industry that uses customer identities for tracking records, transactions, or any other activity. As such the advantages of audit trails are multidimensional - from generating historical reports, crime investigation, future budget planning, audit compliance, risk management, and many more.

\n

The LoginRadius’ recently announced Consumer Audit Trail detects threats in real-time, manages incident response, and if need be, even performs a forensic investigation on past security incidents. It also turns log entries, and events from security systems, into actionable information.

\n

Additionally, it prepares audits for compliance purposes, provides the functionality to track user engagement, and gain an in-depth understanding of customer behavioral metrics.

\n

Intent Behind the Launch

\n

The ability to track back records to their source comes with a lot of benefits. Transparency, compliance, accountability, and security of sensitive information are a few of them.

\n

Through real-time monitoring, businesses can automate audit logs and use them to identify unusual activities or operational issues. 

\n

In addition, audit logs can be used to gain deeper insights into an identity cloud environment. This information improves the application's performance and maintainability and automates actions that otherwise require manual intervention.

\n

Core Capabilities of LoginRadius Consumer Audit Trail

\n

\n , or any other international statutes. It is a good practice to maintain a reliable and accurate audit log and trail system.

\n

The LoginRadius' Consumer AuditTrail feature plays a vital role in the maintenance, security, availability, and integrity of the records so businesses can understand the bigger picture in the cybersecurity threat landscape.

\n

\n \n \n

\n","frontmatter":{"date":"July 02, 2020","updated_date":null,"description":"The recently released Consumer Audit Trail by LoginRadius tracks threats in real time, handles incident response, and even conducts a forensic analysis on past security incidents, if necessary.","title":"LoginRadius Approves Consumer Audit Trail for In-Depth Data Analysis and Risk Assessment","tags":["industry-news"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/630b48719d163e895ae90a3ef26eeec4/14b42/Consumer-Audit-Trail.jpg","srcSet":"/static/630b48719d163e895ae90a3ef26eeec4/f836f/Consumer-Audit-Trail.jpg 200w,\n/static/630b48719d163e895ae90a3ef26eeec4/2244e/Consumer-Audit-Trail.jpg 400w,\n/static/630b48719d163e895ae90a3ef26eeec4/14b42/Consumer-Audit-Trail.jpg 800w,\n/static/630b48719d163e895ae90a3ef26eeec4/c4bcc/Consumer-Audit-Trail.jpg 1026w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},{"node":{"excerpt":"Kafka Streams is a Java library developed to help applications that do stream processing built on Kafka. To learn about Kafka Streams, you…","fields":{"slug":"/engineering/stream-processing-using-kafka/"},"html":"

Kafka Streams is a Java library developed to help applications that do stream processing built on Kafka. To learn about Kafka Streams, you need to have a basic idea about Kafka to understand better. If you’ve worked with Kafka before, Kafka Streams is going to be easy to understand.

\n

What are Kafka Streams?

\n

Kafka Streams is a streaming application building library, specifically applications that turn Kafka input topics into Kafka output topics. Kafka Streams enables you to do this in a way that is distributed and fault-tolerant, with succinct code.

\n

What is Stream processing?

\n

Stream processing is the ongoing, concurrent, and record-by-record real-time processing of data.

\n

Let us get started with some highlights of Kafka Streams:

\n\n

Kafka Streams Concepts:

\n\n

There are two individual processors in the topology:

\n\n

\n \n \n

\n\n

There is actually a close relationship between streams and tables, the so-called stream-table duality

\n

Implementing Kafka Streams

\n

Let's Start with the Setup using Scala instead of Java. The Kafka Streams DSL for Scala library is a wrapper over the existing Java APIs for Kafka Streams DSL.

\n

To Setup things, we need to create a KafkaStreams Instance. It needs a topology and configuration (java.util.Properties). We also need a input topic and output topic. Let's look through a simple example of sending data from an input topic to an output topic using the Streams API

\n

You can create a topic using the below commands (need to have Kafka pre installed)

\n
kafka-topics --create --zookeeper localhost:2181 --replication-factor 1 --partitions 1 --topic inputTopic\nkafka-topics --create --zookeeper localhost:2181 --replication-factor 1 --partitions 1 --topic outputTopic
\n
val config: Properties = {\n    val properties = new Properties()\n    properties.put(StreamsConfig.APPLICATION_ID_CONFIG, "your-application")\n    properties.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "localhost:9092")\n    properties.put(ConsumerConfig.AUTO_OFFSET_RESET_CONFIG, "latest")\n    properties.put(StreamsConfig.PROCESSING_GUARANTEE_CONFIG, StreamsConfig.EXACTLY_ONCE)\n    properties.put(StreamsConfig.DEFAULT_KEY_SERDE_CLASS_CONFIG, Serdes.String())\n    properties.put(StreamsConfig.DEFAULT_VALUE_SERDE_CLASS_CONFIG, Serdes.String())\n    properties\n    }
\n

StreamsBuilder provide the high-level Kafka Streams DSL to specify a Kafka Streams topology.

\n
val builder: StreamsBuilder = new StreamsBuilder
\n

Creates a KStream from the specified topics.

\n
val inputStream: KStream[String,String] = builder.stream(inputTopic, Consumed.`with`(Serdes.String(), Serdes.String()))
\n

Store the input stream to the output topic.

\n
inputStream.to(outputTopic)(producedFromSerde(Serdes.String(),Serdes.String())
\n

Starts the Streams Application

\n
val kEventStream = new KafkaStreams(builder.build(), config)\nkEventStream.start()\nsys.ShutdownHookThread {\n      kEventStream.close(10, TimeUnit.SECONDS)\n    }
\n

You can send data to the input topic using

\n
kafka-console-producer --broker-list localhost:9092 --topic inputTopic
\n

And can fetch the data from the output topic using

\n
kafka-console-consumer --bootstrap-server localhost:9092 --topic outputTopic --from-beginning
\n

You can add the necessary dependencies in your build file for sbt or pom file for maven. Below is an example for build.sbt.

\n
// Kafka\nlibraryDependencies += "org.apache.kafka" %% "kafka-streams-scala" % "2.0.0"\nlibraryDependencies += "javax.ws.rs" % "javax.ws.rs-api" % "2.1" artifacts( Artifact("javax.ws.rs-api", "jar", "jar")) // this is a workaround. There is an upstream dependency that causes trouble in SBT builds.
\n

Let us modify the code a little bit to try out a WordCount example:\nThe code splits the sentences into words and groups by word as a key and the number of occurences or count as value and is being sent to the output topic by converting the KTable to KStream.

\n
val textLines: KStream[String, String] = builder.stream[String, String](inputTopic)\nval wordCounts: KTable[String, Long] = textLines\n\t\t.flatMapValues(textLine => textLine.toLowerCase.split("\\\\W+"))\n\t\t.groupBy((_, word) => word)\n\t\t.count()(materializedFromSerde(Serdes.String(),Serdes.Long()))\n\twordCounts.toStream.to(outputTopic)(producedFromSerde(Serdes.String(),Serdes.Long())
\n

With the above process, we can now implement a simple streaming application or a word count application using Kafka Streams in Scala. If you want to set up kafka on Windows, here is a quick guide to implement apache kafka on windows OS.

\n","frontmatter":{"date":"July 01, 2020","updated_date":null,"description":"Learn about Kafka Streams, key concepts and highlights with simple streaming or a word count application using Kafka Streams in Scala","title":"Kafka Streams: A stream processing guide","tags":["Scala","Kafka","Kafka Streams"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b42ed1fb037f4d27ff3e60a004298488/ee604/header.png","srcSet":"/static/b42ed1fb037f4d27ff3e60a004298488/69585/header.png 200w,\n/static/b42ed1fb037f4d27ff3e60a004298488/497c6/header.png 400w,\n/static/b42ed1fb037f4d27ff3e60a004298488/ee604/header.png 800w,\n/static/b42ed1fb037f4d27ff3e60a004298488/f3583/header.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Priyadarshan Mohanty","github":"priyadarshan1995","avatar":null}}}},{"node":{"excerpt":"You’re probably hosting your MongoDB on a reliable cloud service provider say Atlas for instance because you really want to focus on your…","fields":{"slug":"/engineering/self-hosted-mongo/"},"html":"

You’re probably hosting your MongoDB on a reliable cloud service provider say Atlas for instance because you really want to focus on your idea and delegate all the subtle key management areas such as networking, storage, access, etc.

\n

It all looks good initially until your small idea starts turning into a business and the cost starts skyrocketing. Even if that is not the case, this post will still give you a general overview of the technical complexities involved (and bucks saved!) if you were to migrate to a self-hosted solution.

\n

BTW, how much savings are we talking about? Let’s do a quick comparison between an Atlas instance and a self-hosted MongoDB on AWS.

\n

Atlas (~$166/month)

\n

\n \n \n

\n

$0.0416/hour for the instance and additional pricing based on the EBS type and storage (~ calculator.aws)

\n
\n

It is almost 4.5x savings just in terms of the infrastructure!

\n
\n

Now that you know the major why(s) and are still reading this post, without further ado, let’s dive into the tech.

\n
\n

Outline

\n
    \n
  1. Setting up the infrastructure
    2. \n
  2. Setting up MongoDB
    3. \n
  3. Bulk migration
    4. \n
  4. Delta-sync to bridge the connection switch latency (not applicable to stale clusters)
    5. \n
\n

Since the entire content can be a bit exhausting in one place, I’m going to divide this into 2 related posts.

\n

1. Setting up the Infrastructure

\n

I’m going to mention below the guide for setting up an instance running RedHat Enterprise Linux 8 on AWS. This is because MongoDB generally performs better with the xfs file-system.

\n

Spin up an EC2 Instance

\n

I’ve used a t3.small instance that comes with 2 vCPUs and 2Gb of RAM albeit you can select any instance of your choice.

\n
\n

It is recommended that your DB should have access to at least 1GB of RAM and 2 real cores as that directly affects the performance during caching & concurrency mechanisms as handled by the default engine WiredTiger. You can read more about the production notes related to the RAM and CPU requirements here.

\n
\n

Configuration Overview:

\n\n

I’m assuming that you’re familiar with creating a VM on AWS.

\n

Now, once the instance is in running state, assign an Elastic IP to it and then simply do a remote login into the machine.

\n
\n

We'll need the Elastic IP to setup public hostname for the instance

\n
\n
$ ssh -i <PEM_FILE> ec2-user@<ELASTIC_IP>
\n

Mount Additional Volumes

\n

We have added 2 additional EBS volumes other than the Root FS for Data and Logs which are yet to be mounted (Remember the 30Gb and 3Gb?). You can list the volume blocks using,

\n
$ sudo lsblk
\n

The additional volumes will be listed right after the root block (refer to the arrows)

\n

\n because they are unique and won't change over a system restart)

\n
$ sudo blkid
\n

\n \n \n

\n

Copy the UUIDs listed for /dev/xvdb and /dev/xvdc. Refer to the “LABEL” for block identification

\n

Now open the /etc/fstab file and paste the configuration in the following format.

\n
UUID=<COPIED_UUID_FOR_DATA> /var/lib/mongo xfs defaults,nofail 0 0\nUUID=<COPIED_UUID_FOR_LOGS> /var/log/mongodb xfs defaults,nofail 0 0
\n

Update Hostname

\n

The hostname will be used to identify your database server on the network. You can either use the above assigned Elastic IP or Domain name (if available). Open the /etc/hostname file and append the entry. For e.g.

\n
ip-xx.us-east-2.compute.internal **<ELASTIC_IP> <DOMAIN_1> <DOMAIN_2>** ...
\n

Update the Process Limits (Optional)

\n

This is optionally required in order to control the maximum number of acceptable connections while keeping the system stable.\nOpen the /etc/security/limits.conf file and add the following entries.

\n
* soft nofile 64000\n* hard nofile 64000\n* soft nproc 32000\n* hard nproc 32000
\n

Now that all of the infra related prerequisites are sorted, reboot the instance, and let’s proceed to MongoDB installation.

\n
\n

1. Setting up MongoDB

\n

Add the Repo Source

\n

Create a file /etc/yum.repos.d/mongodb-org.4.2.repo and add the following package repository details.

\n
[mongodb-org-4.2]\nname=MongoDB Repository\nbaseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.2/x86_64/\ngpgcheck=1\nenabled=1\ngpgkey=https://www.mongodb.org/static/pgp/server-4.2.asc
\n

Now let’s install MongoDB.

\n
$ sudo yum -y install mongodb-org
\n

Create directories and setup permissions

\n

MongoDB by default uses the following paths to store the data and the internal logs:

\n
\n

/var/lib/mongo → Data
/var/log/mongodb → Logs

\n
\n

Create the directories

\n
$ sudo mkdir /var/lib/mongo\n$ sudo mkdir /var/log/mongodb
\n

Change user & group permissions

\n
$ sudo chown mongod:mongod /var/lib/mongo\n$ sudo chown mongod:mongod /var/log/mongod
\n

Create an Admin User

\n

The mongod daemon/service must be first running before we proceed to create a user.\nLet’s use the default config(stored in /etc/mongod.conf) for now and start the daemon process.

\n
$ sudo -u mongod mongod -f /etc/mongod.conf
\n

The above command will start the mongod daemon in fork mode (default).

\n

Now, let’s login to the server and create our first admin user.

\n

Open a mongo shell

\n
$ mongo
\n

Use the \"admin\" database to create the root-admin

\n
> use admin
\n

Create the admin user

\n
> db.createUser({user: "admin", pwd: "password", roles: [{role: "root", db: "admin"}]})
\n

Create a regular user

\n
> db.createUser({user: "normal_user", pwd: "password", roles: [{role: "readWriteAnyDatabase", db: "admin"}]})
\n

Shutdown the server for now. We'll restart again with the modified config

\n
> db.shutDownServer()
\n

Setting up Authentication

\n

Here, we’ll enable the database authentication and modify the bind-address for our server to be accessible in the public domain.\nOpen /etc/mongod.conf and make the below changes.

\n
# network interfaces\nnet:\n  port: 27017\n  bindIp: 0.0.0.0 # accessible on the network address\nsecurity:\n  authorization: enabled # creds will be required for making db operations
\n

Save the config and restart the server.

\n
$ sudo -u mongod mongod -f /etc/mongod.conf
\n

Test Login

\n

You can verify if the credentials work using,

\n
$ mongo -u admin -p password
\n

That is it about the initial setup! Please stay tuned for my next related post on the detailed migration process and tips on keeping the DB production-ready.

\n

P.S. Thanks to Piyush Kumar for helping curate this post!

\n","frontmatter":{"date":"June 30, 2020","updated_date":null,"description":"Learn how to optimize your DB cost? This article will help you with the complete migration steps from a cloud to a self-hosted environment.","title":"Self-Hosted MongoDB","tags":["MongoDB","Mongo","AWS","Atlas"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.0408163265306123,"src":"/static/504642ca3a1f7d78dea8509436faa4c6/14b42/cover.jpg","srcSet":"/static/504642ca3a1f7d78dea8509436faa4c6/f836f/cover.jpg 200w,\n/static/504642ca3a1f7d78dea8509436faa4c6/2244e/cover.jpg 400w,\n/static/504642ca3a1f7d78dea8509436faa4c6/14b42/cover.jpg 800w,\n/static/504642ca3a1f7d78dea8509436faa4c6/d8343/cover.jpg 925w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Chinmaya Pati","github":"cnp96","avatar":null}}}},{"node":{"excerpt":"Roadmap of IDX-auto-tester We're delightfully Announcing the upcoming releases of LoginRadius Identity-Experience-Framework Open-Source…","fields":{"slug":"/engineering/roadmap-idx-autotester/"},"html":"

Roadmap of IDX-auto-tester

\n

We're delightfully Announcing the upcoming releases of LoginRadius Identity-Experience-Framework Open-Source Automation

\n

These full-version releases will include more test coverage and major changes with several improvements & code optimizations, the details have been given below.
\nThe below changes are planned to go live in multiple scheduled major releases starting with mid of June 2020.

\n

Release Roadmap:

\n

July 2020:

\n

Test Cases:

\n\n
\n

CI/CD pipelines for automation is to make everyday development tasks simple that can save time and reduce human intervention to check them every single code commit.

\n
\n

August 2020:

\n

Usability Improvements:

\n\n

Documentations:

\n\n
\n

We are not just delivering automation we deliver values to our customers, some useful tips \"to working with selenium and nightwatch\" can be expected with this release

\n
\n

September 2020:

\n

Code Level Improvements and Optimizations:

\n\n

Better Reporting:

\n\n
\n

Although current configuration does not support different browsers, still you can run on any browser by making few changes in nightwatch.json detailed guide is here

\n
\n

October 2020:

\n

Overcoming the Limitations:

\n\n

It is agreed that we are committed to delivering you a seamless experience in automation, but still, if you face any issue or need any enhancements, please report us here

\n\n","frontmatter":{"date":"June 30, 2020","updated_date":null,"description":null,"title":"Roadmap of idx-auto-tester","tags":["Automation","idx","roadmap"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/b5c43b2bffb92542e899a8b9837bd4c5/ee604/roadmap_idx_auto_tester.png","srcSet":"/static/b5c43b2bffb92542e899a8b9837bd4c5/69585/roadmap_idx_auto_tester.png 200w,\n/static/b5c43b2bffb92542e899a8b9837bd4c5/497c6/roadmap_idx_auto_tester.png 400w,\n/static/b5c43b2bffb92542e899a8b9837bd4c5/ee604/roadmap_idx_auto_tester.png 800w,\n/static/b5c43b2bffb92542e899a8b9837bd4c5/f3583/roadmap_idx_auto_tester.png 1200w,\n/static/b5c43b2bffb92542e899a8b9837bd4c5/e4d72/roadmap_idx_auto_tester.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Pareek","github":"rkpareek","avatar":null}}}},{"node":{"excerpt":"Today we will learn about the progressive web app, a very interesting and trending topic in current times, We will start with the basic…","fields":{"slug":"/engineering/build-pwa-using-vanilla-javascript/"},"html":"

Today we will learn about the progressive web app, a very interesting and trending topic in current times, We will start with the basic steps first on how Progressive Web App works with vanilla js. Also, we’ll cover the concept of PWAS without using any of the frameworks, it's just a plain vanillaJS.

\n

What are Progressive Web Apps?

\n

A Progressive Web app is an application which is built on top of HTML, JS and CSS with some extra features like service worker and manifest.json file. These extra features will give the ability to run the web application offline.

\n

Various big companies are moving towards the progressive web app instead of native apps, as it gives some much flexibility to end-users. In some websites you can find the + icon at the right side of the address bar, those are progressive web apps.

\n

Setup your base app for PWA

\n

We will be using npm to start our project, so firstly create a root folder using this command mkdir first-pwa-app or another name of your choice then go to that directory by using this command cd first-pwa-app. Run npm init

\n
npm init\n\npackage name: (first-pwa-app)\nversion: (1.0.0)\ndescription: This is the first PWA example\nentry point: (index.js): index.html\ntest command:\ngit repository:\nkeywords:\nauthor: Mohammed Modi\nlicense: (ISC)
\n

Once you fill up those details your final output of the package.json file will be below

\n
{\n  "name": "first-pwa-app",\n  "version": "1.0.0",\n  "description": "This is the first PWA example",\n  "main": "index.html",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1"\n  },\n  "author": "Mohammed Modi",\n  "license": "ISC"\n}
\n

After that, we need to install the serve dependency to serve the application in localhost so install it using npm npm i serve --save. And then add a script in the package.json file.

\n
{\n  ...\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1",\n    "serve": "serve ."\n  },\n  ...\n}
\n

So finally our application is ready to serve in localhost. Now let's add some html and css

\n

Setting up the Javascript

\n

Create a directory for the app and add js, css, and images subdirectories. It should look like this when you’re finished:

\n
/first-pwa-app   # Project Folder\n    /css     # Stylesheets\n    /js      # Javascript\n    /images  # Image files.\n    package.json\n    package-lock.json\n    index.html\n    manifest.json\n    sw.js
\n

You will understand the use of manifest.json and sw.js files once we move ahead in this tutorial.

\n

Add Some code for app interface

\n

When writing the code for Progressive Web Application we need to keep in mind two requirements

\n
    \n
  1. The landing page should have some content even if the javascript is not loaded
    2. \n
  2. The App should be responsive and can be properly interactive in any device.
    3. \n
\n

For this app, to handle the first requirement we will add the static text in the Html page and for the second requirement, we will use the viewport.

\n

So let's add this code inside the index.html file.

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8" />\n    <title>My First PWA</title>\n    <link rel="stylesheet" href="css/style.css" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n  </head>\n  <body class="fullscreen">\n    <div class="container">\n      <h1 class="title">My First PWA!</h1>\n    </div>\n  </body>\n</html>
\n

Next, we need to create a file css/style.css and paste this code inside this

\n
body {\n  font-family: sans-serif;\n}\n\n/* Make content area fill the entire browser window */\n/* Make content area fill the entire browser window */\nhtml,\n.fullscreen {\n  display: flex;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n}\n\n/* Center the content in the browser window */\n.container {\n  margin: auto;\n}\n\n.title {\n  font-size: 3rem;\n}
\n

Once you add the code save all the files and run the script npm run serve which will start your application in http://localhost:5000/

\n

\n \n \n

\n

Testing the App

\n

As we can see our application is running in the browser, let test it using the LightHouse Extension in Google Chrome browser. For the best result, I recommend testing in an incognito tab of google chrome.

\n

\n \n \n

\n

As you can see we have green signals for both of our above requirement:

\n
    \n
  1. Has a tag with width or initial-scale
    2. \n
  2. Contains some content when JavaScript is not available
    3. \n
\n

But still, there is lots of work to do, so let's start with the first feature of PWA's.

\n

Adding a Web App Manifest

\n

Let's create a new file called manifest.json in the root of our application. To understand more about the manifest file check out [this doc]

\n
{\n  "name": "My First Progressive Web app",\n  "short_name": "First PWA",\n  "lang": "en-US",\n  "start_url": "/index.html",\n  "display": "standalone",\n  "background_color": "white",\n  "theme_color": "white"\n}
\n

Now update the index.html head tag by adding the manifest.json file as a link

\n
<head>\n  ...\n  <link rel="manifest" href="/manifest.json" />\n  ...\n</head>
\n

We should also declare the theme colour which should match with your manifest.json file as meta tag.

\n
<head>\n  ...\n  <meta name="theme-color" content="white" />\n  ...\n</head>
\n

Once you run the lighthouse test again you can see we got green signals in some points like

\n
    \n
  1. Sets a theme colour for the address bar.
    2. \n
\n

\n images folder, I have used to icons pwa-icon-256.png and pwa-icon-256.png for this demo you can find in this repo. You can use various sizes in it. And finally, add the favicon.png in the root of the project.

\n

So let's add the icons attribute after the short-name

\n
{\n  "name": "My First Progressive Web app",\n  "short_name": "First PWA",\n  "icons": [\n    {\n      "src": ".images/pwa-icon-256.png",\n      "sizes": "256x256",\n      "type": "image/png"\n    },\n    {\n      "src": ".images/pwa-icon-512.png",\n      "sizes": "512x512",\n      "type": "image/png"\n    }\n  ],\n  "lang": "en-US",\n  "start_url": "/index.html",\n  "display": "standalone",\n  "background_color": "white",\n  "theme_color": "white"\n}
\n

And the index.html will head can will look like

\n
<head>\n  ...\n  <link rel="apple-touch-icon" href="images/pwa-icon-256.png" />\n  ...\n</head>
\n

You can also verify the manifest.json file by opening Chrome DevTools, in the Application Tab, the first tab in the sidebar manifest

\n

\n \n \n

\n

After running the test again, we can see all the manifest.json related issues are solved, The remaining issues can be resolved by adding the service worker.

\n

Adding Service Worker

\n

The next requirement of our app will be the service worker. The service worker is a script that runs in the background without any user interaction.

\n

The task of service worker will be to download and cache our content and then serve it when the user is offline. To understand more on service workers you can check this doc from mozilla.

\n

To integrate service workers we need to create a file called sw.js in the root of our project.

\n
\n

Note: Service worker will only have the access to the files of the current and sub-directories hence we need to place it in the root of our project

\n
\n
let cacheName = "my-first-pwa";\nlet filesToCache = ["/", "/index.html", "/css/style.css", "/js/main.js"];\n\n/* Start the service worker and cache all of the app's content */\nself.addEventListener("install", (e) => {\n  e.waitUntil(\n    caches.open(cacheName).then(function (cache) {\n      return cache.addAll(filesToCache);\n    })\n  );\n});\n\n/* Serve cached content when offline */\nself.addEventListener("fetch", (e) => {\n  e.respondWith(\n    caches.match(e.request).then((response) => {\n      return response || fetch(e.request);\n    })\n  );\n});
\n

The first 2 variables cacheName and filesToCache are used to create an offline cache in the browser. cacheName is used to create a cache of specific name and filesToCache will be the list of files that we need to cache, / will store the root files that is index.html even if the user does not specify the file name in the URL and then all other files specified in the array.

\n
\n

Note: Here I have used the filesToCache array as a list of static files just to demonstrate the purpose of PWA, it will stop working in production if even one file fails to load.

\n
\n

Finally, we will load our service worker, for that create js/main.js file and copy the below code.

\n
window.onload = () => {\n  "use strict";\n\n  if ("serviceWorker" in navigator) {\n    navigator.serviceWorker.register("./sw.js");\n  }\n};
\n

And add this script in the index.html file.

\n
...\n<script src="js/main.js"></script>
\n

So the final version of our index.html file will look like:

\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8" />\n    <title>Hello World</title>\n    <link rel="apple-touch-icon" href="images/pwa-icon-256.png" />\n    <link rel="stylesheet" href="css/style.css" />\n    <link rel="manifest" href="/manifest.json" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <meta name="theme-color" content="white" />\n  </head>\n  <body class="fullscreen">\n    <div class="container">\n      <h1 class="title">Hello World!</h1>\n    </div>\n    <script src="js/main.js"></script>\n  </body>\n</html>
\n

Now our application is made as fully PWA supported, you can verify it by running the lighthouse test.

\n

\n \n \n

\n

Finishing Up

\n

We are done with the code, now the last thing remaining in to host it in any of the https domain. As the PWA will be required to run in the secure domain.

\n

You can get the full source code of this example in this Github repo

\n

I hope you enjoyed the progressive web apps using vanilla js tutorial and found it useful. Please let me know what you think in the comments below.

\n","frontmatter":{"date":"June 26, 2020","updated_date":null,"description":"A simple step-by-step tutorial, all done with pure JavaScript, to set up a simple PWA that can be accessed offline using a web app manifest and a service worker.","title":"How to Build a PWA in Vanilla JS","tags":["PWA","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/1c496ce8fd476e70f4dbf1a97f08619a/ee604/cover.png","srcSet":"/static/1c496ce8fd476e70f4dbf1a97f08619a/69585/cover.png 200w,\n/static/1c496ce8fd476e70f4dbf1a97f08619a/497c6/cover.png 400w,\n/static/1c496ce8fd476e70f4dbf1a97f08619a/ee604/cover.png 800w,\n/static/1c496ce8fd476e70f4dbf1a97f08619a/f3583/cover.png 1200w,\n/static/1c496ce8fd476e70f4dbf1a97f08619a/e4d72/cover.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"excerpt":"In this blog, we’ll be implementing authentication with password hashing in a Node.js web application. For this, we’ll be using crypto, a…","fields":{"slug":"/engineering/password-hashing-with-nodejs/"},"html":"

In this blog, we’ll be implementing authentication with password hashing in a Node.js web application. For this, we’ll be using crypto, a package password hashing for Node.js.

\n

The Crypto module for Node JS helps developers to hash user passwords.

\n

Pre-requisites:

\n\n

Step 1. First, create a directory structure as below :

\n

hashApp

\n
--model\n----user.js\n--route\n----user.js\n--server.js
\n

Step 2. Create model/user.js file and add the following code :

\n
// Importing modules \nconst mongoose = require('mongoose'); \nvar crypto = require('crypto'); \n  \n// Creating user schema \nconst UserSchema = mongoose.Schema({ \n    name : { \n        type : String, \n        required : true\n    }, \n    email : { \n        type : String, \n        required : true\n    }, \n    hash : String, \n    salt : String \n}); \n  \n// Method to set salt and hash the password for a user \nUserSchema.methods.setPassword = function(password) { \n     \n // Creating a unique salt for a particular user \n    this.salt = crypto.randomBytes(16).toString('hex'); \n  \n    // Hashing user's salt and password with 1000 iterations, \n     \n    this.hash = crypto.pbkdf2Sync(password, this.salt,  \n    1000, 64, `sha512`).toString(`hex`); \n}; \n  \n// Method to check the entered password is correct or not \nUserSchema.methods.validPassword = function(password) { \n    var hash = crypto.pbkdf2Sync(password,  \n    this.salt, 1000, 64, `sha512`).toString(`hex`); \n    return this.hash === hash; \n}; \n  \n// Exporting module to allow it to be imported in other files \nconst User = module.exports = mongoose.model('User', UserSchema);
\n

Step 3. Create route/user.js file and add the following code:

\n
// Importing modules \nconst express = require('express'); \nconst router = express.Router(); \n\n// Importing User Schema \nconst User = require('../model/user'); \n\n// User login api \nrouter.post('/login', (req, res) => { \n\n    // Find user with requested email \n    User.findOne({ email : req.body.email }, function(err, user) { \n        if (user === null) { \n            return res.status(400).send({ \n                message : "User not found."\n            }); \n        } \n        else { \n            if (user.validPassword(req.body.password)) { \n                return res.status(201).send({ \n                    message : "User Logged In", \n                }) \n            } \n            else { \n                return res.status(400).send({ \n                    message : "Wrong Password"\n                }); \n            } \n        } \n    }); \n}); \n\n// User signup api \nrouter.post('/signup', (req, res, next) => { \n\n\n// Creating empty user object \n    let newUser = new User(); \n\n    // Initialize newUser object with request data \n    newUser.name = req.body.name, \n\n    newUser.email = req.body.email,\n\n\n    newUser.password=req.body.password\n\n                    // Call setPassword function to hash password \n                    newUser.setPassword(req.body.password); \n\n    // Save newUser object to database \n    newUser.save((err, User) => { \n        if (err) { \n            return res.status(400).send({ \n                message : "Failed to add user."\n            }); \n        } \n        else { \n            return res.status(201).send({ \n                message : "User added successfully."\n            }); \n        } \n    }); \n}); \n// Export module to allow it to be imported in other files \nmodule.exports = router;
\n

Step 4. Create server.js file :

\n
// Importing modules\nvar express = require('express');\nvar mongoose = require('mongoose');\nvar bodyparser = require('body-parser');\n  \n// Initialize express app\nvar app = express();\n  \n// Mongodb connection url\nvar MONGODB_URI = "mongodb://localhost:27017/hashAppDb";\n  \n// Connect to MongoDB\nmongoose.connect(MONGODB_URI);\nmongoose.connection.on('connected', () => {\n    console.log('Connected to MongoDB @ 27017');\n});\n  \n// Using bodyparser to parse json data\napp.use(bodyparser.json());\n  \n// Importing routes\nconst user = require('./route/user');\n  \n// Use user route when url matches /api/user/\napp.use('/api/user', user);\n  \n// Creating server\nconst port = 3000;\napp.listen(port, () => {\n    console.log("Server ru\nnning at port: " + port);\n});
\n

Step 5. Run server.js file using command

\n
node server.js
\n

Step 6. Open Postman and create a post request to localhost:3000/api/user/signup with following body parameter:

\n
{\n"name" : "test".\n"email" : "test@test.com",\n"password" : "test1234"\n}
\n

Run the request and you will get a success response:

\n
{\n"message" : "user added sucessfully"\n}
\n

User data is stored in the database as below:

\n
    "_id": {\n        "$oid": "5ab71ef2afb6db0148052f6f"\n    },\n    "name": "test",\n    "email": "test@test.com",\n    "salt": "ddee18ef6a6804fbb919b25f790005e3",\n    "hash": "bbf13ae4db87d475ca0ee5f97e397248a23509fc10c82f1e3cf110\n     b352c3ca6cc057955ace9d541573929cd7a74a280a02e8cb549136b43df7704caaa555b38a",\n    "__v": 0\n}
\n

If we have sensitive data or information that you need to be protected, ensuring it is secured correctly is important. With the above process, we can now successfully store our hashed password into our database with a bit of additional security.

\n

You can check the code on Github.

\n","frontmatter":{"date":"June 25, 2020","updated_date":null,"description":null,"title":"Password hashing with NodeJS","tags":["Security","NodeJs"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4598540145985401,"src":"/static/3500f6f614e274d34fe0b6c1213a16a2/ee604/cover.png","srcSet":"/static/3500f6f614e274d34fe0b6c1213a16a2/69585/cover.png 200w,\n/static/3500f6f614e274d34fe0b6c1213a16a2/497c6/cover.png 400w,\n/static/3500f6f614e274d34fe0b6c1213a16a2/ee604/cover.png 800w,\n/static/3500f6f614e274d34fe0b6c1213a16a2/f3583/cover.png 1200w,\n/static/3500f6f614e274d34fe0b6c1213a16a2/3bf79/cover.png 1440w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ashish Sharma","github":"ashish8947","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":762,"currentPage":128,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}