How to Generate Random Password in ReactJS ?
Generating random passwords is basic requirement for applications that has user authentication, registration, or security-related functionalities. In ReactJS, you can create a simple function to generate strong and random passwords for users. In this article, we will guide you through the process of building a Random Password Generator using React.
We will use Math.random() and Math.floor() methods to generate random characters.
Prerequisites
Approach
To generate a random password, the application utilizes the `generatePassword` function. This function constructs the password by iterating through selected character sets based on user preferences. For easy password copying, the application includes the functionality of `copyToClipboard`. This feature uses a temporary textarea element and provides users with a success message once their password is successfully copied.
Steps to Create React Application
Step 1: Create a react application by using this command
npx create-react-app random-password-generator
Step 2: After creating your project folder, i.e. react-project, use the following command to navigate to it:
cd random-password-generator
Project Structure
Example: Write the following code in App.js file
Javascript
// App.js import React, { useState } from "react" ; const containerStyle = { maxWidth: "400px" , margin: "1rem" , padding: "20px" , border: "1px solid #ccc" , borderRadius: "8px" , boxShadow: "0px 0px 10px 0px grey" , }; const inputContainerStyle = { display: "flex" , alignItems: "center" , marginBottom: "10px" , }; const labelStyle = { flex: "1" , }; const inputStyle = { padding: "5px" , border: "1px solid #ccc" , borderRadius: "3px" , }; const checkboxContainerStyle = { display: "flex" , alignItems: "center" , marginBottom: "5px" , }; const buttonStyle = { padding: "10px 15px" , backgroundColor: "#007bff" , color: "#fff" , border: "none" , borderRadius: "5px" , cursor: "pointer" , transition: "background-color 0.2s ease-in-out" , }; const copyButtonStyle = { marginLeft: "10px" , }; const App = () => { const [password, setPassword] = useState( "" ); const [passwordLength, setPasswordLength] = useState(12); const [useSymbols, setUseSymbols] = useState( true ); const [useNumbers, setUseNumbers] = useState( true ); const [useLowerCase, setUseLowerCase] = useState( true ); const [useUpperCase, setUseUpperCase] = useState( true ); const [successMessage, setSuccessMessage] = useState( "" ); const generatePassword = () => { let charset = "" ; let newPassword = "" ; if (useSymbols) charset += "!@#$%^&*()" ; if (useNumbers) charset += "0123456789" ; if (useLowerCase) charset += "abcdefghijklmnopqrstuvwxyz" ; if (useUpperCase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ" ; for (let i = 0; i < passwordLength; i++) { newPassword += charset.charAt(Math.floor(Math.random() * charset.length)); } setPassword(newPassword); }; const copyToClipboard = () => { const el = document.createElement( "textarea" ); el.value = password; document.body.appendChild(el); el.select(); document.execCommand( "copy" ); document.body.removeChild(el); setSuccessMessage( "Password copied to clipboard!" ); setTimeout(() => setSuccessMessage( "" ), 2000); // Hide message after 2 seconds }; return ( <div style={containerStyle}> <h1 style={{ color: "green" , textAlign: "center" , }} > w3wiki </h1> <h3 style={{ textAlign: "center" }}>Random Password Generator</h3> <div style={inputContainerStyle}> <label style={labelStyle}>Password Length:</label> <input type= "number" min= "8" max= "32" value={passwordLength} onChange={(e) => setPasswordLength(e.target.value)} style={inputStyle} /> </div> <div style={checkboxContainerStyle}> <label> <input type= "checkbox" checked={useSymbols} onChange={() => setUseSymbols(!useSymbols)} /> Symbols </label> <label> <input type= "checkbox" checked={useNumbers} onChange={() => setUseNumbers(!useNumbers)} /> Numbers </label> <label> <input type= "checkbox" checked={useLowerCase} onChange={() => setUseLowerCase(!useLowerCase)} /> LowerCase </label> <label> <input type= "checkbox" checked={useUpperCase} onChange={() => setUseUpperCase(!useUpperCase)} /> UpperCase </label> </div> <button style={buttonStyle} onClick={generatePassword}> Generate Password </button> {password && ( <div style={inputContainerStyle}> <label style={labelStyle}>Generated Password:</label> <input type= "text" value={password} readOnly style={inputStyle} /> <button style={{ ...buttonStyle, ...copyButtonStyle, }} onClick={copyToClipboard} > Copy </button> </div> )} {successMessage && ( <p style={{ color: "green" , textAlign: "center" , }} > {successMessage} </p> )} </div> ); }; export default App; |
Step to run the application: Open the Terminal and type the command mentioned below to open the program.
npm start