{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/35","result":{"data":{"allMarkdownRemark":{"edges":[{"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

\""Atlas\n$0.23/hour based on the above-selected requirements (~ cloud.mongodb.com)

\n



AWS (~$36/month)\n\""AWS

\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

\""sudo

\n

In the image above, you can see that the additional volumes are named

\n
    \n
  1. xvdb (30Gb space to store data)
    2. \n
  2. xvdc (3Gb space to store logs)
    3. \n
\n

Now, let’s create the file-systems in those volumes.

\n
$ sudo mkfs.xfs -L mongodata /dev/xvdb\n$ sudo mkfs.xfs -L mongologs /dev/xvdc
\n
\n

-L is an alias option for setting the volume label

\n
\n

And then mount the volumes.

\n
$ sudo mount -t xfs /dev/xvdb /var/lib/mongo\n$ sudo mount -t xfs /dev/xvdc /var/log/mongodb
\n

In order for these changes to reflect, the system must be rebooted. Hence, now we also need the partition persistence so that in case of an unintentional reboot we don’t lose the Database storage.

\n

We can achieve this by specifying the mount rules in the fstab file. You can read more about it here.

\n

Before that let's copy the UUID of the above partitions(because they are unique and won't change over a system restart)

\n
$ sudo blkid
\n

\""sudo

\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/1ded984fa0b8dec44a3794c8bf5b7b2e/58556/cover.webp","srcSet":"/static/1ded984fa0b8dec44a3794c8bf5b7b2e/61e93/cover.webp 200w,\n/static/1ded984fa0b8dec44a3794c8bf5b7b2e/1f5c5/cover.webp 400w,\n/static/1ded984fa0b8dec44a3794c8bf5b7b2e/58556/cover.webp 800w,\n/static/1ded984fa0b8dec44a3794c8bf5b7b2e/502a6/cover.webp 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/af8901a2791cbe7b9510d719854dd766/58556/roadmap_idx_auto_tester.webp","srcSet":"/static/af8901a2791cbe7b9510d719854dd766/61e93/roadmap_idx_auto_tester.webp 200w,\n/static/af8901a2791cbe7b9510d719854dd766/1f5c5/roadmap_idx_auto_tester.webp 400w,\n/static/af8901a2791cbe7b9510d719854dd766/58556/roadmap_idx_auto_tester.webp 800w,\n/static/af8901a2791cbe7b9510d719854dd766/99238/roadmap_idx_auto_tester.webp 1200w,\n/static/af8901a2791cbe7b9510d719854dd766/135cd/roadmap_idx_auto_tester.webp 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

\"First

\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

\"First

\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

\"Improving

\n

App Icons

\n

Still, we need to add more attributes to our manifest.json files like icons so let's add the icons inside the images folder, I have used to icons pwa-icon-256.webp and pwa-icon-256.webp for this demo you can find in this repo. You can use various sizes in it. And finally, add the favicon.webp 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.webp",\n      "sizes": "256x256",\n      "type": "image/png"\n    },\n    {\n      "src": ".images/pwa-icon-512.webp",\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.webp" />\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

\"Application

\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.webp" />\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

\"Full

\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/59164c7de73786d49d2361d64689b1c7/58556/cover.webp","srcSet":"/static/59164c7de73786d49d2361d64689b1c7/61e93/cover.webp 200w,\n/static/59164c7de73786d49d2361d64689b1c7/1f5c5/cover.webp 400w,\n/static/59164c7de73786d49d2361d64689b1c7/58556/cover.webp 800w,\n/static/59164c7de73786d49d2361d64689b1c7/99238/cover.webp 1200w,\n/static/59164c7de73786d49d2361d64689b1c7/135cd/cover.webp 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/7c5686f355f37377e26ec91cbaa6cbed/58556/cover.webp","srcSet":"/static/7c5686f355f37377e26ec91cbaa6cbed/61e93/cover.webp 200w,\n/static/7c5686f355f37377e26ec91cbaa6cbed/1f5c5/cover.webp 400w,\n/static/7c5686f355f37377e26ec91cbaa6cbed/58556/cover.webp 800w,\n/static/7c5686f355f37377e26ec91cbaa6cbed/99238/cover.webp 1200w,\n/static/7c5686f355f37377e26ec91cbaa6cbed/ba24a/cover.webp 1440w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ashish Sharma","github":"ashish8947","avatar":null}}}},{"node":{"excerpt":"Idx-Auto-Tester is LoginRadius Identify Experience Automation Framework which refers to IEF Automation, is an open-source automation…","fields":{"slug":"/engineering/introduction-of-idx-auto-tester/"},"html":"

