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 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! Currently, the LoginRadius Identity Platform processes more than 100K requests per second. As our developer and enterprise customers grow, we should be able to scale our APIs to handle staggering loads of requests per second. It won’t be surprising if our APIs have to serve a million requests per second in the future. Generally, we add more instances, CPU, or memory for supporting high request volumes. However, it has been burdening our infrastructure budget and maintenance. So, we’re focused on reducing the cost of compute capacity by improving efficiency. In this engineering update, we share our experience with a highly effective, low-risk, large-scale performance and cost optimization with Go. LoginRadius production environment consists of 30+ microservices backed by a cloud-native infrastructure. Most of these services are written in .NET and Node.js. In Q1 2021, we explored the possibilities of improving the performance of our services and optimizing costs. LoginRadius tech stack consists of 30+ microservices. We have different microservices for each business service like Authentication, Web SSO, Federated SSO, etc. Core Applications: Multiple microservices instances for Authentication, Account API, Analytics API, Risk-based Authentication, Backend Jobs, Integrations, and much more, Data Storage: MongoDB, Elasticsearch, Redis, and PostgreSQL clusters are used to store a range of datasets for various applications and functionalities. Queues: Amazon Kinesis Data Streams, Amazon Simple Notification Service (SNS), Amazon Simple Queue Service (SQS), and Azure Queue Storage. Other Services: Services for rate-limiting, bcrypt clusters, feature flags, and more. Routing: AWS load balancers (ALB, NLB, and ELB from AWS) and some nodes running NGINX as a proxy. We've been utilizing a multi-cloud and multi-region architecture for years based on our and our customers’ data and privacy compliance requirements. However, as our usage (and load) grew with maintenance costs, we relied more on AWS resources. This is the basic architecture of the environment in the US: The above diagram shows two cloud regions — US East and US West. When requests come: So, how do we maintain high availability? Every availability zone has operating instances of all services (including databases). If one availability zone is down, we still have two availability zones. We are using a two-pronged scaling approach as scaling based on resource utilization (CPU & Memory) alone is not practical. Once, our multi-tenant application received a sudden spike in API requests — from thousands of requests to millions. Usually, adding new infrastructure to the existing pool takes around 60 seconds. And application deployment and start-up time were about 90 seconds. Plus, considering other possible delays in scaling, we can lose about 5 minutes for scaling up. Further, adding the time to gather metrics and make the scaling decision, the total delay can be ~6 minutes. This process can impact all multi-tenant customers' critical applications because user authentication and authorization are essential. We keep Scaling Buffers to support this kind of scenario. Scaling Buffers: During the Scale-up Time, the Scaling Buffer is the service's highest predicted traffic spike. Depending on the scaling strategy, we store several types of the buffer. Usually, we set a one million requests concurrency buffer. And based on the traffic pattern, our scaling automation triggers the scaling. Our Platform performance is good. We can quickly handle millions of requests, and our application platform was scalable but not great. Minding the kind of growth we’re expecting, we wanted to improve and prepare our platform for the future. No. of requests can fluctuate within a few seconds if not minutes or hours, especially with specific events such as holiday shopping, promotional events, Black Friday, etc. So, in the event of traffic spikes, application startup time plays a significant role in scaling. Our application startup time was around 90 seconds, so whenever scaling was happening due to high traffic, scaling took more time. That's why we needed to improve the application startup time. We used hundreds of AWS c5.2xlarge instances in a production environment to handle daily traffic. During certain events such as holiday shopping and Black Friday, we doubled our infrastructure according to expected traffic with a 20~30% buffer. We kept a high buffer because scaling took time with the existing .NET Core services. As a result, infrastructure cost was burdening as we were inefficiently deploying cloud infrastructure. We designed our Identity Platform a few years ago. Since then, the technology landscape has dramatically improved and optimized in recent years. Also, current technology platforms available to build and support our product (Identity Platform) are limited. So, it is crucial to align functionality with proper technology capabilities. We were facing challenges in customization. It was inflexible and limiting to deliver the required outcomes in more complex situations and use cases. We did a lot of research to choose the appropriate programming language for our application. We needed a language that would be simple to understand and learn, easy to maintain, and has high concurrency. Our research ended with Go due to its amazing qualities. Let's take a closer look. Why choose Go? What makes Go such an excellent development language? What distinguishes it from the competition? Let's get to the bottom of this by looking at what makes Go special. Go is an open-source programming language developed by Google's Rob Pike, Robert Griesemer, and Ken Thompson. It was initially released in 2009. It has several enhancements and additions based on the C syntax to properly control memory use, manage objects, and enable static or strict typing along with concurrency. Concurrent code can be executed in parallel by separate computer cores or in sequence. Most programming languages lack concurrent execution when working with multiple threads. They often slow down programming, compiling, and execution. Go works with goroutines that are lightweight, low-cost threads. And Go channels allow goroutines to communicate with one another. Sequential Processes Communication: They are very similar to threads in Java but lightweight, and the cost of creating them is meager. Go's core value is simplicity: it builds quickly, runs quickly, and is simple to learn. To help speed things up, there are no classes or type inheritance. This makes it easier to build a market-ready product quickly. Furthermore, its simplicity allows for quick and simple maintenance. Go has an excellent standard library that includes a large number of built-in essential type functions and packages that are both practical and straightforward to use: I/O, encoding and decoding, manipulating raw bytes, network utility functions, parsing, debugging, and a lot more are all made simple by particular packages. Testing support is also included in the standard library, so no other dependencies are required. Go has a simpler syntax than other languages and is simple to learn. The syntax of Go is somewhat similar to the C language. Developers can begin with Go in a couple of hours, but they need to spend time understanding best coding practices, especially understanding goroutines for concurrency. We run benchmarks on our API so that the performance insights help us make decisions about the tech stack. It will paint a clearer picture of where we stand compared to our existing tech stack and what areas need improvement or immediate attention. We did multiple stress tests on our high usage APIs built separately with .NET Core(Old) and Go (new). We are using Kubernetes to deploy and manage our microservices and application infrastructure and deploy our application microservices across multiple Pods. We deployed both applications in the same infrastructure and did the same stress test.\nGolang application has performed much better. You can see some errors in Graph - 1(a) after ramping up to 15K users. Also, response time is increasing, as seen in Graph - 1(b). The application can recover after a couple of seconds, and after that, the application cannot respond. Application scaling is taking time. And existing infra cannot handle this spike, so the application crashes after 18K RPS. We did the same stress test with the new Go application. It is easily able to handle this kind of concurrency without any issue. The Go application can easily handle 20K ramp-up requests per second without any issue, as shown in Graph -2(a). You can see in Graph - 2(b) what the response time was after 2 min 47 sec for a couple of seconds. The Go application was scaling during that time. It is scaling quickly, so it is not impacting API request performance, and, also, the application can recover response API time as expected. In this article, you have learned how we have achieved better API performance by rebuilding them in Go, which were previously built in .NET Core. And you have understood our approach to this transition and how it increased the API performance of the LoginRadius Identity Platform. Leverage LoginRadius Identity Platform to build authentication functionality for your web and mobile apps. Sign up for a free LoginRadius account here B2B applications require connecting customers and partners with their existing identity system or directory. Customers often want their employees or end-users to access your product and service with hierarchical access rights and their existing identity. Managing these requirements in-house can be tricky and time-consuming. However, the LoginRadius B2B Identity solution can bridge this gap for your business and help you eliminate friction. Above all, it serves a faster go-to-market with an industry-leading deployment time of 3-4 weeks while ensuring the following: LoginRadius B2B Identity allows your customers and partners to effectively create their accounts without needing them to create another identity. This feature lets you give customers and partners authority to manage accounts and access via their internal identity sources or your dashboard. Let’s say: your customer wants to allow only marketing and sales employees of the organization to access your B2B application. And within those 20 employees, the access rights will be different. LoginRadius B2B Identity can allow your customer to use their internal identity for authentication and manage the provision and access of their employee accounts within their identity source. Similarly, suppose some customers do not want to use internal identity for authentication and authorization. In that case, they can easily do this via managing configurations like login method, roles, and permission from your application dashboard. LoginRadius B2B Identity works in the background to smoothly process these requirements. To allow your customers and partners to use their internal identity for authentication, you must configure Federated SSO protocols depending on their identity application. With LoginRadius B2B Identity, you get effortless integration of the most popular and complex SSO protocols, such as SAML, JWT, and OAuth. Let’s say one of your customers wants to authenticate using Salesforce while the other prefers to utilize their AWS identities. You can utilize OAuth integration for authentication using Salesforce and SAML integration for authentication using AWS — without understanding both protocols’ complexity and in-depth implementation. Not just this, integration of these protocols is entirely maintenance-free; any required change or updates in protocols are taken care of by LoginRadius. Get a centralized view of all your customers and partners. You can easily manage their identities and access controls (roles and permissions) from the LoginRadius Dashboard or the LoginRadius Management APIs. Revoke access automatically upon user offboarding to ensure effortless access security to applications of your customers and partners. Similarly, it revokes customers’ and partners’ access rights to your application in case of churn or contract termination. LoginRadius B2B Identity lets you delegate admin access to your customers and partners for seamlessly managing their employees and users. Consequently, it saves the efforts and time of your IT support team. Also, you can set up self-serve registration for your customers and partners, thus saving time in manually setting up their accounts. Similarly, these customers and partners can facilitate self-serve registration for their employees and users. The following built-in capabilities of LoginRadius CIAM lets you meet data regulations and protect customers’ and partners’ data privacy: LoginRadius Dashboard lets you access your application's audit logs of activities performed by customers and partners. Also, you can access 30 different analytical charts to understand your customer and partner base and engagement. The following explains the step-by-step implementation of LoginRadius B2B Identity: Note: To implement B2B Identity, you must have a Developer Pro account with LoginRadius. Create a Developer Pro account here for 21 days of the free trial. These are your customers or partner organizations who need to access your application. You can create and manage these Organizations using the following APIs: Create Organizationsdocs/references/api/b2b-identity/#create-organization) API Endpoint: Update Organizationsdocs/references/api/b2b-identity/#update-organization) API Endpoint: PUT Remove Organizationsdocs/references/api/b2b-identity/#remove-organization) API Endpoint: DELETE Update Organization Statusdocs/references/api/b2b-identity/#update-status-of-organization) API Endpoint: PUT These are the roles that organization users will have to access permission-based resources and processes. You can create, assign, and manage roles using the following APIs: Create Roledocs/references/api/roles-management/#roles-create) API Endpoint: Add Permission to Roledocs/references/api/roles-management/#add-permissions-to-role) API Endpoint: PUT Remove Permission from Roledocs/references/api/roles-management/#remove-permissions) API Endpoint: DELETE Set Roles for Organizationdocs/references/api/b2b-identity/#addupdate-roles) API Endpoint: Add User to Organizationdocs/references/api/b2b-identity/#add-user-to-organization) API Endpoint: Remove Users from Organizationdocs/references/api/b2b-identity/#remove-users-from-organization) API Endpoint: DELETE Get Organization Usersdocs/references/api/b2b-identity/#organization-users) API Endpoint: GET You can allow organizations to use the organizational identity or ask them to create an identity for authenticating themselves. Set Global IDP for Userdocs/references/api/b2b-identity/#set-global-idp-on-profile): Set a global Identity Provider authentication method from the already enabled authentication methods for your LoginRadius App. The global IDP will apply to organizations of all your customers and partners. For example: Login with Gmail, Login with Facebook, Login with Email-Password, etc. API Endpoint: Note: To show the global IDP to all organizations, turn the setting on via this APIdocs/references/api/b2b-identity/#set-global-authentication-method-for-organization). Create SAML Login for Organizationdocs/references/api/b2b-identity/#create-organizational-saml-idp): Set a SAML authentication method specific to the customer or partner. For example: Login with Salesforce for one customer and Login with Azure AD for another customer. So, customers and partners can easily authenticate using their identity provider rather than creating a new identity. API Endpoint: You can manage the welcome email and related email communication for the organization users using LoginRadius Dashboard, as explained heredocs/guide/manage-organizations/#manage-email-template-and-setting). Save on R&D, engineering resources, and maintenance by utilizing LoginRadius B2B Identity — consequently, go to market faster. Create a Developer Pro account here to start your journey of eliminating authentication and access friction from your B2B business. A cyber attack is a sequence of actions performed by a threat actor to obtain unauthorized access to a computer, computer network, or other computing systems to intentionally steal data, harm innocent people, or launch attacks from a compromised computer. To launch a cyberattack, cybercriminals utilize many methods, including phishing, ransomware, malware, man-in-the-middle attack, and denial of service, among others. Phishing is used to steal user credentials and sensitive data such as credit card numbers and social security numbers or install malware on a victim's machine. An attacker usually sends fraudulent communications that appear to be from a reputable source. Specifically, scammers send emails or text messages containing malicious links in a manner that seems to originate from legitimate senders. Denial-of-Service (DoS) and Distributed Denial-of-Service (DDoS) attacks send malicious and spam requests to a system or network, severely restricting the ability to perform and serve legitimate users and requests. This attack is frequently used to set up another attack. Vishing combines voice and phishing in which an attacker tricks a victim to steal personal and confidential information. It is a social engineering attack as it relies on psychology to convince victims to give sensitive information or perform an action for the attacker's benefit. Malware attacks are common types of cyberattacks in which malware (usually malicious software) performs unauthorized actions like stealing personal, financial, or business information on the victim's system. Malicious software is created in several forms, including ransomware, spyware, and command and control. Ransomware is malware that threatens to expose or limit access to data or a computer system by encrypting valuable data or limiting system functionality. Cybercriminals demand monetary incentives (ransom) for releasing the system after encrypting or locking the data. A deadline is typically attached to the ransom demand. If the victim does not pay the ransom on time, the data will be lost permanently, or the ransom will be increased. A man-in-the-middle (MiTM) attack occurs when an attacker intercepts and distributes messages between two participants who think they are interacting directly and securely. Participants who send emails, instant messages, or video conferencing are unaware that an attacker has inserted themselves into the conversation and is collecting and manipulating their information. A Brute-force Attack is an attempt to find a credential, such as a password, using computer-based automated trial and error. The attack involves automated spraying of all possible character combinations and lengths into a password field until a match. Brute-force attacks are successful when the authentication protocol of an online service complements this type of attack. Shared secrets between the service and the user provide the highest probability of success for a brute-force attacker. Any cyberattack that targets an Internet of Things (IoT) device or network is known as an IoT attack. Once the device has been hacked, the hacker can take control of it, steal data, or join a network of infected devices to execute DoS or DDoS attacks. A keylogger is spyware that logs a user's activity by logging keystrokes. Every key pushed on the keyboard is captured and forwarded to a malicious actor when the spyware installs a keylogger on a device. As a result, the attacker will have access to data streams that help find user passwords and other sensitive information. Keylogger spyware is generally installed on the user's device by unintentionally clicking on a malicious link or attachment. Cross-site Scripting (XSS) attacks use third-party online resources in which malicious scripts are inserted into a legitimate website or application to obtain a user's information. Attackers commonly employ JavaScript, Microsoft VBScript, ActiveX, and Adobe Flash for XSS attacks. A web app is usually vulnerable to XSS attacks when it receives user input without validating or encoding it in its output. Cyberattacks are becoming ever more common and sophisticated, mostly with financial motives.\nWhile preventative cybersecurity tactics vary by attack type, you should follow best security practices and practice IT hygiene for mitigating these attacks. These cyber-threats are creating more emphasis to stack up security measures. You can follow these Security Tips, which are well-known among LoginRadius’s cybersecurity Experts. Web design and CSS have come a long way. And today, modern websites have everything you could wish for alongside stunning designs. Then why should your website's login and signup forms look boring? The web ecosystem has tons of reliable third-party libraries and frameworks to help you build intuitive designs even if you're not a design wizard. Amidst the plethora of libraries comes a utility first CSS framework called Tailwind CSS. So in this post, you'll learn: I'll then walk you through step by step how to use it to create a modern login and signup form with routing in React. Finally, you'll see how to make these forms functional using LoginRadius Authentication APIs docs/references/api/authentication). If you've heard of Materialize and Bootstrap, Tailwind CSS is much similar in what it offers. It's a CSS framework that helps developers build layouts, components, themes, and whatnot, without writing all the CSS themselves. However, unlike Bootstrap and Materialize, it doesn't give you built-in components out of the box. Instead, it gives you a wide range of fully customizable utility classes that you can use to style your pages. Also, it's pretty easy to integrate with modern frontend frameworks like React, NextJS, VueJS, Angular, Svelte, etc. I'll also explore that shortly when we add Tailwind to our React app. On the downside, Tailwind might make your HTML bloated with loads of CSS classes for small and specific rules. However, you can control it with a framework like React by building smaller reusable components and using JSX bindings for long class names for more maintainability and readability. In fact, we'll take this optimal approach in building our Login form, so you'll understand some best practices you can use to avoid bloated HTML templates in your React app. We'll create a simple yet modern looking login and signup form that looks like this: It will be interactive using React state, can route to different pages, and we'll also, in the end, talk about how we can make it functional from a backend standpoint. Sounds good? Let's start by understanding how we can add TailwindCSS to our React app. Inside a directory of your choice, create a new React project by running: Next, move inside the project and install react-router-dom by running: Now, add Tailwind to your React project by following the steps given here. First, install Tailwind CSS and its related dependencies by running the following command in the root directory: Next, generate some configurational files by running the following command in the root directory: That should generate a Awesome! Now, go ahead and update the Almost there! We'll now add some necessary Tailwind directives to your Each of the above directives represents a layer of Tailwind's utility classes that you can use in your project. Their declaration allows using these utility classes anywhere in your project. Finally, we'll kickstart your React project by spinning a local development server: You're now ready to start using Tailwind CSS to create some awesome-looking UI for your React app! We'll break down the entire page into small, reusable components to ensure that your code is readable and maintainable and doesn't have bloated HTML templates. For instance, you can have a Similarly, you can have a reusable custom So first, let's go ahead and create these files and folders. You'll develop corresponding files for the Signup page as well. Create the following files and folders inside your root directory: For perspective, here's how we'll use those components to build your entire Login Page: For the Login.js files ( Similarly, you can create such boilerplates for the rest of the files. You've created a The above file has two arrays: one each for your login form fields and signup form fields. Each array contains an object that contains attributes for the input fields. The field names should be self-explanatory as to what they represent. Here's a quick summary of that: Later, we'll use this array to cycle through each input field and render a custom As you already have your components boilerplates in place, let's first set up routing for your app. By default, when a user opens the app, we'll direct them to a Login page. Then, if the route changes to /signup, we'll direct them to a Signup page. Head over to your Notice that you have two containers wrapped around your The first container gives a minimum height of 100% and sets a fixed height of the container to 100vh via the Finally, we have some padding classes prefixed with Similarly, the second container sets some width for its child elements and provides some spacing via the respective Tailwind classes. Now, let's create the Head over to Your Using the ' justify-center ' class, we place all these elements inside a flexbox container and horizontally center them. There is also an outer container that simply gives the header some bottom margin using the Then, we give our header image some fixed height and width using the Finally, our text and links have some typography classes for font-size, font-colour, hover effect, and font-weight. Let's now go ahead and render the Here's what the login page should now look like: Let's now start building the rest of the Login page form. We'll now create our reusable and great looking Head over to the Remember all those fields' key-value pairs you set earlier in your Those are all the props your Notice how the HTML markup of this component looks very clean. How is that possible? Are you not using any Tailwind classes here? As there are a lot of Tailwind classes for styling this input field, we have created a constant for it — called We also take a Next, create the Based on your Then we have a Then we simply loop through the Before seeing how the login form looks, you need to render it inside your Login page. So render the above Now, if you go back to your React app, you should see your Login page input fields appear as follows: Excellent, it looks like you're almost there! Now add the final pieces to the Login page by writing the The Inside Again here we're using some Tailwind typography and flexbox classes to style and structure the layout of the UI. Let's go to the Add the following code inside this file: Notice that you also have loads of CSS classes inside our At last, we'll put everything together inside And once we do that, we should have a stunning, modern looking login page appear right in front of us: You've created so many reusable components. Now, it's straightforward to use them to build the Signup page further. Feel free to take this as a challenge and build it yourself based on what you've learned. Here's a quick walkthrough of the steps and how you can use the same approach to build the Signup page in minutes. First, create a main Here's how the entire code looks like: Then, render this component inside And that's it! That's all there is to build a great looking signup page that looks as follows: Don't worry; if you got stuck somewhere, feel free to refer to the entire codebase for this tutorial here. You can use LoginRadius to quickly set up an authentication backend for your frontend application. First, set up an account, and get your API key from your Account Dashboard. Then, you can use their login endpoint to authenticate users. The endpoint takes an email and password as parameters and validates them against the correct credentials. If we were to integrate this endpoint in our previously built Similarly, you can use the Signup endpoint to create users without managing a complete backend database yourself. Curious to learn more? I did a full-fledged guide on authenticating Svelte apps with LoginRadius here. In this tutorial, you have learned to create beautiful registration and authentication forms for your web app with Tailwind CSS. You also learned the advantages and disadvantages of Tailwind CSS and understood how Tailwind CSS works better with React. Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients. What does it mean for user authentication? On one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes). On the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies. In this article, we’ll discuss: Third-party cookie restrictions affect user authentication in three ways, as follows. If your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app. If you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials. If you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future. For example, you have apps at Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO. Usually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits. For example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords. Note: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method). Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative. Specific to authentication, Google recommends the following: CHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds. For example, a user visits If the user visits You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes. If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions. However, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues. With Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage. Storage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context. It is most suitable when loading cross-site resources and interactions, such as: Verifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible. As it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options. With Related Website Sets, you can declare a Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe. It is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature. The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication. Related Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited. FedCM API enables federated SSO without third-party cookies. With FedCM API, a user follows these steps for authentication: You can access a user demo of FedCM here: FedCM. For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide. Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different. We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers. Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out. The proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community. Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does. From LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out. Top-level site: It is the primary site a user has visited. First-party cookie: A cookie set by the top-level site. Third-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited \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
\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
\nIntroduction
\nHow LoginRadius Has Been Handling High RPS Throughput?
\n\n
\n1) Architecture
\n2) Availability
\n\n
\n\n
\n3) Scaling
\n\n
\nWhy Scaling Was Challenging?
\n\n
\nWhy Our Platform Performance Was Good, But Not Great?
\nChallenges in the Existing Platform
\n1) Startup Time
\n2) Cost
\n3) Lack of Flexibility and Customization
\nThe Road to Lightning Performance, Thanks to Go
\nWhy Go?
\nGo — Background
\n1) Concurrency
\n2) Performance
\n3) Standard Library
\n4) Easy to Learn
\nBenchmarking API Performance Gains
\nStress Test Scenario
\n\n\n
\n\n \n\n\nTest Item \nValue \n\n \nInstance Type \nc5.2xlarge on AWS \n\n \nNo. of Instances \n20 \n\n \nReverse Proxy \nNGINX \n\n \nConcurrent Requests \n20K per second \n\n \nDuration \n5 minutes \n\n \n\nStress Test Tool \nGatling \nExisting Application Matrix — .NET Core
\n![\"Requests](\"/static/065af3c1452371eeef2cc2e9c6eecd81/01e7c/requests-and-responses-per-second-dot-net-core.png\" "\\"Requests")
\n \n ![\"API](\"/static/10602d758e3df688d22b7e79cfa22e5f/01e7c/response-time-percentiles-dot-net-core.png\" "\\"API")
\n \n ![\"Overall](\"/static/bd266c07f16fd3b1904ef569a8ca6425/01e7c/overall-matrix-dot-net-core.png\" "\\"Overall")
\n \n New Application Matrix — Go
\n![\"Requests](\"/static/da6febfd92d89610654f4c6c921720cd/01e7c/requests-and-responses-per-second-go-lang.png\" "\\"Requests")
\n \n ![\"Overall](\"/static/397ef4b4903cbbacdb16a5ab45b0f16f/01e7c/overall-matrix-go-lang.png\" "\\"Overall")
\n \n Conclusion
\nEasy Onboarding and Administration Delegation
\nMaintenance-free SSO Protocols Integration
\nSecure and Unified Access
\nReduced IT Support Overhead
\nData and Privacy Protection
\n\n
\nAudit Logs and Intelligence
\nImplement B2B Identity Management with LoginRadius
\n\n
\n\n
\nStep 1: Organization Management
\n\n
\nhttps://api.loginradius.com/identity/v2/manage/organizationshttps://api.loginradius.com/identity/v2/manage/organizations/{id}https://api.loginradius.com/identity/v2/manage/organizations/{id}https://api.loginradius.com/identity/v2/manage/organizations/{id}/statusStep 2: Roles Management for Organization
\n\n
\nhttps://api.loginradius.com/identity/v2/manage/rolehttps://api.loginradius.com/identity/v2/manage/role/{role}/permissionhttps://api.loginradius.com/identity/v2/manage/role/{role}/permissionhttps://api.loginradius.com/identity/v2/manage/organizations/{id}/defaultrolesStep 3: User Management for Organization
\n\n
\nhttps://api.loginradius.com/identity/v2/manage/organizations/{id}/membershttps://api.loginradius.com/identity/v2/manage/organizations/{id}/membershttps://api.loginradius.com/identity/v2/manage/organizations/{id}/membersStep 4: Login Methods for Organization Users
\n\n
\nhttps://api.loginradius.com/identity/v2/manage/organizations/{org_id}/members/{uid}/idp/global\n
\nhttps://api.loginradius.com/identity/v2/manage/organizations/{org id}/idp/samlManage Email Communication
\nConclusion
\nWhat is a Cyber Attack?
\n1) Phising
\n2) DoS and DDoS
\n3) Voice Phishing Or Vishing
\n4) Malware
\n5) Ransomware
\n6) Man-in-the-Middle Attack
\n7) Brute-fore Attack
\n8) IoT Devices
\n9) Spyware & Keyloggers
\n10) Cross-site Scripting (XSS)
\nTo Conclude
\n\n
\nWhat is Tailwind CSS?
\nWhat You'll Build Today?
\nProject Setup
\n
\nnpx create-react-app react-tailwind-app
\ncd create-react-app react-tailwind-app && npm i react-router-domInstall Tailwind CSS
\n
\nnpm install -D tailwindcss postcss autoprefixer
\nnpx tailwindcss init -ptailwind.config.js file and postcss.config.js file for you as shown:Configuring Tailwind CSS
\ntailwind.config.js file to support templates for your React component files as shown:
\nmodule.exports = {\n content: [\n "./src/**/*.{js,jsx,ts,tsx}",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}index.css file present in the root directory:
\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n...
\nnpm startFrontend Architecture and Boilerplate
\nComponent Architecture
\n<Header/> component that takes care of the page's heading and displays a link to navigate to another page. <Input/> component that can be used inside the form. All in all, here's what your frontend architecture would look like:Directory Structure
\n
\n.\n├── components/\n│ ├── FormAction.js\n│ ├── FormExtra.js\n│ ├── Header.js\n│ ├── Input.js\n│ ├── Login.js\n│ └── Signup.js\n├── constants/\n│ └── formFields.js\n└── pages/\n ├── Login.js\n └── Signup.js/src/pages/Login.js), you can put down the following code:
\nexport default function LoginPage(){\n return(\n <>\n \n </>\n )\n}Form Fields Constants
\nformFields.js file earlier. This file will hold all the input fields related constants like placeholder, value, name, field type, etc. Inside this file, add the following code:
\nconst loginFields=[\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n }\n]\n\nconst signupFields=[\n {\n labelText:"Username",\n labelFor:"username",\n id:"username",\n name:"username",\n type:"text",\n autoComplete:"username",\n isRequired:true,\n placeholder:"Username" \n },\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n },\n {\n labelText:"Confirm Password",\n labelFor:"confirm-password",\n id:"confirm-password",\n name:"confirm-password",\n type:"password",\n autoComplete:"confirm-password",\n isRequired:true,\n placeholder:"Confirm Password" \n }\n]\n\nexport {loginFields,signupFields}\n
\nlabelText: The label for an input fieldlabelFor: The value that associates a label to the input field via an id attribute on the input fieldid, name , type, and placeholder: Respective attributes on the input field isRequired: If you want to make an input field mandatory, in this case, all our input fields for form submission will be mandatory<Input/> component that you'll create shortly.Set Up Routing
\n/src/App.js file and add the following code:
\nimport './App.css';\nimport {\n BrowserRouter,\n Routes,\n Route,\n} from "react-router-dom";\nimport SignupPage from './pages/Signup';\nimport LoginPage from './pages/Login';\n\nfunction App() {\n return (\n <div className="min-h-full h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">\n <div className="max-w-md w-full space-y-8">\n <BrowserRouter>\n <Routes>\n <Route path="/" element={<LoginPage/>} />\n <Route path="/signup" element={<SignupPage/>} />\n </Routes>\n </BrowserRouter>\n </div>\n </div>\n );\n}\n\nexport default App;<BrowserRouter/> with some long classnames. min-h-full and h-screen classes. Then, it centers everything via flex, items-center to vertically center all the flex child elements, and justifty-center to center them horizontally. p. For top and bottom padding, we use the prefix py- followed by some value. We also have some responsive padding on small and large screen devices prefixed with sm: and lg: respectively. You can learn more about these padding and margin properties to see other similar classes you can use. The Header Component
\n<Header/> component that you can render on both the login and signup pages for quick information and navigation./src/components/Header.js, and add the following code:
\nimport {Link} from 'react-router-dom';\n\nexport default function Header({\n heading,\n paragraph,\n linkName,\n linkUrl="#"\n}){\n return(\n <div className="mb-10">\n <div className="flex justify-center">\n <img \n alt=""\n className="h-14 w-14"\n src="https://ik.imagekit.io/pibjyepn7p9/Lilac_Navy_Simple_Line_Business_Logo_CGktk8RHK.png?ik-sdk-version=javascript-1.4.3&updatedAt=1649962071315"/>\n </div>\n <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">\n {heading}\n </h2>\n <p className="mt-2 text-center text-sm text-gray-600 mt-5">\n {paragraph} {' '}\n <Link to={linkUrl} className="font-medium text-purple-600 hover:text-purple-500">\n {linkName}\n </Link>\n </p>\n </div>\n )\n}<Header/> component takes four props:\n
\nheading that it displays on the top;paragraph;linkName to display which page it will redirect the user to; and,linkUrl.mb-10 class.h-14 and w-14 classes, respectively. <Header/> component with all the props inside the Login page (/src/pages/Login.js):
\nimport Header from "../components/Header"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n \n </>\n )\n}The Input Component
\n<Input/> component that you'll use to build your Login form./src/components/Input.js file, and add the following code:
\nconst fixedInputClass="rounded-md appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"\n\nexport default function Input({\n handleChange,\n value,\n labelText,\n labelFor,\n id,\n name,\n type,\n isRequired=false,\n placeholder,\n customClass\n}){\n return(\n <div className="my-5">\n <label htmlFor={labelFor} className="sr-only">\n {labelText}\n </label>\n <input\n onChange={handleChange}\n value={value}\n id={id}\n name={name}\n type={type}\n required={isRequired}\n className={fixedInputClass+customClass}\n placeholder={placeholder}\n />\n </div>\n )\n}formFields.js constants file?<Input/> component will take. It will also take a value and a handleChange prop since we want this to be a controlled component linked to some state.fixedInputClass. It contains all the essential styling classes for the input field.customClass prop that will append any custom Tailwind class you want to pass to the input field for customizations. How cool is that?!The Login Component
\n<Login/> component inside /src/components/Login.js, where the entire Login form will be rendered. This component will also be responsible for owning any state or event handlers passed down as props to other child components.loginFields from your formFields constants, we programmatically generate an initial value for your loginState.handleChange event handler to update the state whenever an onChange event is fired from the nested <Input/> component. fields array and render an <Input/> component that you've created in the previous section.
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n\n return(\n <form className="mt-8 space-y-6">\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n \n\n </form>\n )\n}<Login/> component inside /src/pages/Login.js file as shown:
\nimport Header from "../components/Header"\nimport Login from "../components/Login"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n <Login/>\n </>\n )\n}<FormExtra> and <FormAction/> components.Wrapping Up the Login Page
\n<FormExtra/> component holds the template and styles for a simple \"Remember me\" functionality. /src/components/FormExtra.js file, add the following code:
\nexport default function FormExtra(){\n return(\n <div className="flex items-center justify-between ">\n <div className="flex items-center">\n <input\n id="remember-me"\n name="remember-me"\n type="checkbox"\n className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"\n />\n <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">\n Remember me\n </label>\n </div>\n\n <div className="text-sm">\n <a href="#" className="font-medium text-purple-600 hover:text-purple-500">\n Forgot your password?\n </a>\n </div>\n </div>\n\n )\n}/src/components/FormAction.js file and create a submit button for the Login form.
\nexport default function FormAction({\n handleSubmit,\n type='Button',\n action='submit',\n text\n}){\n return(\n <>\n {\n type==='Button' ?\n <button\n type={action}\n className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 mt-10"\n onSubmit={handleSubmit}\n >\n\n {text}\n </button>\n :\n <></>\n }\n </>\n )\n}<button/> element to style it. It makes our HTML appear bloated and difficult to read. We can follow the same approach of using a constant and a prop against the className for the <button/> as we previously did to combat this. /src/components/Login.js file as follows:
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport FormAction from "./FormAction";\nimport FormExtra from "./FormExtra";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n authenticateUser();\n }\n\n //Handle Login API Integration here\n const authenticateUser = () =>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n <FormExtra/>\n <FormAction handleSubmit={handleSubmit} text="Login"/>\n\n </form>\n )\n}The Signup Page
\n<Singup/> component inside /src/components/Signup.js file similar to the <Login/> component you've completed in the previous section. It will render the signup form fields and attach state and event handlers to it.
\nimport { useState } from 'react';\nimport { signupFields } from "../constants/formFields"\nimport FormAction from "./FormAction";\nimport Input from "./Input";\n\nconst fields=signupFields;\nlet fieldsState={};\n\nfields.forEach(field => fieldsState[field.id]='');\n\nexport default function Signup(){\n const [signupState,setSignupState]=useState(fieldsState);\n\n const handleChange=(e)=>setSignupState({...signupState,[e.target.id]:e.target.value});\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n console.log(signupState)\n createAccount()\n }\n\n //handle Signup API Integration here\n const createAccount=()=>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={signupState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n <FormAction handleSubmit={handleSubmit} text="Signup" />\n </div>\n\n \n\n </form>\n )\n}/src/pages/Signup.js alongside the <Header/> components with some modified props for the signup page.
\nimport Header from "../components/Header";\nimport Signup from "../components/Signup";\n\nexport default function SignupPage(){\n return(\n <>\n <Header\n heading="Signup to create an account"\n paragraph="Already have an account? "\n linkName="Login"\n linkUrl="/"\n />\n <Signup/>\n </>\n )\n}Use LoginRadius Authentication APIs
\n<Login/> component (/scr/components/Login.js), here's what the authenticateUser method would look like:
\n//Handle Login API Integration here\n const authenticateUser = () =>{\n \n \n const endpoint=`https://api.loginradius.com/identity/v2/auth/login?apikey=${apiKey}`;\n fetch(endpoint,\n {\n method:'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body:JSON.stringify(loginFields)\n }).then(response=>response.json())\n .then(data=>{\n //API Success from LoginRadius Login API\n })\n .catch(error=>console.log(error))\n \n }Conclusion
\n\n
\nHow is User Authentication Affected?
\nExternal Identity Providers
\nWeb SSO
\nexample.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.Federated SSO
\n\n
\nChrome’s Alternatives for Third-Party Cookies
\n\n
\nCookies Having Independent Partitioned State (CHIPS)
\na.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com. b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.Storage Access API
\nRelated Website Sets
\nprimary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.resuestStorageAccessFor() API.Federated Credential Management (FedCM) API
\n\n
\nHow is LoginRadius Preparing for the Third-party Cookie Phase-out?
\nIn Conclusion
\nGlossary
\na.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.References
\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":6,"currentPage":2,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}