Open your terminal and install the nodejs-nodemailer-outlook dependency.
This module only needs your Outlook account credentials and message to send emails.
\nNow, run the code below in your terminal to install the nodejs-nodemailer-outlook dependency:
npm i nodejs-nodemailer-outlookImport the nodejs-nodemailer-outlook module into server.js and add the configurations needed to send emails:
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});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.
You can generate this random number using: This tutorial uses the In the terminal, install the After installing the Add the OTP to the message sent to the user’s email. Make a POST request to Check the email address for which the OTP is sent. 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. 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. 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. The only downside is that data can be lost if the computer crashes. Setting up Redis locally for Linux and Mac computers is simply straightforward. Follow the official documentation for Linux and macOS For Windows, you need to install Windows Subsystem for Linux Version 2 (WSL 2) and a Linux Distro on your local machine. 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. Create a new Redis Cloud account if you don’t have one. Click on Configurations and copy your Public endpoint. This endpoint will be used to set up the Redis application. Still on the Configurations tab, copy your Default user password. Run Start up the server in your terminal and view the result. Now that Redis has been added to the application, let’s set up users’ sessions using Express Sessions. Install the The Import 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. The user’s OTP should be saved in the session before sending it to the user’s email. Open your 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. 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. In this tutorial, the protected route is Create a Create the The logout route will also be protected using the 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. Install the EJS Module Once the installation is complete, open your In this application, there are only three routes. The login, verify, and home routes. You need to render an Modify the Create a folder named When the server is rendering an ejs file, it checks in the views folder for the file. So, this name is not optional. Style these various routes as you like Add the following code to Open This is the route that is protected. The page can contain sensitive information that must not be accessible to unauthenticated users. Open 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. Do you think you can use this to build complex and scalable applications? 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. Refer to this developer-friendly documentation to get started with your MFA setupdocs/guide/mfa/) for your web and mobile apps. Click here to access the sample code used in this tutorial on GitHub 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. 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. Businesses must reinforce their overall information security infrastructure, ensuring that crucial business information and customer details are secure. 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. 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. 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. Let’s uncover aspects of digital trust and where businesses need to invest to earn digital trust in 2022 and beyond. 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. 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. 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. In a nutshell, any loophole in managing customer information can adversely impact customer loyalty, brand equity, and financial performance. Hence, it is essential to ensure digital trust in customers/users sharing their details. 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. Here are some information security best practices that can be incorporated into a business to build trust in customers and potential customers. Multi-factor authentication (or MFA) is a multi-layered security system that verifies the identity of users for login or other transactions. The user account will remain secure by leveraging multiple authentication layers, even if one element is damaged or disabled. 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. 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. 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. 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. 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. This is where the Single Sign-On technology comes into focus and works like a breeze. 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. 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. The LoginRadius Identity platform is one example of managing access that combines user identity management solutions with SSO solutions. 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. The risk-based implementation allows your application to challenge the consumer for additional credentials only when the risk level is appropriate. 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. 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. Whether we talk about identity thefts or sensitive information breaches, IoT devices, and interconnected networks are now on the radar of cybercriminals. 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. IoT botnet is a group of hacked systems, computers, and smart devices that exploit sensitive data, resulting in financial and reputational losses. Hence, enterprises developing IoT devices, smart applications, or other systems in the IoT landscape shouldn’t ignore the risks associated with botnet attacks. Let’s understand what an IoT botnet attack means and how IoT developers and vendors can mitigate the risk. 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. A classic botnet includes the following components: Now, these components can undergo arrangements into a particular hierarchy or structure. 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. 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. The severity of these IoT botnet attacks can be evaluated because the vendors and developers may compromise their sensitive information and customer details. 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. 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: Good cybersecurity hygiene is key to preventing botnet attacks since attackers must surpass various lines of defense before exploiting crucial business or user information. 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. 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. 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. 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. 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. 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. 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. Here's a component From the above code, it's also clear that components are functions that return the HTML template using JSX. Solid components allow only a single JSX element at the top level. To combat this, you can use special JSX elements called fragments: Components can be nested inside one another. For instance, here you have a That is rendered inside the main That should give you both the components on the DOM like this: 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 Then consequently consume this prop inside the child component: Reactivity allows you to create variables that dynamically trigger a DOM update when changed. SolidJS allows you to create reactive variables called signals using the Here's an example that changes the reactive variable called Initially, the name outputs the string 'fuzzysid': What a 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 Effects are triggers or watchers that can help you fire a function when a signal updates. Let's say, in the previous example, you want to throw an alert when the count becomes greater than 5. To do so, you can create an effect using the So now, if you click on the Increment button, you should get an alert when it becomes greater than 5: Solid provides special components called Once the For instance, consider the following example that uses the It renders a list of posts fetched from a dummy API: Here's an example that does that: When you enter the red box, the Let's combine all that knowledge to build a small todo application with Solid. To get started, you'll create a new SolidJS project configured with Vite by running: That should create a new Solid project for you. Navigate inside this project and open it in a code editor (like VS Code): Next, install the dependencies by running: And finally, kickstart the app by running: That should open the project for you at Your initial project structure gives the Notice that you also have an Now let's create some boilerplate files. Here's what the architecture of our Todo app would look like: You'll have your top-most parent First, the Second, the Create a JSX file for each of the above components. The To store the Now let's add the template inside the component's JSX: You bind the input field to the You also need to create the Here's how the entire You also need to render this inside the Once you do that, you should see an input field with a submit button rendered by the Now let's work on two simple components responsible for rendering the todos. First is the You use the When you click on an item, you invoke the Finally, render the Great! Let's complete the todo app by writing the logic for adding and deleting a todo. To add a new todo, you only need to complete the logic inside the You'll add the It looks like you're able to add todos now. Awesome! To delete the todo when they're clicked, populate your 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 You can delete todos as well; fantastic! 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 And that should give us a much better-looking todo app now: 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? Solid differs from React in terms of performance, developer experience, rendering algorithm, and reactivity. Let's skim through the key differences: 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. 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. 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. 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. 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! 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. 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. The goal? Having them spend less time searching and more time building. 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. Here’s a closer look at what’s new and why it’s important: 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. 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. 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. 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: This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem. 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. 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. Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs. Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks. Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications. 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
\nMath.trunc(Math.random() * 1000000)nanoid module to generate random numbers.\n
\nnanoid module. This module will create a random set of characters as the OTP. Run the following command in your terminal:
\nnpm i nanoid@3.3.4 #Version compatible with Nodejsnanoid module, import it into server.js and use it to generate six random digits.
\nconst nanoid = require("nanoid");//Importing the naonid module\n\nconst OTP = nanoid.customAlphabet("1234567890", 6)();//Generating
\nconst 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});http://localhost:5000/auth, passing only the email address.Redis
\nWhat is Redis?
\nRedis Cache
\nSetting up Redis
\n\n
\nnpm i redis in your terminal. Import the redis dependency into server.js, and set up the redisClient using the Redis cloud endpoint.
\nconst 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};Sessions
\nSet Up Express Sessions
\n\n
\nexpress-session and connect-redis modules in your terminal.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.
\nnpm i express-session connect-redisexpress-session and connect-redis into server.js and configure the session store.
\nconst 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 codeStoring OTPs
\nserver.js file and add the code as follows.
\napp.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});Protecting Routes
\n\n
\n/home\n
\nGET route to /home in server.js and add the middleware auth
\napp.get("/home", auth , (req, res) => {\n res.send("You have Successfully been Authenticated");\n});auth middleware function and verify if the user is authenticated.
\nconst 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});Logout
\nauth middleware to prevent requests from users who are not signed in.
\napp.post("/logout", auth, (req, res) => {\n req.session.destroy();//Destroying the session\n res.redirect("/auth");\n});Set Up the Frontend
\nSetting up EJS
\n\n
\n
\nnpm i ejsserver.js and use ejs as the default view engine
\napp.set("view engine", "ejs")ejs file when accessing the routes.GET routes using the code as follows:
\napp.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});views, and inside, create the various ejs files.\n
\n\n
\nLogin Route
\nlogin.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>Verify Route
\nverify.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>Home Route
\nhome.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>Conclusion
\nMFA with LoginRadius
\nResources
\nIntroduction
\nWhy Does Digital Trust Matter Now More than Ever Before?
\nHow Can Businesses Earn Digital Trust?
\n#1. Multi-factor authentication
\n#2. Single sign-on (SSO)
\n#3. Risk-Based Authentication (RBA)
\nIntroduction
\nThe Architecture of a Botnet Attack
\n\n
\nHow IoT Botnet Attacks May Affect Businesses and End-Users?
\nWhat IoT Vendors and Developers Need to Focus on to Mitigate the Risk?
\n#1. Emphasizing adequate cybersecurity hygiene.
\nWhat is SolidJS?
\nSolidJS Essentials
\nArchitecture
\nHelloWorld that is injected into the DOM inside an HTML element that has an id app:
\nimport { 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 <>\n <h1>Hello World </h1>\n <p>This is my first solid app </p>\n </>Nesting Components
\n<Header/>component:
\nfunction Header() {\n return (\n <h1>\n Header\n </h1>\n );\n}\n\nexport default Header;<App/>component:
\nimport { 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")!);Props
\ntitle prop to the <Header/> component:
\n...\n <Header title="Header"/>\n...
\nfunction Header({title}) {\n return (\n <h1>\n {title}\n </h1>\n );\n}\n\nexport default Header;Reactivity and Events
\ncreateSignal 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.name:
\nimport { 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")!);state is to React components, a signal is to Solid components. Here's another useful and typical example of reactive variables:
\nimport { 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")!);count to increment and decrement it accordingly. Effects
\ncreateEffect function. It takes a callback function as a parameter. This callback function is fired whenever a signal invoked inside it changes.
\ncreateEffect(()=>{\n if(count()>5) alert('Count is greater than five')\n})Conditionals
\n<Show> to render a template based on a condition or the value of a signal. Here's an example of that:
\nimport { 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")!);count becomes greater than 5, the <p> will start showing on the DOM:onMount method to fetch and render some data:
\nimport { 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'));onCleanup
\nonCleanup 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.
\nimport { 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'));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>. Build a Todo App with SolidJS
\nSetup
\n
\nnpx degit solidjs/templates/js my-app
\ncd my-app && code .
\nnpm i
\nnpm run starthttp://localhost:3000. Awesome!Architecture & Boilerplate Code
\n<App/> component by default. This is going to be your entry point component. For starters, clean everything that's inside it:
\nimport 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;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. <App/> component that would store all the todos and the functions to manipulate these todos. This <App/> component will have two child components. <AddTodo> component will be responsible for adding a new todo.<Todos/> component will be responsible for rendering the list of todos via its own child — <TodoItem/> component. The
\n<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.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('')
\nimport {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;newTodo signal. You now need to create the handleChange function that updates the newTodo signal based on the onChange event. 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 }<AddTodo/> component looks like:
\nimport {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;<App/> component:
\nimport 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;<AddTodo/> component on the screen:Rendering Todos
\n<Todos/> component. As you already know, this component takes in two props — a list of todos called the todos signal and the deleteTodo method.
\nimport { 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;<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.
\nfunction TodoItem({todo,deleteTodo}){\n const handleDelete=()=>deleteTodo(todo);\n return(\n <p onClick={handleDelete}>{todo}</p>\n )\n}\n\nexport default TodoItem;deleteTodo function and pass the clicked todo item as a parameter. <Todos/> component inside the root <App/> component.
\nimport 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;Adding and Deleting Todos
\naddTodo function in the <App/> component. This function already takes a newTodo parameter, the new todo item you need to add.
\nconst addTodo=(newTodo)=>{\n setTodos([newTodo(),...todos()]);\n}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:deleteTodo function:
\n const deleteTodo=(todo)=>{\n let newTodos=todos;\n newTodos=newTodos().filter(_todo=>_todo!=todo);\n setTodos(newTodos)\n }todos signal with this copy using the setTodos setter. Let's test it out now:Styling the App
\nApp.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}Performance
\nSolid is Truly Reactive
\nCommunity Support, Documentation, and Resources
\nConclusion
\nWhat’s New and Improved on the LoginRadius Website?
\nA Developer-Friendly Dark Theme
\n![\"This](\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\")
Clear Categorization for LoginRadius Capabilities
\n![\"This](\"/e5358b82be414940f3fb146013845933/capabilities.webp\")
\n
\nDeveloper-First Navigation
\n![\"This](\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\")
Quick Understanding of Integration Benefits
\n![\"This](\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\")
Over to You Now!
\n