Idx-Auto-Tester is LoginRadius Identify Experience Automation Framework which refers to IEF Automation, is an open-source automation framework built-in Nightwatch| Node.js tool with delivering all the standard authentication cases of LoginRadius Identity Experience.\nThis automation framework has been created for The LoginRadius Identity Experience Framework which is a ready-to-use solution that provides predefined layouts for all necessary authentication actions. It has all of the user accounts flows available, such as login, registration, forgotten password, and profile management.

\n

Technology used to create Idx-Auto-Tester

\n

We used Nightwatch.js end-to-end testing framework to create our Idx-Auto-Tester. This framework relies on Selenium and provides several commands and assertions within the framework to perform operations on DOM elements. It internally uses the powerful W3C Webdriver API or the Selenium Webdriver and simplifies writing end-to-end automated tests in Node.js and effortlessly sets up for Continuous Integration.

\n

Nightwatch uses JavaScript language (Node.js) and CSS/XPath to identify an element. It has Built-in command-line test runner which can run the tests either sequentially or in parallel, together, by group, tags, or by single.

\n

Installation

\n

Step 1: Download and Install Java.

\n

Step 2: Install Node.js.

\n

Step 3: Install Nightwatch. In the command line, navigate to any directory and type

\n
  npm install -g nightwatch (here ‘g’ is for installing globally).
\n

Step 4: Create a folder structure as shown below where Project is the root.

\n

\n

Step 5. Now it is required to install selenium-server-standalone.jar and chromedriver.exe along with other dependencies to execute test cases.

\n

As all the dependencies are added in nightwatch.json, so by executing below command, these will be added in node_modules folder

\n
  npm install
\n

Configuring and Setting up Nightwatch.js

\n

Now we have installed all the dependencies and configuration setup for the automation framework. Nightwatch.js offers an in-built test runner which expects a JSON configuration file to be passed. The default configuration file is nightwatch.json which should be present in the project’s root directory.

\n

Step 6. In the root folder, create “nightwatch.js” file and place the following line:

\n
require("nightwatch/bin/runner.js")
\n

Step 7. Now create nightwatch.json configuration file with the configurations mentioned as below code snippet for testing with Selenium and JavaScript.

\n
{\n  "src_folders": ["test"],\n  "output_folder": "tests_output",\n  "custom_commands_path": "helpers/custom-commands",\n  "custom_assertions_path": "",\n  "page_objects_path": "",\n  "globals_path": "",\n  "test_workers": {\n    "enabled": false,\n    "workers": 3\n  },\n\n  "selenium": {\n    "start_process": true,\n    "server_path": "node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-3.13.0.jar",\n    "log_path": "",\n    "host": "127.0.0.1",\n    "port": 4444,\n    "cli_args": {\n      "webdriver.chrome.driver": "node_modules/chromedriver/lib/chromedriver/chromedriver.exe",\n      "webdriver.ie.driver": ""\n    }\n  },\n\n  "test_settings": {\n    "default": {\n      "skip_testcases_on_fail": false,\n      "launch_url": "http://localhost",\n      "selenium_port": 4444,\n      "selenium_host": "127.0.0.1",\n      "silent": true,\n      "screenshots": {\n        "enabled": true,\n        "path": "screenshots"\n      },\n      "desiredCapabilities": {\n        "browserName": "chrome",\n        "javascriptEnabled": false,\n        "acceptSslCerts": false,\n        "chromeOptions": {\n          "args": ["--headless-none"]\n        }\n      }\n    },\n    "firefox": {\n      "desiredCapabilities": {\n        "browserName": "firefox",\n        "javascriptEnabled": true,\n        "acceptSslCerts": true,\n        "cli_args": {\n          "globals": {\n            "env": "fire  fox"\n          }\n        }\n      }\n    },\n\n    "ie": {\n      "desiredCapabilities": {\n        "browserName": "internet explorer",\n        "javascriptEnabled": true,\n        "acceptSslCerts": true,\n        "cli_args": {\n          "globals": {\n            "env": "ie"\n          }\n        }\n      }\n    }\n  }\n}
\n

