Secure Password Generator: Implementation Guide

Password generation is a critical component of modern web applications. This implementation guide demonstrates how to create a robust password generator with customizable options and secure local storage.

Core Features

• Configurable character sets (uppercase, lowercase, numbers, symbols)
• Adjustable password length (1-50 characters)
• Option to exclude ambiguous characters
• Local password history storage
• One-click copy functionality
• Responsive design for mobile devices

Implementation

HTML Structure

Styling

JavaScript Implementation

State Management

javascript const state = reactive({ passwordHistory: [], }); let generatedPassword = ref(""); let passwordLength = ref(12); let includeDigits = ref(true); let includeLowercase = ref(true); let includeUppercase = ref(true); let includeSymbols = ref(true); let excludeAmbiguous = ref(true); let saveHistory = ref(true); let showHistory = ref(false); let maxHistoryItems = ref(100);

Password Generation Function

javascript const generatePassword = () => { const characterSets = { uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", lowercase: "abcdefghijklmnopqrstuvwxyz", digits: "0123456789", symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?", }; let availableChars = ""; // Process each character set for (const [key, value] of Object.entries(characterSets)) { if (key === "exclude" && excludeAmbiguous.value) { availableChars = availableChars.replace(/[1lI0oO]/g, ""); } else if (key === "symbols" && includeSymbols.value) { availableChars += value; } else if (key !== "exclude" && key !== "symbols" && eval(`${key}.value`)) { availableChars += value; } else { availableChars = availableChars.replace(new RegExp("[" + value + "]", "g"), ""); } } // Generate password generatedPassword.value = ""; for (let i = 0; i < passwordLength.value; i++) { const randomIndex = Math.floor(Math.random() * availableChars.length); generatedPassword.value += availableChars[randomIndex]; } // Save to history if enabled if (saveHistory.value) { state.passwordHistory = getItem("PASSWORD_HISTORY")?.length ? getItem("PASSWORD_HISTORY") : []; if (state.passwordHistory.length < maxHistoryItems.value) { state.passwordHistory.push(generatedPassword.value); setItem("PASSWORD_HISTORY", state.passwordHistory); } } };

Component Lifecycle

javascript onMounted(() => { generatePassword(); // Load saved history if exists if (getItem("PASSWORD_HISTORY")?.length) { state.passwordHistory = getItem("PASSWORD_HISTORY"); } });

Event Handlers

javascript const refreshPassword = () => { const refreshIcon = document.querySelector(".refresh-btn"); refreshIcon.classList.add("rotate-animation"); setTimeout(() => { refreshIcon.classList.remove("rotate-animation"); }, 500); generatePassword(); }; const toggleHistory = () => { showHistory.value = !showHistory.value; const historyIcon = document.querySelector(".bi-chevron-down"); historyIcon.classList.toggle("open"); }; const clearPasswordHistory = () => { removeItem("PASSWORD_HISTORY"); state.passwordHistory = getItem("PASSWORD_HISTORY"); showHistory.value = false; }; const copyToClipboard = (text) => { navigator.clipboard .writeText(text) .then(() => { ElNotification({ title: "Success", message: "Password copied to clipboard!", type: "success", zIndex: 99999, }); }) .catch(() => { ElNotification({ title: "Error", message: "Failed to copy password. Please try again.", type: "warning", zIndex: 99999, }); }); };

Security Considerations

When implementing a password generator, security should be the top priority. This implementation ensures that passwords are generated entirely in the client browser without any server-side processing. The password history is stored locally in the browser's local storage, not on any remote server.

The generator uses cryptographically secure random number generation through the browser's built-in Math.random() function. For applications requiring higher security, consider using the Web Crypto API for more robust random number generation.

Always validate and sanitize user inputs to prevent injection attacks, even though this particular implementation doesn't accept direct user input for password generation parameters.