{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/43","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Securing your web applications from unauthorized users is very important. You can increase the security with One Time Password (OTP…","fields":{"slug":"/engineering/guest-post/multi-factor-authentication-using-redis-cache-and-otp/"},"html":"

Securing your web applications from unauthorized users is very important. You can increase the security with One Time Password (OTP) authentication in addition to the login credentials. An OTP is sent to the user’s email when they want to log in. This is a form of multi-factor authentication (MFA).

\n

It is essential to learn how to apply Multi-Factor authentication in real-world applications, and this tutorial got you covered. This tutorial explains how to store users’ sessions in the Redis Store and send OTP using Nodemailer for authentication.

\n

Goal

\n

This tutorial helps you understand:

\n\n

Prerequisites

\n

To follow this tutorial, make sure you have:

\n\n

As everything is in place, let’s jump right in.

\n

Set Up the Server

\n

In this section, you will learn how to start an Express server.

\n
    \n
  1. Create a new folder and open it in a text editor. In this tutorial, this folder is named Multi-Factor Auth, but you can decide to call it anything you want.
    2. \n
  2. \n

    Open the terminal in the project’s path and run the following code to install the dependencies needed to start the Express server.

    \n
    npm init --y\nnpm i express\nnpm i -D nodemon
    \n

    The Express dependency will be used to set up the backend server and nodemon, installed as a devDependency, which will watch the file system and restart the server when a change is made.

    \n

    \"Express

    \n
    3. \n
  3. Create a new file named server.js in the project’s directory. For simplicity, this file will contain all the server code for this application.
    4. \n
  4. \n

    Add the following codes in the server.js file to set up an Express server to listen on port 5000.

    \n
    const express = require("express");\nconst app = express();\nconst PORT = 5000;\n\napp.listen(PORT, () => {\n  console.log(`Server running on port ${PORT}`);\n});
    \n
    5. \n
  5. \n

    Open package.json and add the following code to start the server.

    \n
    {\n  "name": "multi-factor-auth",\n  "version": "1.0.0",\n  "description": "",\n  "main": "server.js",\n  "scripts": {\n    "start": "node server.js",\n    "dev": "nodemon server.js"\n  },\n  "keywords": [],\n  "author": "",\n  "license": "ISC",\n  "dependencies": {\n    "express": "^4.18.1"\n  },\n  "devDependencies": {\n    "nodemon": "^2.0.16"\n  }\n}
    \n
    6. \n
  6. \n

    Start the server in development mode by running npm run dev in your terminal.

    \n

    \"Express

    \n
    7. \n
\n

Set Up Nodemailer

\n

Nodemailer is a Node.js module that allows you to send emails using an email service or an SMTP server.

\n

To set up Nodemailer, you need to provide your email or SMTP service credentials.

\n
\n

Google mailing service (Gmail) will not support the use of third-party apps or devices like Nodemailer starting from May 30, 2022.

\n
\n

For this tutorial, we will use Microsoft’s Outlook Maling Service to send emails.

\n

Set Up Outlook

\n
    \n
  1. Navigate to Outlook’s sign-up page to register for an Outlook account if you don’t have one.
    2. \n
  2. \n

    Add your phone number if you are prompted to do so.

    \n
    \n

    This step can be skipped.

    \n
    \n
    3. \n
\n

Sending Emails

\n

After setting up your Outlook account, the next step is to use your Outlook account’s credential to send emails through Nodemailer.

\n
    \n
  1. \n

    Open your terminal and install the nodejs-nodemailer-outlook dependency.

    \n

    This module only needs your Outlook account credentials and message to send emails.

    \n

    Now, run the code below in your terminal to install the nodejs-nodemailer-outlook dependency:

    \n
    npm i nodejs-nodemailer-outlook
    \n
    2. \n
  2. \n

    Import the nodejs-nodemailer-outlook module into server.js and add the configurations needed to send emails:

    \n
    const express = require("express");\nconst app = express();\napp.use(express.json());//Enabling the body attribute.\nconst PORT = 5000;\n\napp.post("/auth", (req, res) => {//Post request to 'http://localhost:3000'\n  const nodeoutlook = require("nodejs-nodemailer-outlook");//Importing the module\n  nodeoutlook.sendEmail({\n    auth: {//Outlook Account Credentials \n      user: "<yourOutlookEmail@outlook.com>",//Email\n      pass: "<yourOutlookPassword>",//Password\n    },\n    from: "<yourOutlookEmail@outlook.com>",\n    to: req.body.email,//Getting the email\n    subject: "OTP",\n    text: req.body.message,//Getting the Message\n    onError: (e) => res.status(500).json({ message: `an error occurred ${e}` }),\n    onSuccess: (i) => res.status(200).json({ message: i }),\n  });\n});\n\napp.listen(PORT, () => {\n  console.log(`Server running on port ${PORT}`);\n});
    \n
    3. \n
  3. \n

    To test the application, use an API testing application like Postman and make a POST request to http://localhost:5000/auth, passing email and message to the body of the request.

    \n

    \"Postman\"

    \n
    4. \n
\n

Generate OTPs

\n

In the previous section, you've successfully configured Nodemailer and used it to send emails. This section will show you how to generate a random number and how to add this random number to the message sent to the user.

\n

You can generate this random number using:

\n
    \n
  1. Math.trunc(Math.random() * 1000000)
    2. \n
  2. A NodeJS module like UUID, shortid, nanoid, etc.
    3. \n
\n

This tutorial uses the nanoid module to generate random numbers.

\n
    \n
  1. \n

    In the terminal, install the nanoid module. This module will create a random set of characters as the OTP. Run the following command in your terminal:

    \n
    npm i nanoid@3.3.4 #Version compatible with Nodejs
    \n
    2. \n
  2. \n

    After installing the nanoid module, import it into server.js and use it to generate six random digits.

    \n
    const nanoid = require("nanoid");//Importing the naonid module\n\nconst OTP = nanoid.customAlphabet("1234567890", 6)();//Generating
    \n
    3. \n
  3. \n

    Add the OTP to the message sent to the user’s email.

    \n
    const express = require("express");\n\nconst nanoid = require("nanoid");\nconst app = express();\n\napp.use(express.json());\nconst PORT = 5000;\n\nconst OTP = nanoid.customAlphabet("1234567890", 6)();\n\napp.post("/auth", (req, res) => {\n  const nodeoutlook = require("nodejs-nodemailer-outlook");\n\n  nodeoutlook.sendEmail({\n    auth: {//Outlook Account Credentials \n      user: "<yourOutlookEmail@outlook.com>",//Email\n      pass: "<yourOutlookPassword>",//Password\n    },\n    from: "<yourOutlookEmail@outlook.com>",\n    to: req.body.email,//Getting the email\n    subject: "OTP",\n    text: `Your One Time Password is ${OTP}`,//Adding the OTP\n    onError: (e) => res.status(500).json({ message: `an error occurred ${e}` }),\n    onSuccess: (i) => res.status(200).json({ message: i }),\n  });\n});\n\napp.listen(PORT, () => {\n  console.log(`Server running on port ${PORT}`);\n});
    \n
    4. \n
  4. \n

    Make a POST request to http://localhost:5000/auth, passing only the email address.

    \n

    \"Email

    \n
    5. \n
  5. \n

    Check the email address for which the OTP is sent.

    \n

    \"Gmail\"

    \n
    6. \n
\n

Redis

\n

Now that the OTP part of the authentication is settled, let’s set up the next part of the authentication. This section covers what Redis is and how to use the Redis Store to cache data.

\n

What is Redis?

\n

Redis, also known as Remote Dictionary Server, is an open-source (BSD licensed), in-memory data structure store. Developers use it as a database, cache, and message broker. It is a fast, lightweight database that structures data in key-value pairs.

\n

Redis Cache

\n

Storing and retrieving cached data from Redis is faster than traditional databases as it retrieves and stores data in the main memory (the RAM). The data can be users’ sessions or responses to requests.

\n

The only downside is that data can be lost if the computer crashes.

\n

Setting up Redis

\n

Setting up Redis locally for Linux and Mac computers is simply straightforward.

\n

Follow the official documentation for Linux and macOS

\n

For Windows, you need to install Windows Subsystem for Linux Version 2 (WSL 2) and a Linux Distro on your local machine.

\n

This tutorial uses Redis Cloud to set up the Redis database. Redis Cloud starts with Free a subscription fee that grants 30MB of storage. This is perfect for this simple application.

\n
    \n
  1. \n

    Create a new Redis Cloud account if you don’t have one.

    \n

    \"Redis

    \n
    2. \n
  2. Click on Let’s start free and let Redis create a cloud database.
    3. \n
  3. \n

    Click on Configurations and copy your Public endpoint. This endpoint will be used to set up the Redis application.

    \n

    \"Public

    \n
    4. \n
  4. \n

    Still on the Configurations tab, copy your Default user password.

    \n

    \"Password\"

    \n
    5. \n
  5. \n

    Run npm i redis in your terminal. Import the redis dependency into server.js, and set up the redisClient using the Redis cloud endpoint.

    \n
    const redis = require("redis");\n\nconst redisConnect = async () => {//This function will be removed later in the tutorial\n  try {\n    const redisClient = redis.createClient({\n    url: "redis://redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345", //This is an incorrect end point, insert your Public endpoint\n      port: 12345,//The PORT is the last five digits in the url\n      username: "default",\n      password: "1234567890ABCDEFGHIJKLMNOPQRSTUV",//Input your Default_user_password\n    });\n    await redisClient.connect();//Connecting to Redis Cloud\n    await redisClient.set("Hello", "Hello from LoginRadius");//key=Hello, value=Hello from LoginRadius\n    const Hello = await redisClient.get("Hello");//Getting the value using its key=Hello\n    console.log(Hello);\n  } catch (error) {\n    if (//Running the function again when there is a network error\n      error.message ===\n        "getaddrinfo ENOTFOUND redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345" ||\n      error.message ===\n        "getaddrinfo EAI_AGAIN redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com"\n    ) {\n      return redisConnect();\n    }\n    console.log(error.message);\n  }\n};
    \n
    6. \n
  6. \n

    Start up the server in your terminal and view the result.

    \n

    \"Redis

    \n
    7. \n
\n

Sessions

\n

Now that Redis has been added to the application, let’s set up users’ sessions using Express Sessions.

\n

Set Up Express Sessions

\n
    \n
  1. \n

    Install the express-session and connect-redis modules in your terminal.

    \n

    The express-session module allows you to create a session in the client’s browser. And the connect-redis module enables you to set Redis as the session store. Run the following command in your terminal.

    \n
    npm i express-session connect-redis
    \n
    2. \n
  2. \n

    Import express-session and connect-redis into server.js and configure the session store.

    \n
    const express = require("express");\nconst app = express();\n\nconst redis = require("redis");\nconst session = require("express-session");//Importing express session\nconst RedisStore = require("connect-redis")(session);//Importing connect-redis and passing the session\nconst redisClient = redis.createClient({\n    url: "redis://redis-12345.c80.us-east-1-2.ec2.cloud.redislabs.com:12345", //This is an incorrect end point, insert your Public endpoint\n      port: 12345,//The PORT is the last five digits in the url\n      username: "default",\n      password: "1234567890ABCDEFGHIJKLMNOPQRSTUV",//Input your Default_user_password\n      legacyMode: true, //Very important for Redis V4\n    });\nredisClient\n  .connect()\n  .then(() => console.log("connected"))//Logs out connected on successful\n  .catch((e) => console.log(e.message));//Logs out the error\n\napp.use(\n  session({\n    secret: "LoginRadius",//session secret key\n    resave: false,\n    saveUninitialized: false,\n    store: new RedisStore({ client: redisClient }),//Setting the store\n  })\n);\n\n//The Rest of the code
    \n
    3. \n
\n

Storing OTPs

\n

Attributes stored in a session without a database are removed after the server refreshes. With the help of Redis cache, attributes in a session can be retrieved fast and saved even when the server restarts.

\n

The user’s OTP should be saved in the session before sending it to the user’s email.

\n

Open your server.js file and add the code as follows.

\n

The following code stores the OTP in the session, redirects when the email has been sent, and verifies the OTP provided with the one stored in the session.

\n
app.post("/auth", (req, res) => {\n  let OTP = nanoid.customAlphabet("1234567890", 6)();//Changing the OTP\n  req.session.OTP = OTP;//Storing the OTP in the \n  const nodeoutlook = require("nodejs-nodemailer-outlook");\n  nnodeoutlook.sendEmail({\n    auth: {//Outlook Account Credentials \n      user: "<yourOutlookEmail@outlook.com>",//Email\n      pass: "<yourOutlookPassword>",//Password\n    },\n    from: "<yourOutlookEmail@outlook.com>",\n    to: req.body.email,//Getting the email\n    subject: "OTP",\n    text: `Your One Time Password is ${OTP}`,\n    onError: (e) => res.status(500).json({ message: `an error occurred ${e}, Please try again` }),\n    onSuccess: (i) => res.redirect("/verify"),//Redirecting the user to verify the token\n  });\n});\n\napp.get("/verify", (req, res) => {\n  res.send("Welcome to the verify route");//Welcome Message\n  console.log(req.session.OTP);//Logging out the OTP stored in the session.\n});\n\napp.post("/verify", (req, res) => {\n  const { OTP } = req.body;//Getting the user provided OTP\n  const OTPSession = req.session.OTP;//Getting the stored OTP\n  if (OTPSession) {//Checking if the OTP exist in the session\n    if (OTP === OTPSession) {//Verifying the similarity of the OTP\n      req.session.isAuth = true;//Setting auth to true\n      return res.status(200).json({ message: "OTP is correct" });\n    }\n    return res.status(401).json({ message: "Incorrect OTP" });\n  }\n  return res.status(404).json({ message: "OTP not found" });\n});
\n

Protecting Routes

\n

Preventing unauthorized/unauthenticated users from accessing a specific route or a piece of important information is essential in various applications. In this section, you'll learn how to create a middleware that will authenticate the users accessing a specific route.

\n
\n

In this tutorial, the protected route is /home

\n
\n
    \n
  1. \n

    Create a GET route to /home in server.js and add the middleware auth

    \n
    app.get("/home", auth , (req, res) => {\n  res.send("You have Successfully been Authenticated");\n});
    \n
    2. \n
  2. \n

    Create the auth middleware function and verify if the user is authenticated.

    \n
    const auth = (req, res, next) => {//auth middleware function\n\n  if (req.session.isAuth) {//Checking if `isAuth` = true\n    return next();\n  }\n  return res.redirect("/auth");//Redirecting the Login route\n};\n\napp.get("/auth", (req, res) => {//Login route\n  res.send("Login");\n});\n\napp.get("/home", auth, (req, res) => {//The Home route\n  res.send("You have Successfully been Authenticated");\n});
    \n
    3. \n
\n

Logout

\n

The logout route will also be protected using the auth middleware to prevent requests from users who are not signed in.

\n
app.post("/logout", auth, (req, res) => {\n  req.session.destroy();//Destroying the session\n  res.redirect("/auth");\n});
\n

Set Up the Frontend

\n

It’s time to put the backend code into actual functionality. This tutorial makes use of Embedded JavaScript Template (EJS) as the frontend of this application.

\n

Setting up EJS

\n
    \n
  1. \n

    Install the EJS Module

    \n
    npm i ejs
    \n
    2. \n
  2. \n

    Once the installation is complete, open your server.js and use ejs as the default view engine

    \n
    app.set("view engine", "ejs")
    \n
    3. \n
  3. \n

    In this application, there are only three routes. The login, verify, and home routes. You need to render an ejs file when accessing the routes.

    \n

    Modify the GET routes using the code as follows:

    \n
    app.get("/auth", (req, res) => {\n  res.render("login");//Rendering the login ejs file\n});\napp.get("/verify", (req, res) => {\n  res.render("verify");Rendering the verify ejs file\n});\napp.get("/home", auth, (req, res) => {\n  res.render("home");Rendering the home ejs file\n});
    \n
    4. \n
  4. \n

    Create a folder named views, and inside, create the various ejs files.

    \n
    \n

    When the server is rendering an ejs file, it checks in the views folder for the file. So, this name is not optional.

    \n
    \n

    \"Folder

    \n
    5. \n
\n
\n

Style these various routes as you like

\n
\n

Login Route

\n

Add the following code to login.ejs to set up the Login route.

\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta http-equiv="X-UA-Compatible" content="IE=edge">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Login</title>\n</head>\n<body>\n  <h1>Login Page</h1>\n  <p>Please Sign in</p>\n  <form>\n    <input type="email" class="email"/><!-- Email input -->\n    <input type="submit" value="submit" class="submit"/>\n  </form>\n  <script>\n    const form = document.querySelector('form')//Getting the form\n    const email = document.querySelector('.email')//Getting the email\n\n    form.addEventListener('submit', async(e)=> {//Listening for a submit\n      e.preventDefault()\n      const data = { email: email.value }//Getting the email\n      await fetch("/auth", {//Making a POST request to http://localhost:5000/auth\n        method: "POST",\n        headers: {\n          "Content-Type": "application/json",\n        },\n        redirect: "follow",//Permiting redirects\n        body: JSON.stringify(data),//Sending the email\n      }).then(res => {\n        if(res.redirected) location.href = res.url//Redirecting the user on success\n      })\n      .catch((e) => {\n         email.value = ''\n         console.log(e.message);//Logging out error\n        });\n    })\n  </script>\n</body>\n</html>
\n

Verify Route

\n

Open verify.ejs and set up the verify page as follows.

\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta http-equiv="X-UA-Compatible" content="IE=edge">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Login</title>\n</head>\n<body>\n  <h1>Verify Page</h1>\n  <p class="message">Enter your OTP</p><!-- Message alert -->\n  <form>\n    <input type="number" class="OTP" /><!-- OTP input -->\n    <input type="submit" value="submit" class="submit" />\n  </form>\n\n  <script>\n    const form = document.querySelector('form')//Getting the form\n    const OTP = document.querySelector('.OTP')//Getting the OTP\n    const message = document.querySelector('.message')//Getting the message alert\n\n    form.addEventListener('submit', async (e) => {//Listening for a submit\n      e.preventDefault()\n      const data = { OTP: OTP.value }//Getting the OTP\n      await fetch("/verify", {//Making a POST request to http://localhost:5000/verify\n        method: "POST",\n        headers: {\n          "Content-Type": "application/json",\n        },\n        redirect: "follow",//Permitting redirects\n        body: JSON.stringify(data),//Sending the OTP\n      }).then(async(res) => {\n        if(!res.ok){//Checking for errors\n          const data = await res.json()\n          OTP.value = ''\n          return message.textContent = data.message//Alerting the error\n        }\n        if (res.redirected) location.href = res.url//Redirecting the user on success\n      }).catch((e) => {\n          OTP.value = ''\n          console.log(e.message)\n        });\n    })\n  </script>\n</body>\n</html>
\n

Home Route

\n

This is the route that is protected. The page can contain sensitive information that must not be accessible to unauthenticated users.

\n

Open home.ejs and configure the home route as follows.

\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta http-equiv="X-UA-Compatible" content="IE=edge">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Login</title>\n</head>\n<body>\n <h1>Home Page</h1>\n <p>Hello authenticated user, This is a secret information for your eyes only😉</p>\n Want to be unauthenticated, <button>Sign Out</button><!-- Sign Out button -->\n <script>\n   const button = document.querySelector('button')//Getting the sign out button\n   button.addEventListener('click', async()=> {//Listening for a click\n     await fetch('/logout', {//Making a POST request to http://localhost:5000/logout\n       method: "POST",\n       headers: {\n         "Content-Type": "application/json",\n       },\n       redirect: "follow"//Permitting redirects\n     }).then((res)=> {\n       if (res.redirected) location.href = res.url //Redirecting the user on success\n     }).catch(e=> {\n       console.log(e.message)\n     })\n   })\n </script>\n</body>\n</html>
\n

Conclusion

\n

This tutorial taught you how to set up Nodemailer, Redis Cloud, and Multi-Factor Authentication. With these, you've learned to secure your applications from unauthenticated users.

\n

Do you think you can use this to build complex and scalable applications?

\n

MFA with LoginRadius

\n

You can also set up MFA with LoginRadius instead of setting up everything manually with Redis. You can sign up for a free account here.

\n

Refer to this developer-friendly documentation to get started with your MFA setupdocs/guide/mfa/) for your web and mobile apps.

\n

Resources

\n

Click here to access the sample code used in this tutorial on GitHub

\n","frontmatter":{"date":"June 30, 2022","updated_date":null,"description":"Want to implement Multi-Factor Authentication (MFA)? Follow this tutorial to implement MFA using Redis Cache and OTP in your applications.","title":"Multi-Factor Authentication (MFA) with Redis Cache and OTP","tags":["Node.js","Redis","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/3daec096b51ef3e91f85364c0c87892b/58556/mfa-with-redis-cache-and-otp.webp","srcSet":"/static/3daec096b51ef3e91f85364c0c87892b/61e93/mfa-with-redis-cache-and-otp.webp 200w,\n/static/3daec096b51ef3e91f85364c0c87892b/1f5c5/mfa-with-redis-cache-and-otp.webp 400w,\n/static/3daec096b51ef3e91f85364c0c87892b/58556/mfa-with-redis-cache-and-otp.webp 800w,\n/static/3daec096b51ef3e91f85364c0c87892b/99238/mfa-with-redis-cache-and-otp.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Fredrick Emmanuel","github":"divofred","avatar":null}}}},{"node":{"excerpt":"Introduction The modern digital business landscape ensures a rich consumer experience that keeps customers loyal. However, that’s not the…","fields":{"slug":"/growth/digital-trust-business-invest-2022/"},"html":"

Introduction

\n

The modern digital business landscape ensures a rich consumer experience that keeps customers loyal. However, that’s not the only way to earn trust; the critical role of digital trust in adequate security can’t be overlooked.

\n

Statistics reveal that around 1,387,615 identity theft complaints were filed in the United States in 2020. And these numbers are rising exponentially every year.

\n

Businesses must reinforce their overall information security infrastructure, ensuring that crucial business information and customer details are secure.

\n

Whether we discuss securing access control or rethinking privacy policies, businesses skipping a small step in protecting customer information could lead to losses worth millions of dollars and reputational damages.

\n

Apart from this, cybercriminals are hunting for customer identities that can be impersonated to steal sensitive business information, which can be further exploited for financial benefits.

\n

Undoubtedly, investing in secure experiences isn’t a luxury anymore; it’s necessary for businesses offering online services through a website or a mobile application.

\n

Let’s uncover aspects of digital trust and where businesses need to invest to earn digital trust in 2022 and beyond.

\n

Why Does Digital Trust Matter Now More than Ever Before?

\n

Today, the competition in every niche is neck-to-neck. And customers have endless options to choose from. Hence, businesses must ensure they aren’t losing a single potential customer because of poor information security hygiene.

\n

Besides, global data privacy and security regulations are becoming more stringent. If an organization isn’t complying with privacy and security regulations, including the GDPR and the CCPA, it’ll have to face penalties and reputational damages.

\n

Also, if a business faces any kind of data breach or customer identity theft, they’ll lose trust in their clients and potential clients. And this isn’t good from a business growth perspective.

\n

In a nutshell, any loophole in managing customer information can adversely impact customer loyalty, brand equity, and financial performance.

\n

Hence, it is essential to ensure digital trust in customers/users sharing their details.

\n

How Can Businesses Earn Digital Trust?

\n

Earning digital trust isn’t a piece of cake. Businesses should understand that their customers always expect a great user experience coupled with the assurance of robust security to their personal information.

\n

Here are some information security best practices that can be incorporated into a business to build trust in customers and potential customers.

\n

#1. Multi-factor authentication

\n

Multi-factor authentication (or MFA) is a multi-layered security system that verifies the identity of users for login or other transactions.

\n

The user account will remain secure by leveraging multiple authentication layers, even if one element is damaged or disabled.

\n

Codes generated by smartphone apps, answers to personal security questions, codes sent to an email address, fingerprints, etc., are a few examples of multi-factor authentication implemented in day-to-day scenarios.

\n

On the other hand, multi-factor authentication is considered one of the most efficient ways of providing improved security in recent times. The multiple layers ensure that users demanding access are who they claim to be. Even if cyber criminals steal one credential, they'll be forced to verify identities in another way.

\n

With the world heading toward more criminal sensitivities, using multi-factor authentication as part of your consumer identity and access management (CIAM) platform helps you build and maintain solid consumer trust.

\n

#2. Single sign-on (SSO)

\n

Introducing Single Sign-On (SSO) to your customers can offer greater security and improved usability, which are two of the many critical benefits of SSO.

\n

No one likes remembering credentials. Many use the same username and password, irrespective of the application. They exert a lot of pressure on the memory.

\n

This is where the Single Sign-On technology comes into focus and works like a breeze.

\n

Single Sign-On (SSO) is a method of authentication that allows websites to use other trustworthy sites to verify users. Single sign-on enables users to log in to any independent application with a single ID and password.

\n

SSO is an essential feature of an Identity and Access Management (IAM) platform for controlling access. Verifying user identity is vital when it comes to knowing which permissions a user will have.

\n

The LoginRadius Identity platform is one example of managing access that combines user identity management solutions with SSO solutions.

\n

#3. Risk-Based Authentication (RBA)

\n

Risk-based authentication is a non-static authentication system that considers the profile(IP address, Browser, physical Location, and so on) of a consumer requesting access to the system to determine the risk profile associated with that action.

\n

The risk-based implementation allows your application to challenge the consumer for additional credentials only when the risk level is appropriate.

\n

It is a method of applying various levels of stringency to authentication processes based on the likelihood that access to a given system could result in compromise. As the level of risk increases, the authentication process becomes more complicated and restrictive.

\n

\"GD-to-RBA\"

\n

Risk-based authentication is an essential security feature because it works in real-time to prevent cyber frauds like accounts from getting compromised without causing an inconvenience for legitimate consumers. And thus building digital trust.

\n

In Conclusion

\n

In a modern digital world, customers always expect great brand experiences, but that doesn’t mean they’re ready to compromise their sensitive information.

\n

Brands offering robust security mechanisms to protect their customers and sensitive information are always ahead of their competitors.

\n

Hence, businesses embarking on a digital transformation journey shouldn’t underestimate the true potential of a secure platform that promotes digital trust.

\n

The aspects mentioned above could help businesses build digital trust that further fosters growth in the future.

\n

\"book-a-demo-Consultation\"

\n","frontmatter":{"date":"June 28, 2022","updated_date":null,"description":"Whether securing access control or rethinking privacy policies, businesses skipping a small step in protecting customer information could lead to losses worth millions of dollars and reputational damages since bad actors are already exploring new ways to exploit customer information. Here’s an insightful post that uncovers the aspects of digital trust and where businesses need to invest to earn digital trust in 2022 and beyond.","title":"Earning Digital Trust in 2022: Where Should Businesses Invest?","tags":["digital transformation","customer trust","enterprises"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/f2cc0d345fa71db7fb1ce3cce76011ce/7f8e9/digital-trust.webp","srcSet":"/static/f2cc0d345fa71db7fb1ce3cce76011ce/61e93/digital-trust.webp 200w,\n/static/f2cc0d345fa71db7fb1ce3cce76011ce/1f5c5/digital-trust.webp 400w,\n/static/f2cc0d345fa71db7fb1ce3cce76011ce/7f8e9/digital-trust.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"excerpt":"Introduction The ever-expanding IoT landscape has offered endless opportunities for businesses but has also opened the doors for various…","fields":{"slug":"/identity/iot-botnet-attacks-enterprises/"},"html":"

Introduction

\n

The ever-expanding IoT landscape has offered endless opportunities for businesses but has also opened the doors for various threats that can’t be overlooked.

\n

Whether we talk about identity thefts or sensitive information breaches, IoT devices, and interconnected networks are now on the radar of cybercriminals.

\n

Talking about the types of attacks, the IoT botnet attacks are now swiftly affecting a vast network of interconnected devices, including smart devices, smartphones, and computers.

\n

IoT botnet is a group of hacked systems, computers, and smart devices that exploit sensitive data, resulting in financial and reputational losses.

\n

Hence, enterprises developing IoT devices, smart applications, or other systems in the IoT landscape shouldn’t ignore the risks associated with botnet attacks.

\n

Let’s understand what an IoT botnet attack means and how IoT developers and vendors can mitigate the risk.

\n

The Architecture of a Botnet Attack

\n

A botnet shouldn’t be mistaken as a haphazard virus with no structure. On the contrary, a typical botnet resembles a sustainable virtual \"cancer\" that strategically infects device after device. This process of infection happens almost automatically.

\n

A classic botnet includes the following components:

\n\n

Now, these components can undergo arrangements into a particular hierarchy or structure.

\n

How IoT Botnet Attacks May Affect Businesses and End-Users?

\n

With the evolution of IoT devices in the past couple of years, we’ve witnessed a surge in the adoption of smart devices capable of delivering seamless user experiences to users to perform their daily tasks.

\n

However, the threats in the IoT landscape are driven mainly by the availability of different devices, most of which aren’t adequately secured and vulnerable to botnet attacks.

\n

The severity of these IoT botnet attacks can be evaluated because the vendors and developers may compromise their sensitive information and customer details.

\n

However, there could be other drastic consequences of a breach in the IoT network where users’ personal information, including bank account details, can be compromised, leading to financial losses.

\n

What IoT Vendors and Developers Need to Focus on to Mitigate the Risk?

\n

IoT botnet attacks can be prevented, and sensitive business and user information can be secured by incorporating specific information security policies. Here’s what can be done to mitigate the risks associated with IoT botnet attacks:

\n

#1. Emphasizing adequate cybersecurity hygiene.

\n

Good cybersecurity hygiene is key to preventing botnet attacks since attackers must surpass various lines of defense before exploiting crucial business or user information.

\n

\"WP-Remote-Learning\"

\n

Adding multiple layers of authentication in the IoT network and devices through multi-factor authentication (MFA) and risk-based authentication (RBA) could mitigate many risks associated with identity theft and account takeovers.

\n

#2. Get compliance.

\n

Businesses must understand that they must follow stringent data security and privacy regulations governing how user information must be collected, stored, and managed securely.

\n

Hence, if a business isn’t complying with different data protection and privacy regulations, including the GDPR and the CCPA, it is more likely to compromise crucial business data.

\n

Apart from this, getting compliance would also help brands win customer trust and eventually avoid hefty fines in case of non-compliance in some countries.

\n

#3. Access management through a robust identity management platform.

\n

A robust customer identity and access management (CIAM) platform can help IoT vendors and developers secure customer identities and their crucial information.

\n

Incorporating a reliable identity management solution would also help meet compliances and ensure business data and customer information isn’t compromised at any stage as access control over resources, devices, and networks are strictly monitored.

\n

Final Thoughts

\n

IoT botnets are creating new challenges for IoT developers and vendors since customer and business data security isn’t something any business would ever wish to compromise.

\n

On the other hand, businesses relying on poor security mechanisms on the device and network level have to rethink their security infrastructure since attackers are always on a hunt for devices and applications that are poorly secured.

\n

Hence, incorporating a robust security policy, as mentioned above, could be the best thing to ensure businesses, vendors, developers, and users in the IoT landscape remain secure.

\n

\"book-a-demo-loginradius-banner\"

\n","frontmatter":{"date":"June 28, 2022","updated_date":null,"description":"Enterprises developing IoT devices, smart applications, or other systems in the IoT landscape shouldn’t ignore the risks associated with botnet attacks. Read this insightful post to understand what an IoT botnet attack means and how IoT developers and vendors can mitigate the risk.","title":"IoT Botnet Attacks: Are They the Next Big Threat to Enterprises?","tags":["iot","botnet","cybersecurity","ux"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.550387596899225,"src":"/static/f12459f4b9ee3eb6b4584acd8e66a027/7f8e9/iot-botnet.webp","srcSet":"/static/f12459f4b9ee3eb6b4584acd8e66a027/61e93/iot-botnet.webp 200w,\n/static/f12459f4b9ee3eb6b4584acd8e66a027/1f5c5/iot-botnet.webp 400w,\n/static/f12459f4b9ee3eb6b4584acd8e66a027/7f8e9/iot-botnet.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Manish Tiwari","github":null,"avatar":null}}}},{"node":{"excerpt":"SolidJS is a declarative JavaScript framework used for building UIs and web applications pragmatically and performatively. Even though it's…","fields":{"slug":"/engineering/guest-post/introduction-to-solidjs/"},"html":"

SolidJS is a declarative JavaScript framework used for building UIs and web applications pragmatically and performatively. Even though it's relatively new, its similarity with other JavaScript frameworks like React and Svelte has made it more adoptable for the developer community.

\n

So in this tutorial, I'll give you a complete walkthrough of SolidJS and help you understand the essentials. You'll also build a simple web application with SolidJS to get a better hang of the basics. Finally, I'll compare and contrast it with the most popular framework in town — React.

\n

What is SolidJS?

\n

\"Features

\n

SolidJS takes the syntax and developer experience of React and combines it with the performance of Svelte to give you the best of both worlds.

\n

Just like React, Solid uses JSX to render HTML in the browser. It also uses similar syntax for reactivity to update DOM in real-time. However, unlike React, it uses a compiled DOM instead of virtual DOM.

\n

This means you get a smaller size pure JavaScript bundle, much like the production bundle of your Svelte or Vanilla JS application. This makes it blazingly fast and highly performant.

\n

SolidJS Essentials

\n

Let's now understand the fundamentals of SolidJS using some code examples. To follow along, you can directly run these snippets in the SolidJS playground.

\n

Architecture

\n

Solid follows the component architecture for modularity and reusability. Let's see how you can create an entry component and render it to the DOM.

\n

Here's a component HelloWorld that is injected into the DOM inside an HTML element that has an id app:

\n
import { render } from "solid-js/web";\n\nfunction HelloWorld() {\n  \n\n  return (\n    <h1>Hello World</h1>\n  );\n}\n\nrender(() => <HelloWorld />, document.getElementById("app")!);
\n

From the above code, it's also clear that components are functions that return the HTML template using JSX.

\n

\"HelloWorld

\n

Solid components allow only a single JSX element at the top level. To combat this, you can use special JSX elements called fragments:

\n
    <>\n     <h1>Hello World </h1>\n     <p>This is my first solid app </p>\n    </>
\n

Nesting Components

\n

Components can be nested inside one another. For instance, here you have a <Header/>component:

\n
function Header() {\n  return (\n    <h1>\n     Header\n    </h1>\n  );\n}\n\nexport default Header;
\n

That is rendered inside the main <App/>component:

\n
import { render } from "solid-js/web";\nimport Header from './header';\n\nfunction App() {\n \n\n  return (\n    <>\n      <Header/>\n      <h1>\n      Hello World\n      </h1>\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById("app")!);
\n

That should give you both the components on the DOM like this:

\n

\"Header

\n

Props

\n

Props are data and functions you can pass from one component to another to share data and features between the two components. In the previous example, you can pass a title prop to the <Header/> component:

\n
...\n    <Header title="Header"/>\n...
\n

Then consequently consume this prop inside the child component:

\n
function Header({title}) {\n  return (\n    <h1>\n     {title}\n    </h1>\n  );\n}\n\nexport default Header;
\n

Reactivity and Events

\n

Reactivity allows you to create variables that dynamically trigger a DOM update when changed.

\n

SolidJS allows you to create reactive variables called signals using the createSignal function. This function takes in the initial value of the variable as a parameter. And it returns an array where the first element is the variable itself and the second element is a function used to mutate that variable.

\n

Here's an example that changes the reactive variable called name:

\n
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction DisplayName() {\n  const [name, setName] = createSignal('fuzzysid');\n  const changeName = () => setName('siddhant')\n\n  return (\n    <>\n      <h1> {name} </h1>\n      <button onClick={changeName}> Change Name </button>\n    </>\n  );\n}\n\nrender(() => <DisplayName />, document.getElementById("app")!);
\n

Initially, the name outputs the string 'fuzzysid':

\n

\"Reactivity

\n

A click event is used on the button that fires a function called changeName. When you press the Change Name button, the changeName function updates the name signal to 'siddhant':

\n

\"Reactivity

\n

What a state is to React components, a signal is to Solid components. Here's another useful and typical example of reactive variables:

\n
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction Counter() {\n  const [count,setCount] = createSignal(0);\n\n  return (\n    <>\n      <h1> Counter: {count} </h1>\n      <button onClick={()=>setCount(count=>count-1)}>  Decrement </button>\n       \n      <button onClick={()=>setCount(count=>count+1)}>  Increment </button>\n    </>\n  );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);
\n

You can take the current value of a signal inside the signal's mutation's callback function. The above code used the present value of count to increment and decrement it accordingly.

\n

Effects

\n

Effects are triggers or watchers that can help you fire a function when a signal updates.

\n

Let's say, in the previous example, you want to throw an alert when the count becomes greater than 5.

\n

To do so, you can create an effect using the createEffect function. It takes a callback function as a parameter. This callback function is fired whenever a signal invoked inside it changes.

\n
createEffect(()=>{\n    if(count()>5) alert('Count is greater than five')\n})
\n

So now, if you click on the Increment button, you should get an alert when it becomes greater than 5:

\n

\"Effects

\n

Conditionals

\n

Solid provides special components called <Show> to render a template based on a condition or the value of a signal. Here's an example of that:

\n
import { render } from "solid-js/web";\nimport { createSignal,Show } from "solid-js";\n\nfunction Counter() {\n  const [count,setCount] = createSignal(0);\n\n  return (\n    <>\n      <h1> Counter: {count} </h1>\n      <button onClick={()=>setCount(count=>count-1)}>  Decrement </button>\n       \n      <button onClick={()=>setCount(count=>count+1)}>  Increment </button>\n      <Show when={count()>5}>\n        <p>Count is greater than five </p>\n      </Show>\n    </>\n  );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);
\n

Once the count becomes greater than 5, the <p> will start showing on the DOM:

\n

\"Conditionals

\n

Loops

\n

Just like <Show>, Solid also provides a special component called <For> to render a list on the DOM from an array.

\n

In the following example, you use the <For> component to render a list of fruits from the fruits signal. Inside the opening brackets of the <For> component, you specify the variable name that will be used to extract items to loop through using the each prop.

\n

Then, you can take a callback inside which you get the individual item as the first parameter and an optional index of the iteration as a second parameter.

\n
import { render } from "solid-js/web";\nimport { createSignal, For } from "solid-js";\n\nfunction Counter() {\n  const [fruits,setFruits] = createSignal([\n    'Mango 🥭',\n    'Apple 🍎',\n    'Banana 🍌',\n    'Melon 🍈',\n    'Watermelon 🍉'\n  ]);\n\n  return (\n    <>\n      <h1> Fruits </h1>\n      <For each={fruits()}>{(fruit,index)=>\n        <div>{index()+1}: {fruit}</div>\n      }\n      </For>\n    </>\n  );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);
\n

Here's what the list looks like when rendered in the DOM:

\n

\"For

\n

Lifecycle Methods

\n

Most frameworks provide several lifecycle methods for different purposes. This often leads to a steeper learning curve as well as unnecessary complexity.

\n

Solid stays truly reactive: it gives you the createEffect and signals to build whatever interaction you want. However, to simplify things further, it gives you two primary lifecycle methods.

\n

onMount

\n

The onMount method is fired just once in the entire lifecycle of a Solid component. It runs only the first time your component mounts on the DOM. It's an excellent place to make any API calls your application needs.

\n

For instance, consider the following example that uses the onMount method to fetch and render some data:

\n
import { render } from "solid-js/web";\nimport { createSignal, onMount, For } from "solid-js";\n\nfunction App() {\n  const [posts, setPosts] = createSignal([]);\n\n  onMount(async () => {\n    const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);\n    setPosts(await res.json());\n  });\n\n  return <>\n    <h1>Effects: onMount</h1>\n\n    <div>\n      <For each={posts()}>{ post =>\n          <p>\n            {post.body}\n          </p>\n      }</For>\n    </div>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));
\n

It renders a list of posts fetched from a dummy API:

\n

\"onMount

\n

onCleanup

\n

onCleanup is the exact opposite of onMount. It's fired whenever a component unmounts from the DOM completely. Ideally, you can use this method to clear any event listeners you may have added to your DOM elements.

\n

Here's an example that does that:

\n
import { render } from "solid-js/web";\nimport {  onMount, onCleanup } from "solid-js";\n\nfunction App() {\n\n  const handleMouseEnter=()=>{\n    console.log('Entered the box')\n  }\n\n  onCleanup(()=>{\n    const box=document.querySelector('#box');\n    box.removeEventListener('mouseenter',handleMouseEnter)\n  })\n\n  onMount(async () => {\n    const box=document.querySelector('#box');\n    const onMouseEnter=box.addEventListener('mouseenter',handleMouseEnter)\n  });\n\n  return <>\n    <h1>Effects</h1>\n\n    <div id="box" style={{height:'200px',width:'200px',border:'1px solid red'}}>\n\n    </div>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));
\n

When you enter the red box, the mouseenter event fires, and you get a message on the console. As a cleanup, when the component unmounts, we remove this event listener from that <div>.

\n

\"OnCleanup

\n

Build a Todo App with SolidJS

\n

Let's combine all that knowledge to build a small todo application with Solid.

\n

Setup

\n

To get started, you'll create a new SolidJS project configured with Vite by running:

\n
npx degit solidjs/templates/js my-app
\n

That should create a new Solid project for you. Navigate inside this project and open it in a code editor (like VS Code):

\n
cd my-app && code .
\n

Next, install the dependencies by running:

\n
npm i
\n

And finally, kickstart the app by running:

\n
npm run start
\n

That should open the project for you at http://localhost:3000. Awesome!

\n

Architecture & Boilerplate Code

\n

Your initial project structure gives the <App/> component by default. This is going to be your entry point component. For starters, clean everything that's inside it:

\n
import styles from './App.module.css';\n\n\nfunction App() {\n \n  return (\n    <div class={styles.App}>\n      \n    </div>\n  );\n}\n\nexport default App;
\n

Notice that you also have an App.module.css file being imported here. It's then referenced inside the <div> container. You'll add all our styles inside this App.module.css file and reference it the same way.

\n

Now let's create some boilerplate files. Here's what the architecture of our Todo app would look like:

\n

\"Todo

\n

You'll have your top-most parent <App/> component that would store all the todos and the functions to manipulate these todos. This <App/> component will have two child components.

\n

First, the <AddTodo> component will be responsible for adding a new todo.

\n

Second, the <Todos/> component will be responsible for rendering the list of todos via its own child — <TodoItem/> component.

\n

Create a JSX file for each of the above components.

\n

The Component

\n

The <AddTodo/> component will render an input field and a button. The input field is where the user types a new todo. The button will be used to send this new todo back to a function in the parent <App/> component to add this todo to the todos list. This function will be taken as props inside the <AddTodo/> component.

\n

To store the newTodo, create a signal since you want this property to be reactive based on what the user enters in the input.

\n
 const [newTodo,setNewTodo]=createSignal('')
\n

Now let's add the template inside the component's JSX:

\n
import {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n    const [newTodo,setNewTodo]=createSignal('')\n\n    \n    return(\n        <div>\n            <input \n                onChange={handleChange} \n                value={newTodo()} type="text" \n                placeholder="Type a new todo..."\n            />\n            <button onClick={handleClick}>Add Todo</button>\n        </div>\n    )\n}\n\nexport default AddTodo;
\n

You bind the input field to the newTodo signal. You now need to create the handleChange function that updates the newTodo signal based on the onChange event.

\n

You also need to create the handleClick function that passes the newTodo signal to the addTodo function prop and clears the input state.

\n
 const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n        addTodo(newTodo)\n        setNewTodo('')\n }
\n

Here's how the entire <AddTodo/> component looks like:

\n
import {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n    const [newTodo,setNewTodo]=createSignal('')\n\n    const handleChange=(e)=>setNewTodo(e.target.value)\n\n    const handleClick=()=>{\n        addTodo(newTodo)\n        setNewTodo('')\n    }\n    \n    return(\n        <div>\n            <input \n                onChange={handleChange} \n                value={newTodo()} type="text" \n                placeholder="Type a new todo..."\n            />\n            <button onClick={handleClick}>Add Todo</button>\n        </div>\n    )\n}\n\nexport default AddTodo;
\n

You also need to render this inside the <App/> component:

\n
import styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport AddTodo from './AddTodo';\n\nfunction App() {\n\n  const addTodo=(newTodo)=>{\n   \n  }\n\n  const deleteTodo=(todo)=>{\n\n  }\n\n  return (\n    <div class={styles.App}>\n      <h1 class={styles.heading}>Todos</h1>\n      <AddTodo addTodo={addTodo}/>\n    </div>\n  );\n}\n\nexport default App;
\n

Once you do that, you should see an input field with a submit button rendered by the <AddTodo/> component on the screen:

\n

\"AddTodo

\n

Rendering Todos

\n

Now let's work on two simple components responsible for rendering the todos. First is the <Todos/> component. As you already know, this component takes in two props — a list of todos called the todos signal and the deleteTodo method.

\n
import { For } from 'solid-js';\nimport TodoItem from './TodoItem';\n\nfunction Todos({todos,deleteTodo}){\n    console.log(todos())\n    return(\n        <For each={todos()}>{(todo,ind)=>\n           \n        }\n        </For>\n    )\n\n}\n\nexport default Todos;
\n

You use the <For/> component to loop through the list of todos. Now, you need to pass each todo item and the deleteTodo method further down to your <TodoItem/> component. This component is responsible for rendering each list item.

\n
function TodoItem({todo,deleteTodo}){\n    const handleDelete=()=>deleteTodo(todo);\n    return(\n        <p onClick={handleDelete}>{todo}</p>\n    )\n}\n\nexport default TodoItem;
\n

When you click on an item, you invoke the deleteTodo function and pass the clicked todo item as a parameter.

\n

Finally, render the <Todos/> component inside the root <App/> component.

\n
import styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport Todos from './Todos';\nimport AddTodo from './AddTodo';\n\nfunction App() {\n  const [todos,setTodos]=createSignal([])\n\n  const addTodo=(newTodo)=>{\n  }\n\n  const deleteTodo=(todo)=>{\n    \n  }\n\n  return (\n    <div class={styles.App}>\n      <h1 class={styles.heading}>Todos</h1>\n      <AddTodo addTodo={addTodo}/>\n      <Todos deleteTodo={deleteTodo} todos={todos}/>\n    </div>\n  );\n}\n\nexport default App;
\n

Great! Let's complete the todo app by writing the logic for adding and deleting a todo.

\n

Adding and Deleting Todos

\n

To add a new todo, you only need to complete the logic inside the addTodo function in the <App/> component. This function already takes a newTodo parameter, the new todo item you need to add.

\n
const addTodo=(newTodo)=>{\n    setTodos([newTodo(),...todos()]);\n}
\n

You'll add the newTodo in the todos signal that is an array using its setter function setTodos. Use JavaScript array destructuring here to ensure to keep the previous todos intact. Let's give this a whirl now:

\n


\n

It looks like you're able to add todos now. Awesome!

\n

To delete the todo when they're clicked, populate your deleteTodo function:

\n
  const deleteTodo=(todo)=>{\n    let newTodos=todos;\n    newTodos=newTodos().filter(_todo=>_todo!=todo);\n    setTodos(newTodos)\n  }
\n

First, make a copy of the current todos array. Then, filter through this copy to remove the todo you wish to delete. Finally, update your original todos signal with this copy using the setTodos setter. Let's test it out now:

\n


\n

You can delete todos as well; fantastic!

\n

Styling the App

\n

Functionally your app is complete, but it surely misses some aesthetics. Let's add some simple yet neat-looking styles. You can directly update the styles in our App.module.css file:

\n
*{\n  margin: 0;\n  padding: 0;\n}\n\n.App {\n  text-align: center;\n  height: 100vh;\n  background: #F8F8F8;\n  padding: 100px;\n  display:flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.heading{\n  font-size: 96px;\n  margin-bottom: 20px;\n}\n\ninput{\n  border-radius: 12px;\n  outline: none;\n  border: none;\n  padding: 5px 20px;\n  margin-right: 20px;\n  height: 60px;\n  width: 400px;\n  font-size: 24px; \n  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\nbutton{\n  height: 65px;\n  width: 150px;\n  border: none;\n  outline: none;\n  border-radius: 12px;\n  font-size: 24px;\n  padding: 5px 15px;\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n  cursor: pointer;\n  font-weight: 600;\n  background:#2e3136;\n  color:#fff;\n}\n\np{\n  height: 60px;\n  background: white;\n  width: 600px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 12px;\n  font-size: 24px;\n  margin: 20px 0px;\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\np:hover{\n  background: rgb(232, 169, 146);\n  color:#fff;\n  cursor: pointer;\n}\n\n\n.header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}
\n

And that should give us a much better-looking todo app now:

\n

\"Updated-app\"

\n

SolidJS vs. React

\n

If you're coming from a React background, building the todo app must feel like a piece of cake to you! This is because, in terms of syntax and architecture, Solid is strikingly similar to React. It uses the same structure of using functional components, returning JSX, fragments, one-way data binding, etc.

\n

Using effects, refs and events are also much similar to React in Solid. So it's safe to say that Solid provides almost the same if not slightly different syntactic sugar as React. Then why do we need another React-like framework for building web applications?

\n

Solid differs from React in terms of performance, developer experience, rendering algorithm, and reactivity. Let's skim through the key differences:

\n

Performance

\n

At the beginning of this tutorial, we discussed how Solid doesn't use a virtual DOM. Instead, it uses a compiled DOM. This gives it a significant edge over React and any other framework in terms of run-time performance. It generates a blazingly fast production bundle that is aimed to provide a more rich user experience for your users.

\n

\"SolidJS

\n

If you wish to dive deeper into these stats and take a closer look at performance benchmarks, here's a comparison guide you can refer to.

\n

Solid is Truly Reactive

\n

Reactivity lies at the heart of SolidJS, which is why you'll never find any unnecessary renders of your Solid components. Only the part of a template that needs to update will re-render.

\n

With React, however, change in a state leads to re-rendering the entire component. There are ways to combat this, but it needs additional efforts to learn and incorporate these concepts into your applications.

\n

Community Support, Documentation, and Resources

\n

Even though Solid has excellent and extensive documentation, the React community is much larger since it has been around for longer. That can be a deal-breaker if you want to build scalable web applications quickly. Even third-party libraries are short in number for Solid in comparison to React.

\n

Conclusion

\n

Solid has an exciting future and is worth a side-project or an MVP for your startup. If you wish to explore Solid in-depth, you can check out an official tutorial by the Solid team here that walks you through every concept in Solid. You can also explore the entire code for the demo in this tutorial here. Until next time!

\n","frontmatter":{"date":"June 28, 2022","updated_date":null,"description":"In this tutorial, you’ll learn what SolidJS is, how it works, and its fundamentals such as reactivity, architecture, events, effects, etc. Then you’ll use this knowledge to build a simple todo app. Finally, you’ll understand how SolidJS compares with React and how it’s better and worse.","title":"Introduction to SolidJS","tags":["SolidJS","React","Frontend"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/98c70b8f15d4e24e9751c950a5a4f1cc/58556/introduction-to-solidjs.webp","srcSet":"/static/98c70b8f15d4e24e9751c950a5a4f1cc/61e93/introduction-to-solidjs.webp 200w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/1f5c5/introduction-to-solidjs.webp 400w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/58556/introduction-to-solidjs.webp 800w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/99238/introduction-to-solidjs.webp 1200w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/7c22d/introduction-to-solidjs.webp 1600w,\n/static/98c70b8f15d4e24e9751c950a5a4f1cc/d3365/introduction-to-solidjs.webp 2240w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Siddhant Varma","github":"FuzzySid","avatar":null}}}},{"node":{"excerpt":"Introduction Read a success story about our work with Ski Performance AS, an e-commerce platforming serving the European ski tourism…","fields":{"slug":"/identity/skiperformance-loginradius-customer-success-story/"},"html":"

Introduction

\n

Read a success story about our work with Ski Performance AS, an e-commerce platforming serving the European ski tourism industry. Discover how LoginRadius helped our client transform its customer experience and bring in more than 600k new users.

\n

\"From the very beginning of the development of our e-commerce system, we have used LoginRadius' services. The platform has helped us facilitate the fluidity and speed of the purchasing process through social login.\"

\n

Christian Tomassetti, CTO and Co-founder (Skiperformance)

\n

Travel and Tourism

\n

While digital transformation is a clear business impressive, the process of making this vision a reality is often less clear. There are a number of critical building blocks involved, but perhaps one of the most key is digital identity. Heightening security and improving the user experience, it sits at the foundation of digital success.

\n

This is particularly true within the travel and tourism industries, where traveller confidence has been shaken in recent years by the health crisis.

\n

The Situation

\n

Our client, Skiperformance, is a big name within European ski tourism. For more than 15 years, the company - which has offices in Italy and Norway - has helped ski resorts and travelers plan ski adventures around the world.

\n

While business was thriving, Skiperformance recognized an opportunity to improve its customer experience. The company sought an identity management solution to deliver users with secure, seamless and confidence-inspiring user experiences.

\n

Skiperformance CTO and co-founder Christian Tomassetti turned to LoginRadius with his requirements.

\n

The Challenges

\n

The CEO’s ambition was to enable seamless customer experiences for travelers using the Skiperformance platform during trip planning.

\n

As well as simplifying the e-platform’s registration experience through features such as social login, he wanted to make customer management easier, too.

\n

The team wanted to extend the usability of the LoginRadius platform by introducing registration and social login features to travelers registering and authenticating via the Skiperformance website.

\n

Importantly, Skiperformance needed a CIAM platform capable of addressing associated aspects like privacy violations with precision.

\n

Discussions helped Christian and his team learn how LoginRadius cloud-based customer identity management works and how it could satisfy all of their key requirements, including:

\n\n

How LoginRadius Transformed Customer Experiences (and Security) for Skiperformance

\n

Easy social login from 40+ providers

\n

LoginRadius offers users an impressive choice of 40+ social media ID providers. This means wherever customers are based in the world, they can login using their preferred social media accounts.

\n

Simple profile management

\n

LoginRadius simplifies traveler profile management at Skiperformance, thanks to its seamless fit with technology stacks.

\n

Unprecedented uptime

\n

LoginRadius means Ski Performance can achieve 180K logins per second—that’s 20 times more than the closest competitor.

\n

Advanced account security

\n

The LoginRadius Identity Platform comes with a wide range of built-in account security capabilities that are ahead of the curve and ensure the highest level of security.

\n

Conclusion

\n

Choosing LoginRadius as its CIAM partner in 2014 met all of Skiperformance’s requirements… and then some.

\n

Skiperformance has achieved impressive results since that decision, including:

\n\n

\"book-a-demo-loginradius\"

\n","frontmatter":{"date":"June 23, 2022","updated_date":null,"description":"A greatly transformed user experience that welcomed over 600,000 new customers for Skiperformance.","title":"Skiperformance - a LoginRadius Customer Success Story","tags":["ecommerce","customer success"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/0d1efa2a19bd76a538e29d0f2b44d578/58556/Skiperformance-featured-image.webp","srcSet":"/static/0d1efa2a19bd76a538e29d0f2b44d578/61e93/Skiperformance-featured-image.webp 200w,\n/static/0d1efa2a19bd76a538e29d0f2b44d578/1f5c5/Skiperformance-featured-image.webp 400w,\n/static/0d1efa2a19bd76a538e29d0f2b44d578/58556/Skiperformance-featured-image.webp 800w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ritika Kapahi","github":null,"avatar":null}}}},{"node":{"excerpt":"Introduction Over the past couple of years, cloud computing has evolved leaps and bounds and has offered endless business opportunities to…","fields":{"slug":"/growth/business-advantages-cloud-computing/"},"html":"

Introduction

\n

Over the past couple of years, cloud computing has evolved leaps and bounds and has offered endless business opportunities to organizations striving for digital transformation.

\n

And when we talk about business marketing, businesses leverage the cloud to gather data from different sources and connect them to get valuable insights that further help make winning marketing strategies.

\n

However, cloud computing offers more than just helping marketers plan and execute effective marketing campaigns.

\n

Whether we talk about scalability, performance, or security, cloud computing is the one-stop solution for all your business needs.

\n

Let’s look at some advantages of adopting cloud computing and why enterprises should consider relying on cloud computing to thrive overall business success.

\n

#1. High scalability

\n

Scalability is one of the most important aspects of cloud computing. Online platforms handling millions of users per second are always ready to handle additional millions of users just because they have deployed their platforms on cloud servers.

\n

Auto-scalable cloud infrastructures help brands scale up to millions of users per second, which isn’t possible in the conventional in-house data servers with limited scalability.

\n

Hence, businesses that collect user information on online platforms or large amounts of user information should consider relying on the cloud to experience the next level of scalability.

\n

Cloud servers are made to support massive sign-ins and sudden, dramatic surges of user actions (during a major sports game or popular TV voting system).

\n

The LoginRadius Identity Platform was designed with service provider-class scale in mind. The distributed CIAM network has regularly experienced peak transaction volumes of over 150,000 logins per second and typically handles 10,000 requests per second with less than 500 milliseconds latency.

\n

\"WP-decoding-resiliency\"

\n

#2. Highly secure

\n

When it comes to securing crucial business data and sensitive customer information, nothing can beat cloud deployments.

\n

Whether we talk about distributed system security or overall cloud security, businesses relying on the cloud are at the least risk of developing security threats.

\n

Cloud security (AKA cloud computing security) is a set of policies, technologies, applications, and controls that protect data and other material stored or run in the cloud.

\n

It’s safe because your files are stored on servers worldwide. This is called a ‘distributed system.’ Your data is encrypted when it travels over the internet, so it’s completely private and protected from hackers and thieves.

\n

Luckily, SaaS companies like LoginRadius specialize in cloud security that keeps customer data secure and private. We also offer IDaaS with several user authentication services like multi-factor authentication, single sign-on, and identity management.

\n

#3. Lower operational costs

\n

Typically, on-premises security solutions require a substantial investment to engineer and maintain.

\n

By contrast, you don't need to pay anything upfront with cloud computing. That's because cloud security tools are built and operated by a third-party vendor. You only pay for what you need or use through a monthly or annual subscription.

\n

#4. Maintenance-free infrastructure

\n

With cloud security, a third-party vendor is responsible for maintaining the system, not you. This vendor is the one spending their money and time on upgrading, integrating, and optimizing the system.

\n

The biggest problem with on-premise systems is that they require timely maintenance, increasing overall IT costs annually. However, in the case of the cloud, enterprises need not worry about timely maintenance.

\n

Apart from this, the vendor keeps the technology up-to-date, freeing you to focus on growing your business.

\n

#5. Compliance management

\n

Any enterprise that stores customer data must comply with global privacy regulations. These regulations govern how you seek customer consent to use their data and what you do with that data.

\n

The European Union's General Data Protection Regulation (GDPR) and California’s CCPA are examples of this legislation. With cloud security, your third-party vendor is responsible for compliance and has the expertise to do so.

\n

Final Thoughts

\n

With the changing digital landscape, businesses relying on on-premise infrastructure wouldn’t be able to meet the pace of their competitors already depending on the cloud.

\n

Hence, to ensure they stay ahead of the curve, businesses should put their best efforts into adopting the cloud since it’s secure, scalable, cost-efficient, and maintenance-free.

\n

\"book-a-demo-Consultation\"

\n","frontmatter":{"date":"June 21, 2022","updated_date":null,"description":"Cloud computing offers more than just helping marketers plan and execute effective marketing campaigns. Let’s look at some advantages of adopting cloud computing and why enterprises should consider relying on cloud computing to thrive overall business success.","title":"Reaping the Benefits of the Cloud Beyond Marketing","tags":null,"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3605442176870748,"src":"/static/53f7ca73ada7bb59a5b8ffbdb2f64e2f/7f8e9/cloud-marketg.webp","srcSet":"/static/53f7ca73ada7bb59a5b8ffbdb2f64e2f/61e93/cloud-marketg.webp 200w,\n/static/53f7ca73ada7bb59a5b8ffbdb2f64e2f/1f5c5/cloud-marketg.webp 400w,\n/static/53f7ca73ada7bb59a5b8ffbdb2f64e2f/7f8e9/cloud-marketg.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Navanita Devi","github":null,"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.webp"}}}},"pageContext":{"limit":6,"skip":252,"currentPage":43,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}