Step 8. Now its time to design test case of any scenario, same as created in our Idx-Auto-Tester Framework under test folder named as TC01UserLogin

\n

To create functions/methods, we used nightwatch custom commands approach to create commands for all the required functions under custom-commands folder, like as there is command created for createUser.js which used to create the user and call it under test case.

\n
\n

Note: We are using 'Function-style commands' of Nightwatch to create command to resolve the asynchronous queueing system problem while running the test case.

\n
\n

Step 9. The final thing we are required to do is to execute the tests from the base directory of the project using the command:

\n
npm test
\n
\n

Important Tip : A script has been added in package.json to define test execution command:

\n
\n
"scripts":\n  {\n    "test": "node nightwatch.js --reporter html-reporter.js test"\n    }
\n

This command will validate the tests and dependencies and then execute the test suite, which will open up the mentioned browser and execute the desired test steps.

\n

Parallel Testing with Nightwatch.js in Selenium WebDriver

\n

It is required to update the configuration to execute the tests in parallel by enabling the test_workers as true. This will enable parallel execution and execute all tests on a defined number of workers.

\n
  "test_workers": {\n    "enabled": true,\n    "workers": 3\n  },
\n

This is all about Idx-Auto-Tester Framework Implementation

\n

In this framework design, we have covered various flows of LoginRadius Identity Experience Automation testing with Selenium Javascript. I hope we are now clear about the approach for an end-to-end automation testing with Selenium JavaScript using Nightwatch.js with the reference of Idx-Auto-Tester. We are aware of all the prerequisites required for setting up Nightwatch.js. It automates the entire test suite quickly with minimal configuration and is readable as well as easy to update. Our framework is also capable to use the best feature provided by Nightwatch.js framework which is the parallel testing of cases that proves to be time-efficient. The test results can directly be read from the terminal and also stored at a specified output folder.

