![\"TailwindCSS](\"/f9f7213831dbd7161f16486cc61ee481/tailwind-css-vs-bootstrap-comparison.webp\")
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.
\nManaging 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:
\nLoginRadius B2B Identity allows your customers and partners to effectively create their accounts without needing them to create another identity.
\nThis feature lets you give customers and partners authority to manage accounts and access via their internal identity sources or your dashboard.
\nLet’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.
\nSimilarly, 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.
\nTo 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.
\nLet’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.
\nNot just this, integration of these protocols is entirely maintenance-free; any required change or updates in protocols are taken care of by LoginRadius.
\nGet 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.
\nRevoke 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.
\nLoginRadius 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.
\nAlso, 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.
\nThe following built-in capabilities of LoginRadius CIAM lets you meet data regulations and protect customers’ and partners’ data privacy:
\nLoginRadius Dashboard lets you access your application's audit logs of activities performed by customers and partners.
\nAlso, you can access 30 different analytical charts to understand your customer and partner base and engagement.
\nThe following explains the step-by-step implementation of LoginRadius B2B Identity:
\n\n\nNote: 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.
\n
These are your customers or partner organizations who need to access your application. You can create and manage these Organizations using the following APIs:
\nCreate Organizationsdocs/references/api/b2b-identity/#create-organization)
\nAPI Endpoint: https://api.loginradius.com/identity/v2/manage/organizations
Update Organizationsdocs/references/api/b2b-identity/#update-organization)
\nAPI Endpoint: PUT https://api.loginradius.com/identity/v2/manage/organizations/{id}
Remove Organizationsdocs/references/api/b2b-identity/#remove-organization)
\nAPI Endpoint: DELETE https://api.loginradius.com/identity/v2/manage/organizations/{id}
Update Organization Statusdocs/references/api/b2b-identity/#update-status-of-organization)
\nAPI Endpoint: PUT https://api.loginradius.com/identity/v2/manage/organizations/{id}/status
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:
\nCreate Roledocs/references/api/roles-management/#roles-create)
\nAPI Endpoint: https://api.loginradius.com/identity/v2/manage/role
Add Permission to Roledocs/references/api/roles-management/#add-permissions-to-role)
\nAPI Endpoint: PUT https://api.loginradius.com/identity/v2/manage/role/{role}/permission
Remove Permission from Roledocs/references/api/roles-management/#remove-permissions)
\nAPI Endpoint: DELETE https://api.loginradius.com/identity/v2/manage/role/{role}/permission
Set Roles for Organizationdocs/references/api/b2b-identity/#addupdate-roles)
\nAPI Endpoint: https://api.loginradius.com/identity/v2/manage/organizations/{id}/defaultroles
Add User to Organizationdocs/references/api/b2b-identity/#add-user-to-organization)
\nAPI Endpoint: https://api.loginradius.com/identity/v2/manage/organizations/{id}/members
Remove Users from Organizationdocs/references/api/b2b-identity/#remove-users-from-organization)
\nAPI Endpoint: DELETE https://api.loginradius.com/identity/v2/manage/organizations/{id}/members
Get Organization Usersdocs/references/api/b2b-identity/#organization-users)
\nAPI Endpoint: GET https://api.loginradius.com/identity/v2/manage/organizations/{id}/members
You can allow organizations to use the organizational identity or ask them to create an identity for authenticating themselves.
\nSet 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.
\nFor example: Login with Gmail, Login with Facebook, Login with Email-Password, etc.
\nAPI Endpoint: https://api.loginradius.com/identity/v2/manage/organizations/{org_id}/members/{uid}/idp/global
\n\nNote: 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).
\n
Create SAML Login for Organizationdocs/references/api/b2b-identity/#create-organizational-saml-idp): Set a SAML authentication method specific to the customer or partner.
\nFor 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.
\nAPI Endpoint: https://api.loginradius.com/identity/v2/manage/organizations/{org id}/idp/saml
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).
\nSave on R&D, engineering resources, and maintenance by utilizing LoginRadius B2B Identity — consequently, go to market faster.
\nCreate a Developer Pro account here to start your journey of eliminating authentication and access friction from your B2B business.
\n","frontmatter":{"date":"May 31, 2022","updated_date":null,"description":"B2B companies need to manage identity differently to meet customer needs and deliver value efficiently while ensuring secure and seamless access. Read more to learn how your company can implement B2B identity management.","title":"Why B2B Companies Should Implement Identity Management","tags":["Identity","Access Management","B2B"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/e25d9ab8ae7c1c0010fb32fd588f892a/58556/b2b-identity-management.webp","srcSet":"/static/e25d9ab8ae7c1c0010fb32fd588f892a/61e93/b2b-identity-management.webp 200w,\n/static/e25d9ab8ae7c1c0010fb32fd588f892a/1f5c5/b2b-identity-management.webp 400w,\n/static/e25d9ab8ae7c1c0010fb32fd588f892a/58556/b2b-identity-management.webp 800w,\n/static/e25d9ab8ae7c1c0010fb32fd588f892a/99238/b2b-identity-management.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ravi Teja Ganta","github":"ravitejag","avatar":null}}}},{"node":{"excerpt":"What is a Cyber Attack? A cyber attack is a sequence of actions performed by a threat actor to obtain unauthorized access to a computer…","fields":{"slug":"/engineering/top-cyber-threats-in-2022/"},"html":"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.
\nPhishing 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.
\nDenial-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.
\nVishing 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.
\nMalware 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.
\nRansomware 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.
\nA 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.
\nA 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.
\nAny 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.
\nA 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.
\nCross-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.
\nCyberattacks 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.
\nThese 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.
\n","frontmatter":{"date":"May 31, 2022","updated_date":null,"description":"Cybercriminals are using an increasing number of attacks to exploit web apps and steal valuable data. This article teaches about the ten most common types of cyber threats.","title":"Top 10 Cyber Threats in 2022","tags":["Cyber Threats","Security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ee3ab87a1a76ecb64198016552132df2/58556/top-10-cyber-threats-in-2022.webp","srcSet":"/static/ee3ab87a1a76ecb64198016552132df2/61e93/top-10-cyber-threats-in-2022.webp 200w,\n/static/ee3ab87a1a76ecb64198016552132df2/1f5c5/top-10-cyber-threats-in-2022.webp 400w,\n/static/ee3ab87a1a76ecb64198016552132df2/58556/top-10-cyber-threats-in-2022.webp 800w,\n/static/ee3ab87a1a76ecb64198016552132df2/99238/top-10-cyber-threats-in-2022.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"excerpt":"Web design and CSS have come a long way. And today, modern websites have everything you could wish for alongside stunning designs. Then why…","fields":{"slug":"/engineering/guest-post/modern-login-signup-form-tailwindcss-react/"},"html":"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?
\nThe 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.
\nSo in this post, you'll learn:
\nI'll then walk you through step by step how to use it to create a modern login and signup form with routing in React.
\nFinally, you'll see how to make these forms functional using LoginRadius Authentication APIs docs/references/api/authentication).
\nIf 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.
\nHowever, 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.
\n
The community loves Tailwind. For most developers, the key takeaway is that it gives you more freedom on how you want your components or elements to look. So in many cases, when developers use component-based CSS frameworks like Bootstrap, they have a hard time changing the way they want their website to look.
\nBeing utility first, it's the most customization-friendly CSS framework!
\nAlso, 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.
\n![\"TailwindCSS](\"/06fb23108bb51f0605cc8bc50854aaf3/tailwind-css-pros.webp\")
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.
\nIn 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.
\nWe'll create a simple yet modern looking login and signup form that looks like this:
\n\nIt 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.
\nSounds good? Let's start by understanding how we can add TailwindCSS to our React app.
\nInside a directory of your choice, create a new React project by running:
\nnpx create-react-app react-tailwind-appNext, move inside the project and install react-router-dom by running:
\ncd create-react-app react-tailwind-app && npm i react-router-domNow, add Tailwind to your React project by following the steps given here.
\nFirst, install Tailwind CSS and its related dependencies by running the following command in the root directory:
\nnpm install -D tailwindcss postcss autoprefixerNext, generate some configurational files by running the following command in the root directory:
\nnpx tailwindcss init -pThat should generate a tailwind.config.js file and postcss.config.js file for you as shown:
![\"tailwind](\"/606f738075adcdf49ea31c6d70e2e6e7/tailwind-config-files.webp\")
Awesome!
\nNow, go ahead and update the tailwind.config.js file to support templates for your React component files as shown:
module.exports = {\n content: [\n "./src/**/*.{js,jsx,ts,tsx}",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}Almost there! We'll now add some necessary Tailwind directives to your index.css file present in the root directory:
@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n...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.
\nFinally, we'll kickstart your React project by spinning a local development server:
\nnpm startYou're now ready to start using Tailwind CSS to create some awesome-looking UI for your React app!
\nWe'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.
\nFor instance, you can have a <Header/> component that takes care of the page's heading and displays a link to navigate to another page.
Similarly, you can have a reusable custom <Input/> component that can be used inside the form. All in all, here's what your frontend architecture would look like:
![\"Login](\"/5495329b3eef5ec974da7e1b8fc0ebc2/login-page-architecture-hierarchy.webp\")
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:
\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.jsFor perspective, here's how we'll use those components to build your entire Login Page:
\n![\"Login](\"/910ca40300f36ac91bbeb3dd6ad91548/login-page-architecture.webp\")
Makes sense? Great!
\nWhile we're at it, let's also create some component boilerplate for all these files except the /src/constants/formFields.js.
For the Login.js files (/src/pages/Login.js), you can put down the following code:
export default function LoginPage(){\n return(\n <>\n \n </>\n )\n}Similarly, you can create such boilerplates for the rest of the files.
\nYou've created a formFields.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:
const 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}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.
\nThe field names should be self-explanatory as to what they represent. Here's a quick summary of that:
\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 mandatoryLater, we'll use this array to cycle through each input field and render a custom <Input/> component that you'll create shortly.
As you already have your components boilerplates in place, let's first set up routing for your app.
\nBy 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.
\nHead over to your /src/App.js file and add the following code:
import './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;Notice that you have two containers wrapped around your <BrowserRouter/> with some long classnames.
The first container gives a minimum height of 100% and sets a fixed height of the container to 100vh via the 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.
Finally, we have some padding classes prefixed with 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.
Similarly, the second container sets some width for its child elements and provides some spacing via the respective Tailwind classes.
\nNow, let's create the <Header/> component that you can render on both the login and signup pages for quick information and navigation.
Head over to /src/components/Header.js, and add the following code:
import {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.webp?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}Your <Header/> component takes four props:
heading that it displays on the top;paragraph;linkName to display which page it will redirect the user to; and,linkUrl.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 mb-10 class.
Then, we give our header image some fixed height and width using the h-14 and w-14 classes, respectively.
Finally, our text and links have some typography classes for font-size, font-colour, hover effect, and font-weight.
\nLet's now go ahead and render the <Header/> component with all the props inside the Login page (/src/pages/Login.js):
import 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}Here's what the login page should now look like:
\n![\"login](\"/26cab105a1a68063a75793b96d95ac80/login-page-header.webp\")
Let's now start building the rest of the Login page form.
\nWe'll now create our reusable and great looking <Input/> component that you'll use to build your Login form.
Head over to the /src/components/Input.js file, and add the following code:
const 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}Remember all those fields' key-value pairs you set earlier in your formFields.js constants file?
Those are all the props your <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.
Notice how the HTML markup of this component looks very clean. How is that possible? Are you not using any Tailwind classes here?
\nAs there are a lot of Tailwind classes for styling this input field, we have created a constant for it — called fixedInputClass. It contains all the essential styling classes for the input field.
We also take a customClass prop that will append any custom Tailwind class you want to pass to the input field for customizations. How cool is that?!
Next, create the <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.
Based on your loginFields from your formFields constants, we programmatically generate an initial value for your loginState.
Then we have a handleChange event handler to update the state whenever an onChange event is fired from the nested <Input/> component.
Then we simply loop through the fields array and render an <Input/> component that you've created in the previous section.
import { 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}Before seeing how the login form looks, you need to render it inside your Login page.
\nSo render the above <Login/> component inside /src/pages/Login.js file as shown:
import 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}Now, if you go back to your React app, you should see your Login page input fields appear as follows:
\n![\"login](\"/f2f741bbfdd9ca6d3a42e3c102fbce7f/login-page-with-input-fields.webp\")
Excellent, it looks like you're almost there!
\nNow add the final pieces to the Login page by writing the <FormExtra> and <FormAction/> components.
The <FormExtra/> component holds the template and styles for a simple \"Remember me\" functionality.
Inside /src/components/FormExtra.js file, add the following code:
export 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}Again here we're using some Tailwind typography and flexbox classes to style and structure the layout of the UI.
\nLet's go to the /src/components/FormAction.js file and create a submit button for the Login form.
Add the following code inside this file:
\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}Notice that you also have loads of CSS classes inside our <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.
At last, we'll put everything together inside /src/components/Login.js file as follows:
import { 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}And once we do that, we should have a stunning, modern looking login page appear right in front of us:
\n![\"login](\"/c4360134d23fb89738d726025f0eb31f/login-page.webp\")
You've created so many reusable components. Now, it's straightforward to use them to build the Signup page further.
\nFeel free to take this as a challenge and build it yourself based on what you've learned.
\nHere's a quick walkthrough of the steps and how you can use the same approach to build the Signup page in minutes.
\nFirst, create a main <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.
Here's how the entire code looks like:
\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}Then, render this component inside /src/pages/Signup.js alongside the <Header/> components with some modified props for the signup page.
import 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}And that's it! That's all there is to build a great looking signup page that looks as follows:
\n![\"Signup](\"/b8ecfd45a40ee9ddde096b6f2fcc1a14/signup-page.webp\")
Don't worry; if you got stuck somewhere, feel free to refer to the entire codebase for this tutorial here.
\nYou can use LoginRadius to quickly set up an authentication backend for your frontend application.
\nFirst, set up an account, and get your API key from your Account Dashboard.
\nThen, you can use their login endpoint to authenticate users.
\nThe 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 <Login/> component (/scr/components/Login.js), here's what the authenticateUser method would look like:
//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 }Similarly, you can use the Signup endpoint to create users without managing a complete backend database yourself.
\nCurious to learn more?
\nI did a full-fledged guide on authenticating Svelte apps with LoginRadius here.
\nIn 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.
\n","frontmatter":{"date":"May 17, 2022","updated_date":null,"description":"In this article, you'll learn how to instantly build great-looking authentication forms for Login and Signup using Tailwind CSS in React. You'll also understand how to make these forms functional using the third-party Authentication service LoginRadius.","title":"Build a Modern Login/Signup Form with Tailwind CSS and React","tags":["Tailwind CSS","React","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/0728a88362b98d67ce941ed2c33ccd43/58556/modern-login-and-signup-form-banner.webp","srcSet":"/static/0728a88362b98d67ce941ed2c33ccd43/61e93/modern-login-and-signup-form-banner.webp 200w,\n/static/0728a88362b98d67ce941ed2c33ccd43/1f5c5/modern-login-and-signup-form-banner.webp 400w,\n/static/0728a88362b98d67ce941ed2c33ccd43/58556/modern-login-and-signup-form-banner.webp 800w,\n/static/0728a88362b98d67ce941ed2c33ccd43/99238/modern-login-and-signup-form-banner.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Siddhant Varma","github":"FuzzySid","avatar":null}}}},{"node":{"excerpt":"There are many use cases of a system where machine-to-machine (M2M) communication is required, or you need to manage access for internal and…","fields":{"slug":"/engineering/using-m2m-authorization-for-apis-and-apps/"},"html":"There are many use cases of a system where machine-to-machine (M2M) communication is required, or you need to manage access for internal and external APIs. The example of M2M communications are:
\nIn such cases, the generic authentication methods such as email/password and social login — requiring human intervention — don’t fit well. These interactions also need a secure and easy-to-use authorization process for permission-based data access.
\nM2M Authorization fulfills both these requirements. Let’s know more about what it is and how it works.
\nM2M Authorization is the process of providing remote systems with secure access to information. Using this process, business systems can communicate autonomously and execute business functions based on predefined authorization.
\nIt is exclusively used for scenarios in which a business system authenticates and authorizes a service rather than a user.
\nLoginRadius M2M Authorization uses the Client Credentials Grant Flow (defined in OAuth 2.0 RFC 6749), in which the client passes along secure credentials to authenticate themselves and receive an authorization token.
\nSuppose an organization has a microservices environment consisting of multiple services running locally. The organization also has data storage on a different network and requires:
\nAs a standard process and security measure, services require authorization while saving and reading the data to and from the storage. The organization can use LoginRadius for autonomous authorization by creating two dedicated M2M apps with write and read permissions.
\nThe following two scenarios explain how you can use LoginRadius M2M Authentication and Authorization to share permission-based access of APIs to any internal or external systems:
\n\n\nImportant: M2M App referred to in the scenarios below must be created individually for each internal or external system you want to grant access to. Upon app creation, you receive the Client Id and Client Secret.
\n
Scenario 1: To grant desired access to your LoginRadius Management APIs.
\nTo start using the M2M Authorization for this scenario, you need to create an M2M App and define the desired scope of API(s), as explained here.
\n![\"Manage](\"/b8f744dd0b3e3134ba15da9a57065e06/manage-machine-to-machine-app.webp\")
Scenario 2: To grant desired access to your Business APIs.
\nTo start using the M2M Authorization for this scenario, you need to define your API in LoginRadius with name, identifier, and scope details and then create an M2M App with the desired scope of API(s), as explained here.
\n![\"Manage](\"/581f977dc41d3629a41005927d17d6d9/manage-authorization-server-apis.webp\")
In both scenarios, you get the Client Id and Client Secret for the created app, which you need to share with the partner or service who wants to access your APIs.
\nLoginRadius M2M Authorization uses client credentials grant flow from OAuth 2.0. In this flow, the client (depicted as Server 1 and Server 2 in the diagram below) holds Client ID and Client Secret and uses them to request an access token.
\nThis grant-type flow occurs strictly between a client app and the authorization server. The user does not participate in this grant-type flow.
\n![\"Client](\"/12bcf9518137404b87d488814bd56d4c/client-credentials-grant-flow.webp\")
The client (partner, API, service, etc.) requests the access token using the following API:
\nAPI endpoint: https://api.loginradius.com/services/oauth/token
The following is an example request:
\nPOST https://<LoginRadiusAppName>.hub.loginradius.com/service/oauth/token\nContent-Type: application/json\n{\n "audience": "`https://api.loginradius.com/identity/v2/manage",`\n "grant_type": "client_credentials",\n "client_id": "<YOUR_CLIENT_ID>",\n "client_secret": "<YOUR_CLIENT_SECRET>"\n}LoginRadius Authorization Server validates the request. Upon validation, it returns the JWT access token to the client.
\nThe following is an example response with an access token:
\n{\n "access_token": "eyJz93a...k4laUWw",\n "token_type": "Bearer",\n "expires_in": 86400,\n}\n\nJWT Token Details\n{\n "iss": "https://<LoginRadiusAppName>.hub.loginradius.com/",\n "sub": "<OAuth APPs APIKey>@client",\n "jti": "<unique Identifier>"\n "aud":"`https://api.loginradius.com/identity/v2/manage", //or https://service.example.com/api/v2`\n "cid": "<APPConfig APIKey>",\n "sid": "<LR access Token>" \n "exp": 1311281970,\n "iat": 1311281670,\n "scp": [\n "profile:read",\n "profile:create",\n ],\n "gty":"client_credentials"\n}The client can call APIs (as per the defined scope) using the JWT token. APIs will work based on permissions without the use of Client Secret.
\ncurl --request GET \\\n --url `https://api.loginradius.com/identity/v2/manage/account/{uid} \\`\n --header 'authorization: Bearer eyJhb……….jVZ2w'\n --header 'X-LoginRadius-ApiKey: {apiKey}The client (partner, API, service, etc.) requests the access token using the following API:\nAPI endpoint: https://
POST https://<LoginRadiusAppName>.hub.loginradius.com/service/oauth/token\nContent-Type: application/json\n{\n"audience": "<business API endpoint>",\n"grant_type": "client_credentials",\n"client_id": "<YOUR_CLIENT_ID>",\n"client_secret": "<YOUR_CLIENT_SECRET>"\n}\n\nNote: Where
\n<LoginRadiusAppName>is the name of your LoginRadius App.\nIn response, the client will get an access token.
Use the generated JWT token in the authorization for APIs.
\ncurl --request GET \\\n--url < API URL > \\\n--header 'authorization: Bearer eyJh………VZ2w'Overall, M2M Authorization offers secure access to improve business efficiency — and ultimately enhances user experience. In detail, the benefits include but are not limited to:
\nM2M Authorization is a secure and reliable method of autonomous interactions. It aids business systems in achieving greater efficiency and eliminates the need for human involvement. It also enables businesses to provide flexible machine-to-machine communication while enforcing granular access, authorization, and security requirements.
\n","frontmatter":{"date":"April 29, 2022","updated_date":null,"description":"How can you ensure APIs, web services, and business systems communicate and access the information securely without human intervention? The answer is machine-to-machine (M2M) authorization.","title":"M2M Authorization: Authenticate Apps, APIs, and Web Services","tags":["M2M","Authorization","Authentication"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/3bc71bb07579a270c5e9796bf616c58b/58556/m2m-authorization-for-apis-apps-and-web-services.webp","srcSet":"/static/3bc71bb07579a270c5e9796bf616c58b/61e93/m2m-authorization-for-apis-apps-and-web-services.webp 200w,\n/static/3bc71bb07579a270c5e9796bf616c58b/1f5c5/m2m-authorization-for-apis-apps-and-web-services.webp 400w,\n/static/3bc71bb07579a270c5e9796bf616c58b/58556/m2m-authorization-for-apis-apps-and-web-services.webp 800w,\n/static/3bc71bb07579a270c5e9796bf616c58b/99238/m2m-authorization-for-apis-apps-and-web-services.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"When your webapp has a large amount of data to visualize, you don't want your users to wait 10 seconds before seeing something. One…","fields":{"slug":"/engineering/guest-post/http-streaming-with-nodejs-and-fetch-api/"},"html":"When your webapp has a large amount of data to visualize, you don't want your users to wait 10 seconds before seeing something.
\nOne technique that is often overlooked is HTTP streaming. It's broadly supported, works well, and doesn't require fancy libraries.
\nWe're going to go through how we can use HTTP streaming in our applications and what to consider when we do so.
\nWhen building web applications, we typically have a REST API with GET endpoints that do something like this:
\nThe API will typically wait for each step to complete before going on to the next one, and by step 4, the database result and the JSON objects are all in memory before the request is handled, and everything can be cleaned up.
\nThis works, and there is nothing wrong with it (KISS, right?) as long as your database query results are small and quickly available.
\nBut let's say you want to render a chart with 10k data points. Querying will not be as smooth anymore.\nThe simple way will work, but ideally, you don't want to accumulate all the data in memory before sending the response.
\nWith HTTP streaming, you can start rendering the chart even before your query is complete.
\nTo make it happen:
\nIn this example, we use Koa for the API, but you can use other libraries like Express or plain Node.js. Most will have support for streaming.
\nLet's create an API:
\nconst Koa = require('koa');\nconst app = new Koa();\n\napp.use(async (ctx) => {\n if (ctx.request.url === '/measurements.json') {\n ctx.response.set('content-type', 'application/json');\n // This is where the magic happens: set a stream as the response body\n ctx.body = fs.createReadStream('./measurements.json');\n }\n});\n\nhttp.createServer(app.callback()).listen(3000);This code creates an API with 1 endpoint GET /measurements that will respond with the contents of a JSON file with 10k measurements.
The file looks like this:
\n[\n { "id": "1", "timestamp": "2022-01-19T10:39:00.000Z", "value": 239.34 },\n { "id": "2", "timestamp": "2022-01-19T10:40:00.000Z", "value": 820.14 },\n { "id": "3", "timestamp": "2022-01-19T10:41:00.000Z", "value": 926.03 },\n { "id": "4", "timestamp": "2022-01-19T10:42:00.000Z", "value": 513.01 },\n // ...\n { "id": "99998", "timestamp": "2022-03-29T21:16:00.000Z", "value": 13.81 },\n { "id": "99999", "timestamp": "2022-03-29T21:17:00.000Z", "value": 465.28 },\n { "id": "100000", "timestamp": "2022-03-29T21:18:00.000Z", "value": 71.95 }\n]We're creating an HTTP/1.1 server with Node's http module. By setting ctx.body to a stream, data will be sent to the requester as soon as it is loaded using a mechanism called chunked transfer encoding.
This saves time and memory of your API because it doesn't have to accumulate the whole result in memory before sending the response.
\nIn a real application, you're probably using a database instead of a pre-created JSON file.\nIf you're using MongoDB, you can create a stream with the cursor's stream() method.
The GET /measurements endpoint we created can be consumed with any HTTP client, but you have to use the Fetch API to take advantage of streaming.
fetch() will set response.body to a ReadableStream for streaming responses.
Here's how you can read a streaming response:
\nfetch('http://localhost:3000/measurements.json')\n .then(async (response) => {\n // response.body is a ReadableStream\n const reader = response.body.getReader();\n for await (const chunk of readChunks(reader)) {\n console.log(`received chunk of size ${chunk.length}`);\n }\n });\n\n// readChunks() reads from the provided reader and yields the results into an async iterable\nfunction readChunks(reader) {\n return {\n async* [Symbol.asyncIterator]() {\n let readResult = await reader.read();\n while (!readResult.done) {\n yield readResult.value;\n readResult = await reader.read();\n }\n },\n };\n}If you run the API that we created and then run the code above in a web browser, you'll see received chunk of size x several times in the console with varying x:
![\"The](\"/75cf5afcae41ee6a1ea963da104389ff/console-received-chunk-of-size-x.gif\")
To see it more clearly, open up Developer Tools (F12) and set network throttling to 3G. It will take longer for the file to download, so you can see that the chunks are being processed gradually.
\nThat's all very nice, but the chunks themselves are not very useful. You want to process the measurements that are in these chunks. Ideally, you would have an async iterable that gradually yields the JSON objects as they come in so that you can use for await to iterate over the measurements instead of the chunks.
JavaScript doesn't have a JSON parser that can deal with streams. Let's assume we have a function that can do this called parseJsonStream(readableStream). More details and a simple implementation can be found in \"Streaming Considerations\" below.
We would then be able to do this:
\nfetch('http://localhost:3000/measurements.json')\n .then(async (response) => {\n let measurementsReceived = 0;\n for await (const measurement of parseJsonStream(response.body)) {\n measurementsReceived++;\n // To prevent the console from flooding we only show 1 in every 100 measurements\n if (measurementsReceived % 100 === 0) {\n console.log(`measurement with id {${measurement.id}} at time ${measurement.timestamp} has value [${measurement.value}]`);\n }\n }\n });This is the result:
\n![\"The](\"/e2d673ca68b3af5f9fa335ce755032ed/console-measurements.gif\")
This is a very powerful mechanism. Instead of console.log() statements, imagine a line chart where the measurements gradually become visible as more data comes in.
This is an example created with Apache ECharts:
\n![\"A](\"/76f92b76f2a2c36236b5610800abb88c/chart-loading-gradually.gif\")
Before the Fetch API, it was impossible to do this because the alternative, XMLHttpRequest, will load the whole response into memory before providing it to your code.
Modern applications don't use XMLHttpRequest directly, but a lot of libraries like Axios or Angular's HttpClient rely on it to make requests.
People would rely on more advanced technologies like WebSockets to stream data.
\nYou might have heard that HTTP/2 has a more efficient mechanism for streaming, and you would be right. So let's see if we can use HTTP/2.
\nFrom the side of your webapp, the browser will automatically determine if it can communicate with the server over HTTP/2 and use it if it's available. The Fetch API will do this transparently, so you do not need to make any changes to your webapp.
\nWhat you need to do is make your API available over HTTP/2:
\nconst Koa = require('koa');\nconst app = new Koa();\n\napp.use(async (ctx) => {\n if (ctx.request.url === '/measurements.json') {\n ctx.response.set('content-type', 'application/json');\n ctx.body = fs.createReadStream('./measurements.json');\n }\n});\n\nhttp2.createSecureServer(\n {\n key: fs.readFileSync(path.resolve('path/to/localhost-key.pem')),\n cert: fs.readFileSync(path.resolve('path/to/localhost.pem')),\n },\n app.callback(),\n).listen(3000);This code is mostly the same as for HTTP/1.1 with two notable differences:
\nhttp2 module instead of http.HTTPS instead of plain HTTP because this is mandatory for HTTP/2. You can set up HTTPS and get the cert and key files using mkcert. Or, use one of the other mechanisms described in this article: Use HTTPS for Local DevelopmentThat's it!
\nIf you restart the API and check the network tab in Developer Tools, you'll see that your application will now stream over HTTP/2 (don't forget to update the URL in your webapp, start with https:// instead of http://).
In the code above, we assumed that there was a function parseJsonStream(readableStream) that would parse a ReadableStream containing JSON into an async iterable of objects.
The difficulty is that reading from a ReadableStream will give you chunks of data that don't necessarily correspond to anything meaningful. To illustrate, let's take a look at this example:
[\n { "id": "1", "timestamp": "2022-01-19T10:39:00.000Z", "value": 239.34 },\n { "id": "2", "timestamp": "2022-01-19T10:40:00.000Z", "value": 820.14 },\n { "id": "3", "timestamp": "2022-01-19T10:41:00.000Z", "value": 926.03 },\n { "id": "4", "timestamp": "2022-01-19T10:42:00.000Z", "value": 513.01 }\n]We could receive this JSON in chunks like this:
\n[\n { "id": "1", "timestamp": "2022-01-19T10:39:00.000Z", "value": 239.34 },\n { "id": "2", "tim\n\n\n\n estamp": "2022-01-19T10:40:00.000Z", "value": 820.14 },\n { "id": "3", "timestamp": "2022-01-19T10:41:00.000Z", "value": 926.03 },\n { "id": "4", "timestamp": "2022-01-19T10:42\n\n\n\n:00.000Z", "value": 513.01 }\n]You need some way to determine where one measurement object starts and ends. To simplify this, we created a JSON file where each line contains precisely one object. Parsing the stream becomes manageable when we can make this assumption.
\nHere is the implementation of parseJsonStream(readableStream)
async function *parseJsonStream(readableStream) {\n for await (const line of readLines(readableStream.getReader())) {\n const trimmedLine = line.trim().replace(/,$/, '');\n\n if (trimmedLine !== '[' && trimmedLine !== ']') {\n yield JSON.parse(trimmedLine);\n }\n }\n}\n\nasync function *readLines(reader) {\n const textDecoder = new TextDecoder();\n let partOfLine = '';\n for await (const chunk of readChunks(reader)) {\n const chunkText = textDecoder.decode(chunk);\n const chunkLines = chunkText.split('\\n');\n if (chunkLines.length === 1) {\n partOfLine += chunkLines[0];\n } else if (chunkLines.length > 1) {\n yield partOfLine + chunkLines[0];\n for (let i=1; i < chunkLines.length - 1; i++) {\n yield chunkLines[i];\n }\n partOfLine = chunkLines[chunkLines.length - 1];\n }\n }\n}\n\nfunction readChunks(reader) {\n return {\n async* [Symbol.asyncIterator]() {\n let readResult = await reader.read();\n while (!readResult.done) {\n yield readResult.value;\n readResult = await reader.read();\n }\n },\n };\n}If you have control over the API you're calling, you can use the \"1 object per line\" formatting as part of the contract, but know that it could be prone to breaking. For robust JSON support, we need a real streaming parser.
\nOther options include using a format with one object per line by default, like CSV, or a more advanced format with built-in support for streaming like Apache Arrow.
\nError handling becomes more difficult because HTTP status code 200 will be sent as soon as streaming starts. What do we do when something goes wrong in the middle of the stream?
\nWhen something goes wrong, your API should close the stream. Your webapp can then determine if the stream was complete and show a fitting message to the user if it's not. For example: when using a JSON response, as we discussed, you can check that the last line contains only \"]\".
\nYou have learned how to stream HTTP data efficiently using Node.js and HTTP without congesting or burdening the memory. You have also understood the advantages and disadvantages of HTTP streaming.
\n","frontmatter":{"date":"April 27, 2022","updated_date":null,"description":"Do you know that you can stream HTTP data for efficient visualization? Learn more about how you can stream data with HTTP using Node.js and Fetch API.","title":"Implement HTTP Streaming with Node.js and Fetch API","tags":["Node.js","Fetch API","Streaming"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/58556/http-streaming-with-nodejs-and-fetch-api.webp","srcSet":"/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/61e93/http-streaming-with-nodejs-and-fetch-api.webp 200w,\n/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/1f5c5/http-streaming-with-nodejs-and-fetch-api.webp 400w,\n/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/58556/http-streaming-with-nodejs-and-fetch-api.webp 800w,\n/static/e38eeb01b3a5ba1c6afe8f7ebbb43a6b/99238/http-streaming-with-nodejs-and-fetch-api.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Van Nieuwenhuyse","github":"Nivani","avatar":null}}}},{"node":{"excerpt":"Introduction It is an indisputable reality that authentication is critical in any application or system if you want to secure user data and…","fields":{"slug":"/engineering/guest-post/session-authentication-with-nestjs-and-mongodb/"},"html":"It is an indisputable reality that authentication is critical in any application or system if you want to secure user data and enable secure access to information. Authentication is the procedure of establishing or demonstrating that something is true, legitimate, or valid.
\nThis tutorial is a hands-on demonstration. To follow along, ensure you have the following in place:
\n\nNest (NestJS) is a Node.js server-side application framework for building scalable, efficient applications.
\nIt is written in TypeScript and built on Express, a very minimalistic framework that is great on its own but lacks structure. It combines programming paradigms such as object-oriented programming, functional programming, and functional reactive programming.
\nIt is a framework to use if you want a lot of structure on your backend. Its syntax and structure are very similar to AngularJS, a front-end framework. And it uses TypeScript, services, and dependency injection in the same way that AngularJS does.
\nIt employs modules and controllers, and you can build controllers for a file using the command-line interface.
\nNestJS modules allow you to group related controllers and service providers into a single code file. Simply put, a NestJS module is a TypeScript file with the @Module annotation (). This decorator informs the NestJS framework about which controllers, service providers, and other associated resources will be instantiated and used by the app code later.
\nSession-based authentication is a method of user authentication in which the server creates a session after a successful log-in, with the session ID stored in a cookie or local storage in your browser.
\nUpon subsequent requests, your cookie is validated against the session ID stored on the server. If there is a match, the request is considered valid and processed.
\nWhen using this authentication method, it is critical to keep the following security best practices in mind:
\nSession-based authentication is more secure than most authentication methods because it is simple, secure, and has a limited storage size. It is also thought to be the best option for websites in the same root domain.
\nStart your project setup by installing Nest CLI globally. You don’t need to do this if you already have NestJS CLI installed.
\nThe Nest CLI is a command-line interface tool for setting up, developing, and maintaining Nest applications.
\nnpm i -g @nestjs/cliNow, let’s set up your project by running the following command:
\nnest new session-based-authThe above command creates a Nest application with some boilerplates, then prompts you to choose your preferred package manager to install the required modules to run your application. For demonstration, this tutorial uses npm. Hit the enter key to continue with npm.
\n![\"Choose](\"/9382e66fea36e23b091b84e01a760db0/hDnzpIVA.webp\")
If everything went well, you should see an output like the one on the screenshot below on your terminal.
\n![\"Screenshot](\"/389af814b354994ea99495e669ae501b/Hv_Nxk_A.webp\")
Once the installation is complete, move into your project directory, and run the application with the command below:
\nnpm run start:devThe above command runs the application and watches for changes. Your project src folder structure should look as follows.
└───src\n│ └───app.controller.ts\n│ └───app.modules.ts\n│ └───app.service.ts\n│ └───main.tsNow that your application is set up, let's install the dependencies needed.
\nnpm install --save @nestjs/passport passport passport-localThe above command installs Passport.js, a popular nest.js authentication library.
\nAlso, install the types for the strategy with the command below:
\nIt contains type definitions for passport-local.
npm install --save-dev @types/passport-localTo set up and connect your database, install the Mongoose package and the NestJS wrapper with the following command:
\nnpm install --save @nestjs/mongoose mongooseThe Mongoose NestJS wrapper helps you use Mongoose in the NestJS application and gives approved TypeScript support.
\nNow, head over to your app.module.ts, and import the mongoose module from @nestjs/mongoose. Then call the forRoot() method, a method provided by the Mongoose module, and pass in your database URL string.
Setting up your database connection in app.module.ts helps your application connect to the database immediately as the server starts — after running your application since it’s the first module to be loaded.
app.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\n\n@Module({\n imports: [\n MongooseModule.forRoot(\n "mongodb+srv://<username>:<password>@cluster0.kngtf.mongodb.net/session-auth?retryWrites=true&w=majority"\n ),\n ],\n controllers: [AppController],\n providers: [AppService],\n})\nexport class AppModule {}For separation concerns, to make your code clean and well organized, create a module specifically for users using the NestJS CLI by running the following command:
\nnest g module usersThe above command creates a users folder with users.module.ts and updates app.module.ts
Also, create users.service.ts and users.controller.ts files with the following commands:
nest g service users\nnest g controller usersNote that you can create your folders and files manually without using the nest CLI, but using the CLI automatically updates the necessary folders and makes your life easier.
\nThe next step is to create your UserSchema, but first, add a users.model.ts file, where you will create UserSchema
This should be the shape of our application src folder now.
└───src\n│ └───users\n│ │ └───users.controller.ts\n│ │ └───users.model.ts\n│ │ └───users.module.ts\n│ │ └───users.service.ts\n│ └───app.controller.ts\n│ └───app.module.ts\n│ └───app.service.ts\n│ └───main.tsTo create UserSchema, import everything as mongoose from the mongoose package in users.model.ts. Then call the new mongoose schema, a blueprint of the user Model, and pass in a JavaScript object where you will define the user object and data.
users.model.ts
import * as mongoose from "mongoose"\nexport const UserSchema = new mongoose.Schema(\n {\n username: {\n type: String,\n required: true,\n unique: true,\n },\n password: {\n type: String,\n required: true,\n },\n },\n { timestamps: true }\n)\n\nexport interface User extends mongoose.Document {\n _id: string;\n username: string;\n password: string;\n}Also, create an interface for your Model that extends mongoose, a document that helps you populate your MongoDB collections.
\nHead over to your users.module.ts and import MongooseModule in the imports array. Then call the forFeature() method provided by MongooseModule, and pass in an array of object that takes in name and schema.
This will enable you to share the file anywhere with the help of dependency injection.
\nusers.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { UsersController } from "./users.controller"\nimport { UserSchema } from "./users.model"\nimport { UsersService } from "./users.service"\n@Module({\n imports: [MongooseModule.forFeature([{ name: "user", schema: UserSchema }])],\n controllers: [UsersController],\n providers: [UsersService],\n})\nexport class UsersModule {}In users.module.ts, export the UsersService to enable you to access it in another module.
users.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { UsersController } from "./users.controller"\nimport { UserSchema } from "./users.model"\nimport { UsersService } from "./users.service"\n@Module({\n imports: [MongooseModule.forFeature([{ name: "user", schema: UserSchema }])],\n controllers: [UsersController],\n providers: [UsersService],\n exports: [UsersService],\n})\nexport class UsersModule {}It's usually a good idea to encapsulate the business logic in a separate class. Such a class is known as a service. The job of this class is to process the controller's requests and perform the business logic.
\nIn users.service.ts file, import Model from mongoose, User from users.model.ts, and InjectModel from @nestjs/mongoose. Then add a method to the UsersService class that takes a username and password, and call the method insertUser().
users.service.ts
import { Injectable } from '@nestjs/common';\nimport { InjectModel } from '@nestjs/mongoose';\nimport { Model } from 'mongoose';\nimport { User } from './users.model';\n@Injectable()\nexport class UsersService {\n constructor(@InjectModel('user') private readonly userModel: Model<User>) {}\n async insertUser(userName: string, password: string) {\n const username = userName.toLowerCase();\n const newUser = new this.userModel({\n username,\n password,\n });\n await newUser.save();\n return newUser;\n }\n}Now that the UsersService class is ready, you need to inject it into your controller. But first, let's talk about storing the users' passwords securely.
The most critical aspect of the registration procedure is the users’ passwords, which must not be saved in plain text. It is the responsibility of the user to create a strong password, but it is your obligation as a developer to keep their passwords secure. If a database breach occurs, the users' passwords would be exposed. And what happens if it’s stored in plain text? I believe you know the answer. To address this, hash the passwords using bcrypt.
\nSo, install bcrypt and @types/bcrypt with the following command:
npm install @types/bcrypt bcryptWith that out of the way, set up your controller. First, import your UsersService class and everything from bcrypt. Then add a constructor and a method that allows you to add a user; it will handle incoming post requests, call it addUser, with a function body where you'll hash the password.
users.controller.ts
import { Body, Controller, Post } from '@nestjs/common';\nimport { UsersService } from './users.service';\nimport * as bcrypt from 'bcrypt';\n@Controller('users')\nexport class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //post / signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n}The registration happens in the app.module.ts file, which is achieved by adding the UsersModule to the @Module() decorator's imports' array in app.module.ts.
app.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\nimport { UsersModule } from "./users/users.module"\n\n@Module({\n imports: [\n MongooseModule.forRoot(\n "mongodb+srv://<username>:<password>@cluster0.kngtf.mongodb.net/session-auth?retryWrites=true&w=majority"\n ),\n UsersModule,\n ],\n controllers: [AppController],\n providers: [AppService],\n})\nexport class AppModule {}Congratulations! You are done with the registration. You can now register a user with a username and password.
\nNow, with registration out of the way, add a getUser function to your UsersService with the findOne method to find a user by username.
users.service.ts
import { Injectable } from '@nestjs/common';\nimport { InjectModel } from '@nestjs/mongoose';\nimport { Model } from 'mongoose';\nimport { User } from './users.model';\n@Injectable()\nexport class UsersService {\n constructor(@InjectModel('user') private readonly userModel: Model<User>) {}\n async insertUser(userName: string, password: string) {\n const username = userName.toLowerCase();\n const newUser = new this.userModel({\n username,\n password,\n });\n await newUser.save();\n return newUser;\n }\n async getUser(userName: string) {\n const username = userName.toLowerCase();\n const user = await this.userModel.findOne({ username });\n return user;\n }\n}Just as for users, create an auth module and service specifically for all the authentications/verifications. To do that, run the following commands:
\nnest g module auth\nnest g service authThe above will create an auth folder, auth.module.ts, and auth.service.ts, and update the auth.module.ts and app.module.ts files.
At this point, the shape of your application src folder should look as follows.
└───src\n│ └───auth\n│ │ └───auth.module.ts\n│ │ └───auth.service.ts\n│ └───users\n│ │ └───users.controller.ts\n│ │ └───users.model.ts\n│ │ └───users.module.ts\n│ │ └───users.service.ts\n│ └───app.controller.ts\n│ └───app.module.ts\n│ └───app.service.ts\n│ └───main.tsThe above generate command will update your app.module.ts, and it will look like the code snippet below:
app.module.ts
import { Module } from "@nestjs/common"\nimport { MongooseModule } from "@nestjs/mongoose"\nimport { AppController } from "./app.controller"\nimport { AppService } from "./app.service"\nimport { UsersModule } from "./users/users.module"\nimport { AuthModule } from './auth/auth.module';\n\n\n@Module({\n imports: [UsersModule, AuthModule, MongooseModule.forRoot(\n //database url string\n 'mongodb://localhost:27017/myapp'\n )],\n controllers: [AppController],\n providers: [AppService],\n})\nexport class AppModule {}Go to your auth.module.ts file and add UsersModule in the imports array to enable access to the UsersService exported from the users.module.ts file.
auth.module.ts
import { Module } from "@nestjs/common"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\n\n@Module({\n imports: [UsersModule],\n providers: [AuthService],\n})\nexport class AuthModule {}In your auth.service.ts file, call the constructor so you can inject the UsersService, and add a method for validation that will take a username and password.
To add some basic validations, check if the user exists in the database, and compare the given password with the one in your database to ensure it matches. If it exists, return the user in the request.user object — else, return null.
auth.service.ts
import { Injectable, NotAcceptableException } from '@nestjs/common';\n import { UsersService } from 'src/users/users.service';\n import * as bcrypt from 'bcrypt';\n\n @Injectable()\n export class AuthService {\n constructor(private readonly usersService: UsersService) {}\n async validateUser(username: string, password: string): Promise<any> {\n const user = await this.usersService.getUser(username);\n const passwordValid = await bcrypt.compare(password, user.password)\n if (!user) {\n throw new NotAcceptableException('could not find the user');\n }\n if (user && passwordValid) {\n return {\n userId: user.id,\n userName: user.username\n };\n }\n return null;\n }\n }Going further, create a new file and name it local.strategy.ts. This file will represent the strategy from Passport.js, which you installed earlier, that is the local strategy. And within it, pass in the strategy, which is the Strategy from passport-local.
Create a constructor and inject the AuthService, call the super() method; ensure to call the super() method.
local.strategy.ts
import { Injectable, UnauthorizedException } from '@nestjs/common';\n import { PassportStrategy } from '@nestjs/passport';\n import { Strategy } from 'passport-local';\n import { AuthService } from './auth.service';\n @Injectable()\n export class LocalStrategy extends PassportStrategy(Strategy) {\n constructor(private readonly authService: AuthService) {\n super();\n }\n async validate(username: string, password: string): Promise<any> {\n const userName = username.toLowerCase();\n const user = await this.authService.validateUser(userName, password);\n if (!user) {\n throw new UnauthorizedException();\n }\n return user;\n }\n }Go back to your auth.module.ts file. Then add PassportModule to imports and LocalStrategy to providers.
auth.module.ts
import { Module } from "@nestjs/common"\nimport { PassportModule } from "@nestjs/passport"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\nimport { LocalStrategy } from "./local.strategy"\n\n@Module({\n imports: [UsersModule, PassportModule],\n providers: [AuthService, LocalStrategy],\n})\nexport class AuthModule {}Now, add the login route to your users.controller.ts:
users.controller.ts
import {\n Body,\n Controller,\n Post,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //post / signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n }Now that you have all these put in place, you still cannot log in a user because there is nothing to trigger the login route. Here, use Guards to achieve that.
\nCreate a file and name it local.auth.guard.ts, then a class LocalAuthGuard that extends AuthGuard from NestJS/passport, where you will provide the name of the strategy and pass in the name of your strategy, local.
local.auth.guard.ts.
import { Injectable } from "@nestjs/common"\nimport { AuthGuard } from "@nestjs/passport"\n@Injectable()\nexport class LocalAuthGuard extends AuthGuard("local") {}Add the UseGuard decorator to your login route in the users.controller.ts file, and pass in the LocalAuthGuard.
users.controller.ts
import {\n Body,\n Controller,\n Post,\n UseGuards,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //post / signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @UseGuards(LocalAuthGuard)\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n }Finally, you can log in a user with a registered username and password.
\nYou have successfully set up user authentication. Now, protect your routes from unauthorized access by limiting access to just authenticated users. Go to your users.controller.ts file, and add another route — name it ‘protected’ and make it return the req.user object.
users.controller.ts
import {\n Body,\n Controller,\n Get,\n Post,\n UseGuards,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @UseGuards(LocalAuthGuard)\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n // Get / protected\n @Get('/protected')\n getHello(@Request() req): string {\n return req.user;\n }\n }The protected route in the above code will return an empty object instead of returning the user’s details when a logged-in user makes a request to it because it already lost the login.
\nTo get that sorted, this is where the session-based authentication comes in.
\nIn session-based authentication, when a user logs in, the user is saved in a session so that any subsequent request by the user after login will grab the details from the session and grant the user easy access. The session expires when the user logs out.
\nTo start session-based auth, install express-session and the NestJS types using the following command:
\nnpm install express-session @types/express-sessionWhen the installation is completed, go to your main.ts file, the root of your application, and do the configurations there.
Import everything from passport and express-session, then add passport initialize and passport session.
It is preferable to keep your secret key in your environment variables.
\nmain.ts
import { NestFactory } from "@nestjs/core"\nimport { AppModule } from "./app.module"\nimport * as session from "express-session"\nimport * as passport from "passport"\nasync function bootstrap() {\n const app = await NestFactory.create(AppModule)\n app.use(\n session({\n secret: "keyboard",\n resave: false,\n saveUninitialized: false,\n })\n )\n app.use(passport.initialize())\n app.use(passport.session())\n\n await app.listen(3000)\n}\nbootstrap()Add a new file, authenticated.guard.ts, in your auth folder. And create a new Guard that checks if there is a session for the user making the request — name it authenticatedGuard.
authenticated.guard.ts
import { CanActivate, ExecutionContext, Injectable } from "@nestjs/common"\n\n@Injectable()\nexport class AuthenticatedGuard implements CanActivate {\n async canActivate(context: ExecutionContext) {\n const request = context.switchToHttp().getRequest()\n return request.isAuthenticated()\n }\n}In the above code, the request is gotten from the context and checked if authenticated. isAuthenticated() comes from passport.js automatically; it says. \"hey! does a session exist for this user? If so, keep going.\"
To trigger the login, in your users.controller.ts file:
authenticated from authenticated.guard.ts;useGuard decorator to the protected route; and,AuthenticatedGuard.users.controller.ts
import {\n Body,\n Controller,\n Get,\n Post,\n UseGuards,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { AuthenticatedGuard } from 'src/auth/authenticated.guard';\n import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @UseGuards(LocalAuthGuard)\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n //Get / protected\n @UseGuards(AuthenticatedGuard)\n @Get('/protected')\n getHello(@Request() req): string {\n return req.user;\n }\n }At this point, it still fails because you've only configured express-session but didn't implement it.
When a user logs in, you need to save the user in a session so that the user can access other routes with the session.
\nOne thing to keep in mind is that by default, the express-session library stores the session in the web server's memory.
Before it goes into the session, you need to serialize the user. As it comes out of the session, deserialize the user.
\nSo, create a new file in the auth folder for serializer and deserializer, name it session.serializer.ts.
At this point, the shape of our application src folder should look like this.
└───src\n │ └───auth\n │ │ └───auth.module.ts\n │ │ └───auth.service.ts\n │ │ └───authenticated.guard.ts\n │ │ └───local.auth.guard.ts\n │ │ └───local.strategy.ts\n │ │ └───session.serializer.ts\n │ └───users\n │ │ └───users.controller.ts\n │ │ └───users.model.ts\n │ │ └───users.module.ts\n │ │ └───users.service.ts\n │ └───app.controller.ts\n │ └───app.module.ts\n │ └───app.service.ts\n │ └───main.tssession.serializer.ts
import { Injectable } from "@nestjs/common"\nimport { PassportSerializer } from "@nestjs/passport"\n\n@Injectable()\nexport class SessionSerializer extends PassportSerializer {\n serializeUser(user: any, done: (err: Error, user: any) => void): any {\n done(null, user)\n }\n deserializeUser(\n payload: any,\n done: (err: Error, payload: string) => void\n ): any {\n done(null, payload)\n }\n}Go back to your auth.module.ts file, provide the SessionSerializer, and add the register method to the PassportModule.
auth.module.ts
import { Module } from "@nestjs/common"\nimport { PassportModule } from "@nestjs/passport"\nimport { UsersModule } from "src/users/users.module"\nimport { AuthService } from "./auth.service"\nimport { LocalStrategy } from "./local.strategy"\nimport { SessionSerializer } from "./session.serializer"\n\n@Module({\n imports: [UsersModule, PassportModule.register({ session: true })],\n providers: [AuthService, LocalStrategy, SessionSerializer],\n})\nexport class AuthModule {}Add some codes within the LocalAuthGuard in the local.auth.guard.ts file.
Call the login method in super and pass in the request to trigger the actual login by creating a session. If you want to use sessions, you must remember to trigger the super.login().
local.auth.guard.ts
import { ExecutionContext, Injectable } from '@nestjs/common';\n import { AuthGuard } from '@nestjs/passport';\n @Injectable()\n export class LocalAuthGuard extends AuthGuard('local') {\n async canActivate(context: ExecutionContext) {\n const result = (await super.canActivate(context)) as boolean;\n const request = context.switchToHttp().getRequest();\n await super.logIn(request);\n return result;\n }\n }If you log in now, you will see the session ID stored in a cookie, which is just a key to the session store, and the cookie gets saved in the browser. The cookie is automatically attached to the rest of the request.
\nNow that the session is working, you can access the protected route; it will return the expected user’s details.
\nAs mentioned earlier, once a user logs out, you destroy all sessions.
\nTo log out a user, go to the users.controller.ts file, add a logout route, and call the req.session.session() method. You can return a message notifying that the user’s session has ended.
import {\n Body,\n Controller,\n Get,\n Post,\n UseGuards,\n Request,\n } from '@nestjs/common';\n import * as bcrypt from 'bcrypt';\n import { AuthenticatedGuard } from 'src/auth/authenticated.guard';\n import { LocalAuthGuard } from 'src/auth/local.auth.guard';\n import { UsersService } from './users.service';\n @Controller('users')\n export class UsersController {\n constructor(private readonly usersService: UsersService) {}\n //signup\n @Post('/signup')\n async addUser(\n @Body('password') userPassword: string,\n @Body('username') userName: string,\n ) {\n const saltOrRounds = 10;\n const hashedPassword = await bcrypt.hash(userPassword, saltOrRounds);\n const result = await this.usersService.insertUser(\n userName,\n hashedPassword,\n );\n return {\n msg: 'User successfully registered',\n userId: result.id,\n userName: result.username\n };\n }\n //Post / Login\n @UseGuards(LocalAuthGuard)\n @Post('/login')\n login(@Request() req): any {\n return {User: req.user,\n msg: 'User logged in'};\n }\n //Get / protected\n @UseGuards(AuthenticatedGuard)\n @Get('/protected')\n getHello(@Request() req): string {\n return req.user;\n }\n //Get / logout\n @Get('/logout')\n logout(@Request() req): any {\n req.session.destroy();\n return { msg: 'The user session has ended' }\n }\n }So, once you log out, it returns a message notifying you that the user session has ended. The code for this tutorial is hosted here on my Github repository.
\nYou have successfully implemented user signup, authentication, and protected the route to enable authorized access only.
\nIt’s time to test the application. If everything is in order, your server should be running. Else, restart your server with the following command:
\nnpm run start:devHead over to your Postman. And let’s finally test our application.
\n![\"Sign](\"/f87197a117a591a4dcd924e350c53969/j38BmlHQ.webp\")
![\"Log](\"/a1da7b129971e3bf2b9cb9b2891265ec/p0GhcMPw.webp\")
![\"Logged-in](\"/226b87a1a542b8fff954b94e5ed5646e/mPo9j3Kg.webp\")
![\"Request](\"/dbde181cc57170a4abf48d50e815a1c1/kkX-6pFQ.webp\")
![\"User](\"/7c4bf4a2305d7df71b0b42dae13e855a/UZCy1IHQ.webp\")
LoginRadius provides a variety of registration and authentication services to assist you in better connecting with your consumers.
\nOn any web or mobile application, LoginRadius is the developer-friendly Identity Platform that delivers a complete set of APIs for authentication, identity verification, single sign-on, user management, and account protection capabilities like multi-factor authentication.
\nTo implement LoginRadius in your NestJS application, follow this tutorial: NestJS User Authentication with LoginRadius API.
\nCongratulations! In this tutorial, you've learned how to implement session-based authentication in a NestJS application with the MongoDB database. You've created and authenticated a user and protected your routes from unauthorized access.
\nYou can access the sample code used in this tutorial on GitHub.
\n\n\n","frontmatter":{"date":"April 26, 2022","updated_date":null,"description":"Want to implement user authentication for your NestJS apps? Follow this tutorial to learn how you can implement session-based authentication for your NestJS apps along with MongoDB.","title":"NestJS: How to Implement Session-Based User Authentication","tags":["Authentication","NestJS","MongoDB","Node.js"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c08a732623e225933ce7293ad4d43437/58556/session-based-authentication-in-nestjs.webp","srcSet":"/static/c08a732623e225933ce7293ad4d43437/61e93/session-based-authentication-in-nestjs.webp 200w,\n/static/c08a732623e225933ce7293ad4d43437/1f5c5/session-based-authentication-in-nestjs.webp 400w,\n/static/c08a732623e225933ce7293ad4d43437/58556/session-based-authentication-in-nestjs.webp 800w,\n/static/c08a732623e225933ce7293ad4d43437/99238/session-based-authentication-in-nestjs.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Ekekenta Odionyenfe Clinton","github":"icode247","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"Note: Session storage is saved by default in 'MemoryStore,' which is not intended for production use. So, while no external datastore is required for development, once in production, a data store such as Redis or another is suggested for stability and performance. You can learn more about session storage here.
\n
Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.
\nWith JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.
\nIn this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.
\nYou’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.
\nWhether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.
\nJSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.
\nA JWT consists of three parts:
\nExample of a token structure:
\n<base64Header>.<base64Payload>.<signature>
\n![\"Flowchart](\"/f29edbf2978577390c7ffa02e9bc4dda/lr-JWT-authentication.webp\")
JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.
\nLoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.
\nIf you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:
\nThe IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.
\n![\"Screenshot](\"/9fb19dd9c88c7916aeebd03ab6e661b7/lr-admin-console.webp\")
{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",
\n\"expires_in\": 1800
\n}
\nThis integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.
\nIf you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:
\nSend a POST login request to the LR Authentication URL:
\nPOST /identity/v2/auth/login
\nInclude the user’s credentials (email + password) in the request body.
\n{
\n\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",
\n\"expires_in\": 3600
\n}
\nWith LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.
\nWith this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.
\nNOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.
\nTo get started with JWT implementation, you can read our complete developer documentation.
\n![\"Illustration](\"/15ec02ac98d24a9f1f28e5d0f06b9174/IDX-vs-Direct-API-JWT.webp\")
Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.
\nIn traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.
\nIn modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.
\nGood session management ensures:
\nUser Logs In
\nClient Stores the Token
\nAccess Token Expiry
\nToken Renewal
\nWhen the user logs out, both the access token and refresh token should be cleared from client storage.
\nHowever, access tokens are stateless and cannot be revoked mid-lifecycle unless:
\nCombining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.
\n![\"illustration](\"/e55ae4bbc8ce62e13f03e46e29ebe7cc/api-economy.webp\")
When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.
\nChoosing where to store the JWT is a crucial security decision. The most common storage options are:
\nEach option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.
\nAccess Tokens
\nRefresh Tokens
\nJWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.
\nWith robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.
\nA: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.
\nA: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.
\nA: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.
\nA: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.
\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":12,"currentPage":3,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}