There is simply no room for mistakes in a globally competitive market in order to both acquire and retain customers for the long haul.
\nHow to Make a Password Reset as Seamless as Possible?
\nWhen it comes to password resets, enterprises need to be careful about how they go about it. If it's too complicated, customers will inevitably get frustrated. Here are a few tips for making a password reset as seamless as possible:
\n1. Keep the process short.
\nThe key to keeping the process as painless as possible is to keep it short and simple. The last thing you want to do is force your customer to jump through hoops in order to reset their password. Make the process easy to follow, keep it under a minute, and don't require too much information. Entering an email address should be a good sweet spot.
\n2. Make sure the customer has all the necessary information before starting.
\nPassword resets can be a huge pain for customers, but with the right preparation, they can be as seamless as possible. Make sure the customer has all the necessary information before starting. The customer should also be aware of the reset process and what to expect. The last thing you want is for them to be confused during the process.
\n3. Make sure the information is secure.
\nOne of the most important aspects of a customer's experience is feeling safe and secure. When it comes to resetting passwords, enterprises need to take extra precautions to make sure customer data is secure as well. This means instituting safeguards against things like multiple failed logins and only sending information via secure channels.
\nIt's also important to make sure that the customer service representatives who are handling password resets are adequately trained in data security.
\nBy following these simple steps, companies can help ensure that their customers have a positive experience, even in the face of a password reset.
\nWhat are Some Best Practices for Resetting Passwords?
\nWhen resetting a customer's password, it's important to keep a few things in mind. Here are some best practices to ensure a positive customer experience:
\n1. Reset passwords in a secure environment.
\nWhen it comes to resetting passwords, enterprises have a delicate balance to strike between security and customer experience.
\nThe system needs to verify the identity of the user and this can be done through methods such as asking for personal information like SSN/date of birth or sending a reset link to an email address.
\nIf your system is compromised and user data is leaked, you could put your customers at risk. Make sure you use a reputable authentication vendor to help keep your system secure.
\n2. Send password reset emails from a recognizable address.
\nOne way to ensure a good customer experience is to use recognizable email addresses for password reset communications.
\nWhen a user receives an email from, say, support@company.com for a password reset, they are likely to experience less confusion and frustration than if the email is from an address they don't know.
\nThis small detail can make all the difference in the world when it comes to resetting passwords.
\n3. Use a personalized message in the email.
\nWhen a customer needs to reset their password, they generally expect a standardized email message from the company.
\nHowever, you can make the experience more personal for your customer by writing personalized copy in the email sequence. This small gesture can make the customer feel appreciated and more likely to continue using your service.
\n4. Make the reset process easy to follow.
\nInstructions should be clear and concise, without any complicated steps. If possible, the reset process should not require the customer to call customer service or go through a long series of prompts. The easier the reset process is, the better.
\nWrap up
\nNo company wants a disgruntled customer, but all too often password resets – a necessary evil – lead to just that.
\nWhen done correctly, though, password resets can be easy and relatively painless for both the customer and the enterprise. By following these tips that we went through, enterprises can ensure that the customers have a positive experience when resetting their passwords.
\n\n","frontmatter":{"date":"May 17, 2022","updated_date":null,"description":"When done correctly, password resets can be easy and relatively painless for both the customer and the enterprise. By following tips mentioned in this blog, enterprises can ensure that the customers have a positive experience when resetting their passwords.","title":"How a Simple Password Reset Can Ruin Your Customer's Experience","tags":["data security","consumer-experience","authentication","identity-verification"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4705882352941178,"src":"/static/9e11e96e8a392b09bd5623f2e5369b9a/33aa5/paswd-reset.jpg","srcSet":"/static/9e11e96e8a392b09bd5623f2e5369b9a/f836f/paswd-reset.jpg 200w,\n/static/9e11e96e8a392b09bd5623f2e5369b9a/2244e/paswd-reset.jpg 400w,\n/static/9e11e96e8a392b09bd5623f2e5369b9a/33aa5/paswd-reset.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Chris Starkhagen","github":null,"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:
\n- \n
- what Tailwind CSS is; \n
- why it's awesome; and, \n
- how you can use it in a React app. \n
I'll then walk you through step by step how to use it to create a modern login and signup form with routing in React.
\nFinally, you'll see how to make these forms functional using LoginRadius Authentication APIs docs/references/api/authentication).
\nWhat is Tailwind CSS?
\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.
\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. On the downside, Tailwind might make your HTML bloated with loads of CSS classes for small and specific rules. However, you can control it with a framework like React by building smaller reusable components and using JSX bindings for long class names for more maintainability and readability. In fact, we'll take this optimal approach in building our Login form, so you'll understand some best practices you can use to avoid bloated HTML templates in your React app. We'll create a simple yet modern looking login and signup form that looks like this: It will be interactive using React state, can route to different pages, and we'll also, in the end, talk about how we can make it functional from a backend standpoint. Sounds good? Let's start by understanding how we can add TailwindCSS to our React app. Inside a directory of your choice, create a new React project by running: Next, move inside the project and install react-router-dom by running: Now, add Tailwind to your React project by following the steps given here. First, install Tailwind CSS and its related dependencies by running the following command in the root directory: Next, generate some configurational files by running the following command in the root directory: That should generate a Awesome! Now, go ahead and update the Almost there! We'll now add some necessary Tailwind directives to your Each of the above directives represents a layer of Tailwind's utility classes that you can use in your project. Their declaration allows using these utility classes anywhere in your project. Finally, we'll kickstart your React project by spinning a local development server: You're now ready to start using Tailwind CSS to create some awesome-looking UI for your React app! We'll break down the entire page into small, reusable components to ensure that your code is readable and maintainable and doesn't have bloated HTML templates. For instance, you can have a Similarly, you can have a reusable custom So first, let's go ahead and create these files and folders. You'll develop corresponding files for the Signup page as well. Create the following files and folders inside your root directory: For perspective, here's how we'll use those components to build your entire Login Page: For the Login.js files ( Similarly, you can create such boilerplates for the rest of the files. You've created a The above file has two arrays: one each for your login form fields and signup form fields. Each array contains an object that contains attributes for the input fields. The field names should be self-explanatory as to what they represent. Here's a quick summary of that: Later, we'll use this array to cycle through each input field and render a custom As you already have your components boilerplates in place, let's first set up routing for your app. By default, when a user opens the app, we'll direct them to a Login page. Then, if the route changes to /signup, we'll direct them to a Signup page. Head over to your Notice that you have two containers wrapped around your The first container gives a minimum height of 100% and sets a fixed height of the container to 100vh via the Finally, we have some padding classes prefixed with Similarly, the second container sets some width for its child elements and provides some spacing via the respective Tailwind classes. Now, let's create the Head over to Your Using the ' justify-center ' class, we place all these elements inside a flexbox container and horizontally center them. There is also an outer container that simply gives the header some bottom margin using the Then, we give our header image some fixed height and width using the Finally, our text and links have some typography classes for font-size, font-colour, hover effect, and font-weight. Let's now go ahead and render the Here's what the login page should now look like: Let's now start building the rest of the Login page form. We'll now create our reusable and great looking Head over to the Remember all those fields' key-value pairs you set earlier in your Those are all the props your Notice how the HTML markup of this component looks very clean. How is that possible? Are you not using any Tailwind classes here? As there are a lot of Tailwind classes for styling this input field, we have created a constant for it — called We also take a Next, create the Based on your Then we have a Then we simply loop through the Before seeing how the login form looks, you need to render it inside your Login page. So render the above Now, if you go back to your React app, you should see your Login page input fields appear as follows: Excellent, it looks like you're almost there! Now add the final pieces to the Login page by writing the The Inside Again here we're using some Tailwind typography and flexbox classes to style and structure the layout of the UI. Let's go to the Add the following code inside this file: Notice that you also have loads of CSS classes inside our At last, we'll put everything together inside And once we do that, we should have a stunning, modern looking login page appear right in front of us: You've created so many reusable components. Now, it's straightforward to use them to build the Signup page further. Feel free to take this as a challenge and build it yourself based on what you've learned. Here's a quick walkthrough of the steps and how you can use the same approach to build the Signup page in minutes. First, create a main Here's how the entire code looks like: Then, render this component inside And that's it! That's all there is to build a great looking signup page that looks as follows: Don't worry; if you got stuck somewhere, feel free to refer to the entire codebase for this tutorial here. You can use LoginRadius to quickly set up an authentication backend for your frontend application. First, set up an account, and get your API key from your Account Dashboard. Then, you can use their login endpoint to authenticate users. The endpoint takes an email and password as parameters and validates them against the correct credentials. If we were to integrate this endpoint in our previously built Similarly, you can use the Signup endpoint to create users without managing a complete backend database yourself. Curious to learn more? I did a full-fledged guide on authenticating Svelte apps with LoginRadius here. In this tutorial, you have learned to create beautiful registration and authentication forms for your web app with Tailwind CSS. You also learned the advantages and disadvantages of Tailwind CSS and understood how Tailwind CSS works better with React. The modern digital landscape has offered plenty of opportunities to both government and the public sector to jump on the digital transformation bandwagon. Whether we talk about municipalities or government banking institutions, every organization can leverage the true potential of technology, data, and centralized identity to deliver unified and seamless digital experiences. Various technology organizations and government bodies work together as a part of GovTech to ensure the citizens can reap the maximum benefit through an interconnected network. GovTech refers to the efforts to digitally transform public administrations and various government and public sector organizations through innovative technological solutions. Let’s understand the aspects of GovTech and how it’s offering endless opportunities for the sake of citizens’ benefits. Every enterprise is putting every effort into getting maximum user engagement, and users already have up to snuff digital experiences from these enterprises; the public sector still lags. The private sector has taken a giant leap in digital transformation and user experience. However, the same is missing in the case of public sector and government organizations. To overcome the issues about standards that most leading organizations in the private sector have already set, GovTech was introduced to respond to the evident gap between the citizens and the public sector. GovTech, the word itself is made from two individual terms-Government and Technology. Considering all the private sector's transformations, GovTech emphasizes incorporating technological innovations to digitize the relationship between various administrations and citizens smartly. GovTech, in a nutshell, refers to the technological infrastructure that a government uses to modernize its public sector for better citizen engagement. Since we’ve gained enough knowledge about GovTech and its role, let’s understand its advantages for the public sector. Cities need one unified self-service portal so that their constituents have a seamless, efficient experience as they access the services they need. The GovTech infrastructure lets cities centralize their customer-facing digital applications into one portal. What good is a centralized portal if citizens have to create multiple identities for individual web and mobile applications? Operating in this way creates identity silos that prevent a complete view of the customer’s journey and preferences, which means the customer experience can’t be optimized for each individual. Many public sector organizations have difficulty using customer data to improve the digital experience. With GovTech offering third-party applications such as CRM, email marketing tools, online communities, payment systems and more, citizens can leverage the interconnected experience. They can quickly utilize any such integration for convenience in a single platform. Authentication in the public sector is crucial, which eventually requires a robust mechanism to ensure that user identities remain secured. GovTech can leverage multi-factor authentication through SMS, automated phone calls, email, security questions, and authenticator apps, allowing them to customize the citizen experience. Depending on the diverse public sector needs, they can also opt to turn on Multi-Factor Authentication across all customer accounts. On the other hand, GovTech can leverage Risk-based authentication as a non-static authentication system that considers the profile (IP address, Browser, physical Location, and so on) of a citizen requesting access to the system to determine the risk profile associated with that action. The risk-based implementation allows diverse web applications to challenge the user for additional credentials only when the risk level is appropriate, improving customer experience. The public sector is an integral part of any state’s overall development since much good work depends on these public sector organizations. Until now, most government bodies aren’t utilizing GovTech, but the trend is soon changing. Many public sector organizations and government bodies are already putting their best foot forward in adopting GovTech for digital transformation. Whether it’s authentication or delivering a consistent omnichannel experience, GovTech can help the public sector build a flawless citizen experience coupled with enhanced security that ensures the overall digital transformation of the public sector. If you're serving your clients online, you must be aware that almost 80% of online shopping orders were abandoned, i.e., not converted as per stats of March 2021. And this pattern isn’t new; it’s the new normal. Your customers are already interacting with brands like Amazon, Apple, Microsoft, and Google. They know what a great personalized user experience is. And if you’re not offering the same level of user experience on your online platform, you won’t be able to match their expectations! Users will land on your website/app, browse a little, find what they’re looking for, and then a single lousy experience will force them to switch—resulting in cart abandonment. But why do businesses face such issues? Are there any issues that are causing users to switch? Undoubtedly, yes! Poor login and authentication with or without traditional IAM (identity and access management) are the most common issues that force users to switch. Businesses are still relying on old-school login and authentication mechanisms, including organization-level IAM, which is why their business lags behind their competitors. And the catch is that they aren’t aware of consumer identity and access management (CIAM) platforms that can help them overcome the challenges of low conversions and lead generation. Let’s quickly understand the aspects of traditional IAM and why businesses need the true potential of CIAM. Traditional identity and access management (IAM) solutions are traditionally used to streamline employee provisioning, manage access rights, assist in compliance reporting, automate approval workflows, fuel authentication, authorization, and numerous other security-relevant functions. But out of convenience, businesses try to adopt this technology to manage customer identities as well. Unfortunately, internal identity management systems don’t have the right capabilities to manage and secure the hundreds of millions of users on consumer-facing platforms. This is where customer IAM (CIAM) solutions come in. These solutions have been built to specifically handle the requirements for customer authentication, scalability, privacy and data regulations, user experience, and integration. In comparison to internal management, a customer identity and access management (CIAM) solution improves the customer experience, reduces security risks, shrinks costs, and increases the availability of applications. Since we’ve learned about the significant differences between a CIAM and conventional IAM, let’s closely look at some signs that depict that your business now needs a CIAM makeover. One of the most significant indicators of bad authentication and user management is that your website or mobile application has good traffic but isn’t converting. Most of the time, users face friction in authentication, remembering passwords, or going through multiple registration stages. This annoying experience forces them to switch to your competitors, offering seamless authentication, registration, and login experience. So, what’s the ideal solution for this dilemma? Well, a cutting-edge cloud-based CIAM solution like LoginRadius can help you increase your conversions and generate more leads. With features like Social Login, Single Sign-On (SSO), and Progressive Profiling, you can stay assured your users aren’t facing any hurdles from the moment they interact with your brand. You can’t ignore the fact that new customer acquisition is as essential as retaining current customers. If you’re not making new customers, it’s high time you must incorporate a CIAM solution instead of the traditional IAM. Endless reasons, including a lengthy registration process, could lead to situations where you cannot convert new users and drop the overall growth rates. By incorporating a CIAM solution like LoginRadius, you can leverage the true potential of progressive profiling that enables your customers to share their details gradually and not immediately when they interact for the first time with your platform. Apart from this, creating personalized customer journeys by leveraging social media data and consumer behavior can also help increase engagement with your brand leading to more new conversions. Modern customers know exactly what they want, and to ensure they don’t switch, organizations have to stay ahead of the competition by pleasing their users right from the beginning they interact with their brand. Also, the traditional IAM cannot meet the surging demands of today’s customers. Hence, it’s crucial to incorporate a reliable CIAM solution like LoginRadius that helps deliver a rich consumer experience and robust security and helps meet global compliance requirements. If you’re facing any of the challenges mentioned above, it’s high time to switch to a reliable CIAM solution. When you set up privacy policies for customers, you’re making a promise. You’re ensuring to people who trust you with their sensitive information that you’ll do everything in your power to protect it. But business data has never been in greater danger than it is today. Cybercriminals have become more advanced, digitally pillaging companies, endangering customers, and stealing billions in revenue. In 2021, businesses suffered 50% more cyber attacks per week than in 2020. This was the same year that cybercriminals managed to steal $6.9 billion. But there is an effective way you can fight back against cybercriminals. Access management allows you to police your access points by increasing security around how users and employees alike access systems. So what are some of the ways in which you can create an airtight access management plan? What can you do to ensure that cybercriminals can’t worm their way into your system? That’s what we’re going to address in this article. We’ll walk you through five access management best practices to help you keep your systems reserved for valid users only. Before we jump into our best practices, let’s talk about why some businesses and industries need to tighten digital security. Access management measures are essential for high-risk industries. They can help you protect your customers by limiting how they can access their accounts. Let’s say you’ve developed a personal finance software solution, and a customer calls in asking how to link their bank account to your budgeting app. You’re going to need to authenticate that user’s identity before giving them access to the account. Anyone can call in claiming to be anyone. But if you have access management measures in place, they won’t be able to break in. This could be something like multi-factor authentication or asking them to provide additional information before assisting them. If you use a CRM platform for managing customer relationships, you’re going to be keeping a lot of confidential information online that’s vital to your organization. That’s why you have to make sure that the only people accessing your CRM are current team members. If you let a sales associate go and don’t have an access management protocol in place that immediately revokes their account, they could log in remotely and make off with a ton of company data. Central platforms like LoginRadius let companies access all of their tools from one platform — with just one login. But if you don’t have access management protocols in place for a centralizing system like this, a cybercriminal could gain access to every tool your organization uses with just one attack. Access management needs to be both effective and easy to manage for the people who need access to your systems. Take the grant systems that many institutions use as an example. They often have pristine access management protocols in place. If accessing this system were too easy in an unprotected environment, malicious actors could gain access to their systems and make off with precious information. But if that system wasn’t also user-friendly for authorized users, something as simple as asking “how do student grants work” could be a nightmare time sucker. The following best practices will help you improve your access management, enabling maximum protection against cybercrime and creating a more secure business environment. One of the best ways to protect your company’s digital assets is to implement a zero-trust policy. Zero trust is exactly what it sounds like. Every member of your organization is forced to authenticate their identities before being able to access any resources. This includes employees who are already active inside a company network. This methodology means that every person and every device is treated as though it’s a potential threat. When working under zero trust, the system will be able to identify any abnormal behaviors while tracking both activities and risk levels. When assigning privileges to accounts, it’s best to err on the side of caution. That’s where the Principle of Least Privilege comes into play. Also sometimes known as the Principle of Least Authority, it’s when you provide the minimum level of access to all users. This includes permissions granted to consumers. You’re basically giving everyone the bare minimum level of access they need to accomplish what they need to while using your system. Obviously, some roles within your organization will need more access than others — an accountant requires different access than a sales agent, so they would have completely different access levels. When you restrict users from any non-essential access, you effectively cut off opportunities for cybercriminals to access your entire system. A lot of people believe that a strong password is all they really need to have a secure online experience. However, password misuse often leads to cybercrime breaches and data attacks. It all boils down to the actual security behind the password — the person and their habits. If a staff member opens malware and gets a keylogger, it doesn’t matter if you mandate 12 characters, symbols, and numbers. Your business information is still ripe for the picking. That’s why multi-factor authentication has become an essential access management practice. It adds an additional security layer to the login process. When you use MFA, anyone logging in will be asked to provide an additional method of verification once they enter their password. This could be entering a code sent to their email or via text message. It could also be a biometric scan on a mobile device like a fingerprint or facial recognition. If your business hasn’t yet upgraded its systems to the cloud, then you have a glaring access management vulnerability. Many believed for a long time that in-house servers were safer than cloud-based systems, but cloud platforms encrypt all data while providing enhanced security features like patch management, integrations, and segmentation, to name a few. Plus, your on-site servers are vulnerable to physical access from unauthorized users who could break into your facility. Anyone looking to protect on-site servers from hackers will have to make a great investment in both time and money. Personnel changes represent a huge vulnerability from an access management standpoint. Offboarding needs to be done right away when a member of your team quits or is let go. Failure to revoke access to your systems in a timely manner could leave you open to attack. Say your sales director is moving to a new position with a rival company. If they still have access to customer data, they could take it with them, delete it entirely off your platform, or try to steal your leads. You also never want to leave orphaned accounts in play. These are accounts that have no assigned user but still contain all of the information and permissions associated with your former team member. Hackers love orphaned accounts because they’re relatively easy to gain access to. A hacker could then easily crack the credentials of your former employee and weasel their way into that account. Once inside, they have access to everything that specific team member could once see and do. If they had access to customer information, then you officially have a data breach on your hands. That’s why it’s a good idea to automate the onboarding and offboarding processes. This will save your IT department time and ensure that new team members and vendors get the right permissions right away and have them taken away the moment they’re no longer with you. You need to implement access management protocols within your organization. It’s the only way to protect yourself from the ongoing threat represented by cybercriminals. These cyber-threats are not going away anytime soon, and they’re not going to become any easier to fight off. Malicious actors are constantly looking for new ways to break into your systems and take off with your sensitive and valuable data. They’re also always on the cutting edge of technology, creating new and inventive ways to get past your security and gain access. This list isn’t a “pick one, and you’re done” guide. You can create an airtight access management plan by implementing all five of these tips. That means adopting a zero-trust policy, using the Principle of Least Privilege, having everyone use MFA, getting rid of high-risk systems, and removing orphaned accounts to prevent hackers from gaining access. Use these best practices to manage access to your systems and ensure that all data within your organization is safe from malicious cybercriminals. Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences. We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way. The goal? Having them spend less time searching and more time building. LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible. Here’s a closer look at what’s new and why it’s important: Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference. The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter. So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient. We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need: This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem. We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available. The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions. Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs. Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks. Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications. Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!What You'll Build Today?
\nProject Setup
\n
\nnpx create-react-app react-tailwind-app
\ncd create-react-app react-tailwind-app && npm i react-router-domInstall Tailwind CSS
\n
\nnpm install -D tailwindcss postcss autoprefixer
\nnpx tailwindcss init -ptailwind.config.js file and postcss.config.js file for you as shown:Configuring Tailwind CSS
\ntailwind.config.js file to support templates for your React component files as shown:
\nmodule.exports = {\n content: [\n "./src/**/*.{js,jsx,ts,tsx}",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}index.css file present in the root directory:
\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n...
\nnpm startFrontend Architecture and Boilerplate
\nComponent Architecture
\n<Header/> component that takes care of the page's heading and displays a link to navigate to another page. <Input/> component that can be used inside the form. All in all, here's what your frontend architecture would look like:Directory Structure
\n
\n.\n├── components/\n│ ├── FormAction.js\n│ ├── FormExtra.js\n│ ├── Header.js\n│ ├── Input.js\n│ ├── Login.js\n│ └── Signup.js\n├── constants/\n│ └── formFields.js\n└── pages/\n ├── Login.js\n └── Signup.js/src/pages/Login.js), you can put down the following code:
\nexport default function LoginPage(){\n return(\n <>\n \n </>\n )\n}Form Fields Constants
\nformFields.js file earlier. This file will hold all the input fields related constants like placeholder, value, name, field type, etc. Inside this file, add the following code:
\nconst loginFields=[\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n }\n]\n\nconst signupFields=[\n {\n labelText:"Username",\n labelFor:"username",\n id:"username",\n name:"username",\n type:"text",\n autoComplete:"username",\n isRequired:true,\n placeholder:"Username" \n },\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n },\n {\n labelText:"Confirm Password",\n labelFor:"confirm-password",\n id:"confirm-password",\n name:"confirm-password",\n type:"password",\n autoComplete:"confirm-password",\n isRequired:true,\n placeholder:"Confirm Password" \n }\n]\n\nexport {loginFields,signupFields}\n
\nlabelText: The label for an input fieldlabelFor: The value that associates a label to the input field via an id attribute on the input fieldid, name , type, and placeholder: Respective attributes on the input field isRequired: If you want to make an input field mandatory, in this case, all our input fields for form submission will be mandatory<Input/> component that you'll create shortly.Set Up Routing
\n/src/App.js file and add the following code:
\nimport './App.css';\nimport {\n BrowserRouter,\n Routes,\n Route,\n} from "react-router-dom";\nimport SignupPage from './pages/Signup';\nimport LoginPage from './pages/Login';\n\nfunction App() {\n return (\n <div className="min-h-full h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">\n <div className="max-w-md w-full space-y-8">\n <BrowserRouter>\n <Routes>\n <Route path="/" element={<LoginPage/>} />\n <Route path="/signup" element={<SignupPage/>} />\n </Routes>\n </BrowserRouter>\n </div>\n </div>\n );\n}\n\nexport default App;<BrowserRouter/> with some long classnames. min-h-full and h-screen classes. Then, it centers everything via flex, items-center to vertically center all the flex child elements, and justifty-center to center them horizontally. p. For top and bottom padding, we use the prefix py- followed by some value. We also have some responsive padding on small and large screen devices prefixed with sm: and lg: respectively. You can learn more about these padding and margin properties to see other similar classes you can use. The Header Component
\n<Header/> component that you can render on both the login and signup pages for quick information and navigation./src/components/Header.js, and add the following code:
\nimport {Link} from 'react-router-dom';\n\nexport default function Header({\n heading,\n paragraph,\n linkName,\n linkUrl="#"\n}){\n return(\n <div className="mb-10">\n <div className="flex justify-center">\n <img \n alt=""\n className="h-14 w-14"\n src="https://ik.imagekit.io/pibjyepn7p9/Lilac_Navy_Simple_Line_Business_Logo_CGktk8RHK.png?ik-sdk-version=javascript-1.4.3&updatedAt=1649962071315"/>\n </div>\n <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">\n {heading}\n </h2>\n <p className="mt-2 text-center text-sm text-gray-600 mt-5">\n {paragraph} {' '}\n <Link to={linkUrl} className="font-medium text-purple-600 hover:text-purple-500">\n {linkName}\n </Link>\n </p>\n </div>\n )\n}<Header/> component takes four props:\n
\nheading that it displays on the top;paragraph;linkName to display which page it will redirect the user to; and,linkUrl.mb-10 class.h-14 and w-14 classes, respectively. <Header/> component with all the props inside the Login page (/src/pages/Login.js):
\nimport Header from "../components/Header"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n \n </>\n )\n}The Input Component
\n<Input/> component that you'll use to build your Login form./src/components/Input.js file, and add the following code:
\nconst fixedInputClass="rounded-md appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"\n\nexport default function Input({\n handleChange,\n value,\n labelText,\n labelFor,\n id,\n name,\n type,\n isRequired=false,\n placeholder,\n customClass\n}){\n return(\n <div className="my-5">\n <label htmlFor={labelFor} className="sr-only">\n {labelText}\n </label>\n <input\n onChange={handleChange}\n value={value}\n id={id}\n name={name}\n type={type}\n required={isRequired}\n className={fixedInputClass+customClass}\n placeholder={placeholder}\n />\n </div>\n )\n}formFields.js constants file?<Input/> component will take. It will also take a value and a handleChange prop since we want this to be a controlled component linked to some state.fixedInputClass. It contains all the essential styling classes for the input field.customClass prop that will append any custom Tailwind class you want to pass to the input field for customizations. How cool is that?!The Login Component
\n<Login/> component inside /src/components/Login.js, where the entire Login form will be rendered. This component will also be responsible for owning any state or event handlers passed down as props to other child components.loginFields from your formFields constants, we programmatically generate an initial value for your loginState.handleChange event handler to update the state whenever an onChange event is fired from the nested <Input/> component. fields array and render an <Input/> component that you've created in the previous section.
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n\n return(\n <form className="mt-8 space-y-6">\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n \n\n </form>\n )\n}<Login/> component inside /src/pages/Login.js file as shown:
\nimport Header from "../components/Header"\nimport Login from "../components/Login"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n <Login/>\n </>\n )\n}<FormExtra> and <FormAction/> components.Wrapping Up the Login Page
\n<FormExtra/> component holds the template and styles for a simple \"Remember me\" functionality. /src/components/FormExtra.js file, add the following code:
\nexport default function FormExtra(){\n return(\n <div className="flex items-center justify-between ">\n <div className="flex items-center">\n <input\n id="remember-me"\n name="remember-me"\n type="checkbox"\n className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"\n />\n <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">\n Remember me\n </label>\n </div>\n\n <div className="text-sm">\n <a href="#" className="font-medium text-purple-600 hover:text-purple-500">\n Forgot your password?\n </a>\n </div>\n </div>\n\n )\n}/src/components/FormAction.js file and create a submit button for the Login form.
\nexport default function FormAction({\n handleSubmit,\n type='Button',\n action='submit',\n text\n}){\n return(\n <>\n {\n type==='Button' ?\n <button\n type={action}\n className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 mt-10"\n onSubmit={handleSubmit}\n >\n\n {text}\n </button>\n :\n <></>\n }\n </>\n )\n}<button/> element to style it. It makes our HTML appear bloated and difficult to read. We can follow the same approach of using a constant and a prop against the className for the <button/> as we previously did to combat this. /src/components/Login.js file as follows:
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport FormAction from "./FormAction";\nimport FormExtra from "./FormExtra";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n authenticateUser();\n }\n\n //Handle Login API Integration here\n const authenticateUser = () =>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n <FormExtra/>\n <FormAction handleSubmit={handleSubmit} text="Login"/>\n\n </form>\n )\n}The Signup Page
\n<Singup/> component inside /src/components/Signup.js file similar to the <Login/> component you've completed in the previous section. It will render the signup form fields and attach state and event handlers to it.
\nimport { useState } from 'react';\nimport { signupFields } from "../constants/formFields"\nimport FormAction from "./FormAction";\nimport Input from "./Input";\n\nconst fields=signupFields;\nlet fieldsState={};\n\nfields.forEach(field => fieldsState[field.id]='');\n\nexport default function Signup(){\n const [signupState,setSignupState]=useState(fieldsState);\n\n const handleChange=(e)=>setSignupState({...signupState,[e.target.id]:e.target.value});\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n console.log(signupState)\n createAccount()\n }\n\n //handle Signup API Integration here\n const createAccount=()=>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={signupState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n <FormAction handleSubmit={handleSubmit} text="Signup" />\n </div>\n\n \n\n </form>\n )\n}/src/pages/Signup.js alongside the <Header/> components with some modified props for the signup page.
\nimport Header from "../components/Header";\nimport Signup from "../components/Signup";\n\nexport default function SignupPage(){\n return(\n <>\n <Header\n heading="Signup to create an account"\n paragraph="Already have an account? "\n linkName="Login"\n linkUrl="/"\n />\n <Signup/>\n </>\n )\n}Use LoginRadius Authentication APIs
\n<Login/> component (/scr/components/Login.js), here's what the authenticateUser method would look like:
\n//Handle Login API Integration here\n const authenticateUser = () =>{\n \n \n const endpoint=`https://api.loginradius.com/identity/v2/auth/login?apikey=${apiKey}`;\n fetch(endpoint,\n {\n method:'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body:JSON.stringify(loginFields)\n }).then(response=>response.json())\n .then(data=>{\n //API Success from LoginRadius Login API\n })\n .catch(error=>console.log(error))\n \n }Conclusion
\nIntroduction
\nWhat is GovTech?
\nWhat are its Advantages?
\n1. Centralizing online services.
\n
\nThis single locus of access delivers a connected experience across multiple touchpoints and channels. This infrastructure supports account summary, customer profiles, permit applications, bill payments, etc. 2. Helping maintain one digital identity across all customer service.
\n
\nWithout a seamless user experience, engagement rates drop. But with GovTech incorporating Single Sign-On (SSO), cities and companies can allow customers to access all applications within their platform with a single set of unified credentials rather than register and log in to each service separately. 3. Integrating with third-party applications.
\n
\nMoreover, third-party integrations enable organizations to use that customer data to understand their customers better, offer more helpful information and deliver that information more directly.4. Risk-based authentication and MFA for another stringent layer of security.
\nThe Bottom Line
\nIntroduction
\nTraditional IAM vs. CIAM- What’s the Difference?
\nWhy Should You Make the Switch to a CIAM Solution?
\n#1. You have good traffic but no leads or conversions.
\n#5. You’re not making new customers.
\nLooking Forward
\nIntroduction
\nWhen Do You Need Access Management?
\n1. Customer access
\n2. Protect company secrets
\n3. Provide a secure, user-friendly login experience
\nBest Practices for Access Management
\n1. Implement a zero-trust policy
\n2. Adopt the principle of least privilege
\n3. Utilize multi-factor authentication
\n4. Get rid of high-risk systems
\n5. Remove orphaned accounts
\nWrap Up
\nWhat’s New and Improved on the LoginRadius Website?
\nA Developer-Friendly Dark Theme
\n![\"This](\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\")
Clear Categorization for LoginRadius Capabilities
\n![\"This](\"/e5358b82be414940f3fb146013845933/capabilities.webp\")
\n
\nDeveloper-First Navigation
\n![\"This](\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\")
Quick Understanding of Integration Benefits
\n![\"This](\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\")
Over to You Now!
\n