\n","frontmatter":{"date":"June 22, 2020","updated_date":null,"description":null,"title":"Introduction of Idx-Auto-Tester","tags":["Automation","Idx-Auto-Tester"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4cce23ed76b3e769d45c63bf586f8166/58556/idx-auto-tester.webp","srcSet":"/static/4cce23ed76b3e769d45c63bf586f8166/61e93/idx-auto-tester.webp 200w,\n/static/4cce23ed76b3e769d45c63bf586f8166/1f5c5/idx-auto-tester.webp 400w,\n/static/4cce23ed76b3e769d45c63bf586f8166/58556/idx-auto-tester.webp 800w,\n/static/4cce23ed76b3e769d45c63bf586f8166/99238/idx-auto-tester.webp 1200w,\n/static/4cce23ed76b3e769d45c63bf586f8166/135cd/idx-auto-tester.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Himanshi Sharma","github":"Himanshi0512","avatar":null}}}},{"node":{"excerpt":"In this blog, we’ll be implementing authentication via Twitter in a Golang web application. For this, we’ll be using Goth, a social…","fields":{"slug":"/engineering/twitter-authentication-with-golang-and-goth/"},"html":"

In this blog, we’ll be implementing authentication via Twitter in a Golang web application. For this, we’ll be using Goth, a social authentication middleware for Golang.

\n

Pre-requisites:

\n\n

Firstly, We need to create a new Twitter App using its Application Management. Twitter does not seem to work nicely with it if \"localhost\" is given in the callback URL field. To overcome this limitation, you could use the special loopback address or \"127.0.0.1\" in place of \"localhost\".

\n

Step 1. First, create a directory structure as below for your Go Application :

\n
TwitterAuthenticationGoth\n-templates\n--index.html\n--success.html\n-main.go
\n

Step 2. Add the following code in index.html for creating LoginUI:

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

Step 3 Add the following code in success.html for creating ProfileUI:

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

Step 4. Add the following code in main.go for importing Goth and other packages :

\n
import (\n    "fmt"\n    "html/template"\n    "log"\n    "net/http"\n    "sort"\n\n    "github.com/gorilla/pat"\n    "github.com/markbates/goth"\n    "github.com/markbates/goth/gothic"\n    "github.com/markbates/goth/providers/twitter"\n)
\n

Now we are ready to implement Twitter Authentication in our app

\n

Step 5. Setup the twitter configuration by adding the following code in main.go :

\n
goth.UseProviders(\n        twitter.New("TWITTER_KEY", "TWITTER_SECRET", "http://127.0.0.1:3000/auth/twitter/callback"),\n\n    )
\n

Step 6. For adding all routes and functionality you just need to add following code in main.go :

\n
 type ProviderIndex struct {\n     Providers[] string\n     ProvidersMap map[string] string\n }\n\n func main() {\n     goth.UseProviders(\n         twitter.New("TWITTER_KEY", "TWITTER_SECRET", "http://127.0.0.1:3000/auth/twitter/callback"),\n         // If you'd like to use authenticate instead of authorize in Twitter provider, use this instead.\n         // twitter.NewAuthenticate(os.Getenv("TWITTER_KEY"), os.Getenv("TWITTER_SECRET"), "http://localhost:3000/auth/twitter/callback"),\n     )\n\n     m: = make(map[string] string)\n     m["twitter"] = "Twitter"\n\n     var keys[] string\n     for k: = range m {\n         keys = append(keys, k)\n     }\n     sort.Strings(keys)\n\n     providerIndex: = & ProviderIndex {\n         Providers: keys,\n         ProvidersMap: m\n     }\n\n     p: = pat.New()\n     p.Get("/auth/{provider}/callback", func(res http.ResponseWriter, req * http.Request) {\n\n         user, err: = gothic.CompleteUserAuth(res, req)\n         if err != nil {\n             fmt.Fprintln(res, err)\n             return\n         }\n         t, _: = template.ParseFiles("templates/success.html")\n         t.Execute(res, user)\n     })\n\n     p.Get("/logout/{provider}", func(res http.ResponseWriter, req * http.Request) {\n         gothic.Logout(res, req)\n         res.Header().Set("Location", "/")\n         res.WriteHeader(http.StatusTemporaryRedirect)\n     })\n\n     p.Get("/auth/{provider}", func(res http.ResponseWriter, req * http.Request) {\n         // try to get the user without re-authenticating\n         if gothUser, err: = gothic.CompleteUserAuth(res, req);\n         err == nil {\n             t, _: = template.ParseFiles("templates/success.html")\n             t.Execute(res, gothUser)\n         } else {\n             gothic.BeginAuthHandler(res, req)\n         }\n     })\n\n     p.Get("/", func(res http.ResponseWriter, req * http.Request) {\n         t, _: = template.ParseFiles("templates/index.html")\n         t.Execute(res, providerIndex)\n     })\n     log.Println("listening on localhost:3000")\n     log.Fatal(http.ListenAndServe(":3000", p))\n }
\n

Now you just need to run the project by using the following command and try logging by using the Twitter button.

\n

Step 7. Run the project :

\n
 go run main.go
\n

Step 8. Visit the browser with the URL http://127.0.0.1:3000.

\n

\"Login\"

\n

We need to click on Authorize button, which will redirect us to google login page

\n

\"Auth\"

\n

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

\n

\"Profile\"

\n

As we have seen it is fairly easy to build a twitter social authentication system with Go and Goth, You can found the complete code used in this tutorial on our Github Repo

\n","frontmatter":{"date":"June 15, 2020","updated_date":null,"description":null,"title":"Twitter authentication with Go Language and Goth","tags":["Go","SocialLogin","Oauth"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4f79bafe25a85ffc0b8e8cee3a3e44c8/58556/cover.webp","srcSet":"/static/4f79bafe25a85ffc0b8e8cee3a3e44c8/61e93/cover.webp 200w,\n/static/4f79bafe25a85ffc0b8e8cee3a3e44c8/1f5c5/cover.webp 400w,\n/static/4f79bafe25a85ffc0b8e8cee3a3e44c8/58556/cover.webp 800w,\n/static/4f79bafe25a85ffc0b8e8cee3a3e44c8/99238/cover.webp 1200w,\n/static/4f79bafe25a85ffc0b8e8cee3a3e44c8/7c22d/cover.webp 1600w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ashish Sharma","github":"ashish8947","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":204,"currentPage":35,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}