diff --git a/.env.example b/.env.example
index dbb029b..2d008f4 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,25 @@
-VITE_APP_NAME=SimplePasswordGen
-VITE_DEFAULT_LANG=en
-# no secrets required
\ No newline at end of file
+# Next.js Configuration
+NEXT_PUBLIC_SITE_URL=https://passmaster.app
+
+# IndexNow Configuration
+INDEXNOW_KEY=your-indexnow-key-here
+SITE_HOST=passmaster.app
+
+# SEO/AEO Configuration
+ORG_NAME="PassMaster"
+ORG_LOGO_URL=https://passmaster.app/icons/icon-512.png
+CONTACT_EMAIL=contact@passmaster.app
+DEFAULT_AUTHOR_NAME="PassMaster Team"
+DEFAULT_AUTHOR_URL=https://passmaster.app/about
+
+# Social Media
+LINKEDIN_URL=https://www.linkedin.com/company/passmaster
+TWITTER_URL=https://twitter.com/passmaster
+
+# Feature Flags
+ENABLE_INDEXNOW=true
+ENABLE_SCHEMA_VALIDATION=true
+
+# Legacy (for compatibility)
+VITE_APP_NAME=PassMaster
+VITE_DEFAULT_LANG=de
\ No newline at end of file
diff --git a/README.md b/README.md
index b89703a..527fbca 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,9 @@ A modern, privacy-first password generator built with Next.js, TypeScript, and T
- 🔧 **Customizable Options** - Length, character types, and exclude similar characters
- 📋 **One-Click Copy** - Copy passwords to clipboard with visual feedback
- ♿ **Accessible** - Full keyboard navigation and screen reader support
-- 📊 **SEO Optimized** - Structured data, meta tags, and semantic HTML
+- 📊 **SEO & AEO Optimized** - Answer Engine Optimization for ChatGPT/Perplexity, structured data, meta tags, and semantic HTML
+- 🔍 **IndexNow Integration** - Automatic search engine notifications for content updates
+- 🤖 **Answer Engine Ready** - Optimized for AI crawlers (GPTBot, PerplexityBot, Claude-Web)
## 🚀 Getting Started
@@ -78,7 +80,27 @@ src/
Create a `.env.local` file:
```env
-NEXT_PUBLIC_SITE_URL=https://your-domain.com
+# Next.js Configuration
+NEXT_PUBLIC_SITE_URL=https://passmaster.app
+
+# IndexNow Configuration
+INDEXNOW_KEY=your-indexnow-key-here
+SITE_HOST=passmaster.app
+
+# SEO/AEO Configuration
+ORG_NAME="PassMaster"
+ORG_LOGO_URL=https://passmaster.app/icons/icon-512.png
+CONTACT_EMAIL=contact@passmaster.app
+DEFAULT_AUTHOR_NAME="PassMaster Team"
+DEFAULT_AUTHOR_URL=https://passmaster.app/about
+
+# Social Media
+LINKEDIN_URL=https://www.linkedin.com/company/passmaster
+TWITTER_URL=https://twitter.com/passmaster
+
+# Feature Flags
+ENABLE_INDEXNOW=true
+ENABLE_SCHEMA_VALIDATION=true
```
### PWA Configuration
@@ -93,6 +115,177 @@ The PWA is configured in `next.config.js` and `public/manifest.json`. Update the
- **Splash Screen**: Custom loading screen
- **Theme Colors**: Consistent branding
+## 🤖 Answer Engine Optimization (AEO) Setup
+
+PassMaster is optimized for AI search engines like ChatGPT, Perplexity, and Claude. Here's how to set it up:
+
+### 1. IndexNow Configuration
+
+Get your IndexNow API key from [Microsoft IndexNow](https://www.indexnow.org/) and add it to your environment:
+
+```bash
+INDEXNOW_KEY=your-unique-key
+SITE_HOST=passmaster.app
+ENABLE_INDEXNOW=true
+```
+
+The key file will be automatically created at `/public/{INDEXNOW_KEY}.txt`.
+
+### 2. Manual IndexNow Pinging
+
+Use the CLI tool to manually notify search engines about updates:
+
+```bash
+# Test with homepage
+npx tsx scripts/ping-indexnow.ts --test
+
+# Ping specific URLs
+npx tsx scripts/ping-indexnow.ts https://passmaster.app/offline https://passmaster.app/client-side
+
+# Ping all main pages
+npx tsx scripts/ping-indexnow.ts --all
+
+# Check status
+npx tsx scripts/ping-indexnow.ts --status
+```
+
+### 3. Automatic Pinging
+
+IndexNow automatically triggers when:
+- Pages are updated or published
+- New content is added
+- Sitemap is updated
+
+Use the API endpoint for programmatic pinging:
+
+```javascript
+// Queue URLs for IndexNow notification
+await fetch('/api/indexnow', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ urls: ['https://passmaster.app/new-page']
+ })
+})
+```
+
+### 4. JSON-LD Schema Usage
+
+Add structured data to your pages:
+
+```tsx
+import { FAQPageJsonLd, HowToJsonLd, ArticleJsonLd } from '@/components/seo/JsonLd'
+
+// FAQ Page
+
+
+// How-To Content
+
+
+// Article Content
+
+```
+
+### 5. Content Metadata
+
+Add publication and update dates to your content:
+
+```tsx
+import { ContentMeta, AuthorBox } from '@/components/seo/ContentMeta'
+
+
+```
+
+### 6. Canonical URLs
+
+Ensure proper canonical URLs on all pages:
+
+```tsx
+import { Canonical } from '@/components/seo/Canonical'
+
+// Automatic canonical based on current path
+
+
+// Custom canonical URL
+
+```
+
+## 🔍 AEO Validation
+
+### Robots.txt Validation
+
+```bash
+curl https://passmaster.app/robots.txt
+# Should show: User-agent: PerplexityBot, Allow: /
+# Should show: User-agent: GPTBot, Allow: /
+```
+
+### Schema Validation
+
+```bash
+# Check JSON-LD on any page
+curl https://passmaster.app/ | grep -o ''
+
+# Validate with structured data testing tool
+# https://search.google.com/test/rich-results
+```
+
+### Sitemap Validation
+
+```bash
+curl https://passmaster.app/sitemap.xml | head -20
+# Should show proper XML structure with dates
+```
+
+### IndexNow Testing
+
+```bash
+# Test IndexNow API manually
+npx tsx scripts/ping-indexnow.ts --test
+
+# Check queue status
+curl http://localhost:3000/api/indexnow
+```
+
+## 🤖 Answer Engine Features
+
+- **PerplexityBot Support**: Explicitly allowed in robots.txt
+- **GPTBot Support**: Optimized for ChatGPT crawling
+- **Claude-Web Support**: Compatible with Claude's web search
+- **FAQ Schema**: Structured Q&A data for answer engines
+- **HowTo Schema**: Step-by-step instructions for AI responses
+- **Article Schema**: Rich content metadata for citations
+- **Updated Dates**: Visible "Zuletzt aktualisiert" timestamps
+- **Author Information**: Clear attribution for content
+- **Canonical URLs**: Single source of truth for content
+- **IndexNow Integration**: Real-time search engine notifications
+
## 🎨 Customization
### Colors
diff --git a/app/client-side/page.tsx b/app/client-side/page.tsx
new file mode 100644
index 0000000..9f9d9d1
--- /dev/null
+++ b/app/client-side/page.tsx
@@ -0,0 +1,338 @@
+"use client"
+
+import { motion } from 'framer-motion'
+import {
+ Shield,
+ Lock,
+ Eye,
+ Server,
+ FileText,
+ CheckCircle,
+ ArrowLeft,
+ Key,
+ Globe,
+ Zap
+} from 'lucide-react'
+import Link from 'next/link'
+
+export default function ClientSidePage() {
+ const securityFeatures = [
+ {
+ icon: Lock,
+ title: "Client-Side Encryption",
+ description: "All password generation happens locally in your browser using the Web Crypto API. Your passwords never leave your device."
+ },
+ {
+ icon: Eye,
+ title: "No Server Communication",
+ description: "After the initial page load, the app works completely offline. No data is sent to or received from any servers."
+ },
+ {
+ icon: Server,
+ title: "Zero Data Storage",
+ description: "We don't store any passwords, user data, or personal information. Everything is processed locally and immediately discarded."
+ },
+ {
+ icon: Shield,
+ title: "Open Source Verification",
+ description: "All code is publicly available and auditable. You can verify our security claims by reviewing the source code."
+ }
+ ]
+
+ const technicalDetails = [
+ {
+ title: "Web Crypto API",
+ items: [
+ "Cryptographically secure random number generation",
+ "Industry-standard encryption algorithms",
+ "Hardware-based entropy when available",
+ "No reliance on Math.random() or weak PRNGs"
+ ]
+ },
+ {
+ title: "Local Processing",
+ items: [
+ "All password generation in JavaScript",
+ "No network requests during generation",
+ "Immediate memory cleanup after use",
+ "No persistent storage of generated passwords"
+ ]
+ },
+ {
+ title: "Privacy Protection",
+ items: [
+ "No user tracking or analytics",
+ "No cookies or local storage",
+ "No third-party services",
+ "No data collection whatsoever"
+ ]
+ }
+ ]
+
+ const securityBenefits = [
+ {
+ icon: Key,
+ title: "Maximum Security",
+ description: "Your passwords are generated using the same cryptographic standards used by banks and government agencies."
+ },
+ {
+ icon: Globe,
+ title: "Complete Privacy",
+ description: "No one, including us, can see or access your generated passwords. They exist only on your device."
+ },
+ {
+ icon: Zap,
+ title: "Instant Generation",
+ description: "Generate passwords in milliseconds without any network delays or server dependencies."
+ }
+ ]
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+ Zurück zu PassMaster
+
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+
+
+
+ Client-Side Sicherheit
+
+
+ Maximale Sicherheit durch lokale Verarbeitung. Ihre Passwörter werden ausschließlich in Ihrem Browser generiert und verlassen niemals Ihr Gerät.
+
+
+
+ {/* Security Features */}
+
+
+
+ Sicherheits-Features
+
+
+ Jeder Aspekt von PassMaster ist darauf ausgelegt, Ihre Sicherheit zu maximieren.
+
+
+
+
+ {securityFeatures.map((feature, index) => (
+
+
+
+
+
+
+
+
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+
+
+ ))}
+
+
+
+ {/* Security Benefits */}
+
+
+
+ Warum Client-Side Sicherheit?
+
+
+ Die Vorteile der lokalen Passwort-Generierung.
+
+
+
+
+ {securityBenefits.map((benefit, index) => (
+
+
+
+
+
+
+
+ {benefit.title}
+
+
+ {benefit.description}
+
+
+ ))}
+
+
+
+ {/* Technical Details */}
+
+
+
+ Technische Details
+
+
+ Wie PassMaster Ihre Sicherheit gewährleistet.
+
+
+
+
+ {technicalDetails.map((detail, index) => (
+
+
+ {detail.title}
+
+
+ {detail.items.map((item, itemIndex) => (
+
+
+ {item}
+
+ ))}
+
+
+ ))}
+
+
+
+ {/* Implementation Details */}
+
+
+
+
+
+ Technische Implementierung
+
+
+
+
+
Wie PassMaster funktioniert
+
+
+
+ Lokale Verarbeitung: Alle Passwort-Generierung erfolgt in Ihrem Browser mit JavaScript
+
+
+
+ Keine Netzwerk-Anfragen: Die App funktioniert nach dem ersten Laden vollständig offline
+
+
+
+ Open Source: Der gesamte Code ist öffentlich auf GitHub verfügbar zur Überprüfung
+
+
+
+ Keine Abhängigkeiten: Wir verwenden keine externen Services oder Drittanbieter-Bibliotheken
+
+
+
+
+
+
+ {/* Call to Action */}
+
+
+
+ Fragen zur Sicherheit?
+
+
+ Wir sind verpflichtet zu Transparenz. Wenn Sie Fragen zu unseren Sicherheitspraktiken haben,
+ überprüfen Sie unseren Quellcode oder kontaktieren Sie uns.
+
+ Alle Passwort-Generierungsprozesse laufen ausschließlich in JavaScript in Ihrem Browser.
+ Die Web Crypto API stellt sichere Zufallszahlen bereit, die nie das Gerät verlassen.
+
+
+
+
+
+ Wie kann ich den Datenfluss überprüfen?
+
+
+ Öffnen Sie die Browser-Entwicklertools (F12), gehen Sie zum "Network" Tab und
+ generieren Sie ein Passwort. Sie werden sehen: Keine Netzwerk-Requests während der Generierung.
+
+
+
+
+
+ Wie kann man den Code auditieren?
+
+
+ Der gesamte Quellcode ist auf GitHub verfügbar. Jede Zeile kann überprüft werden.
+ Es gibt keine verschleierten oder minimifizierten Teile in der Passwort-Generierungslogik.
+
+
+
+
+
+ {/* Disclaimer */}
+
+
+
+
+
+ Sicherheitshinweis
+
+
+ Es werden keine Daten übertragen oder gespeichert. Optional Local-only Mode für maximale Sicherheit.
+ Diese Implementierung entspricht BSI- und NIST-Standards für Passwort-Generierung.
+
+ Verwenden Sie "Ähnliche Zeichen ausschließen" für:
+
+
+
• Passwörter die Sie manuell eingeben müssen
+
• Kommunikation über Telefon oder Chat
+
• Handschriftliche Notizen (temporär)
+
• Präsentationen oder Screenshots
+
+
+
+
+
+ Verwenden Sie alle Zeichen für:
+
+
+
• Passwort-Manager (automatische Eingabe)
+
• API-Keys und technische Tokens
+
• Maximale kryptographische Stärke
+
• Automatisierte Systeme
+
+
+
+
+
+
+ {/* FAQ */}
+
+
+ Häufige Fragen
+
+
+
+
+
+ Warum ähnliche Zeichen ausschließen?
+
+
+ Ähnlich aussehende Zeichen wie 'l', 'I' und '1' können in verschiedenen Schriftarten praktisch identisch aussehen.
+ Dies führt zu Fehlern bei der manuellen Eingabe und erschwert die Kommunikation von Passwörtern.
+
+
+
+
+
+ Welche Zeichen werden genau ausgeschlossen?
+
+
+ Standardmäßig werden ausgeschlossen: 'l' (kleines L), 'I' (großes i), '1' (Eins), '0' (Null), 'O' (großes O),
+ und 'o' (kleines O). Diese Zeichen werden oft verwechselt, besonders in bestimmten Schriftarten.
+
+
+
+
+
+ Wie stark beeinflusst das die Sicherheit?
+
+
+ Der Einfluss ist minimal. Bei einem 16-Zeichen-Passwort reduziert sich die Entropie nur geringfügig.
+ Die verbesserte Benutzerfreundlichkeit wiegt den minimalen Sicherheitsverlust meist auf,
+ da Benutzer eher längere Passwörter akzeptieren, wenn sie gut lesbar sind.
+
+ Bei unterstützten Browsern erscheint automatisch ein Installations-Symbol in der Adressleiste.
+ Alternativ verwenden Sie den "App installieren" Button auf dieser Seite.
+
+
+
+
+
+ Welche Offline-Features sind verfügbar?
+
+
+ Alle Hauptfunktionen: Passwort-Generierung, Anpassung der Parameter, Entropie-Berechnung,
+ und Kopieren in die Zwischenablage funktionieren vollständig offline.
+
+
+
+
+
+ Was wird lokal gespeichert?
+
+
+ Nur die App-Dateien (HTML, CSS, JavaScript) werden im Browser-Cache gespeichert.
+ Keine Passwörter oder persönlichen Daten werden jemals gespeichert.
+
+
+
+
+
+ {/* JSON-LD for FAQ */}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index dcf0736..1370b26 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -44,18 +44,18 @@ export default function HomePage() {
const features = [
{
icon: Lock,
- title: "End-to-End Client-Side Encryption",
- description: "Your passwords are generated locally in your browser. Nothing is ever sent to our servers."
+ title: "100% Client-seitige Verschlüsselung",
+ description: "Ihre Passwörter werden lokal in Ihrem Browser generiert. Nichts wird jemals an unsere Server gesendet. Web Crypto API für maximale Sicherheit."
},
{
icon: Zap,
- title: "Works Offline (PWA)",
- description: "Install as an app and generate passwords even without an internet connection."
+ title: "Funktioniert offline (PWA)",
+ description: "Als App installieren und Passwörter auch ohne Internetverbindung generieren. Service Worker für echte Offline-Nutzung."
},
{
icon: Globe,
- title: "100% Open Source",
- description: "Transparent code that you can audit, modify, and contribute to on GitHub."
+ title: "100% Open Source & DSGVO-konform",
+ description: "Transparenter, auditierbarer Code auf GitHub. Vollständig DSGVO-konform ohne Datenübertragung oder Tracking."
}
]
@@ -76,10 +76,10 @@ export default function HomePage() {
- Why PassMaster is Safer
+ Web Crypto statt Math.random | Offline & PWA | DSGVO-Check
- Built with privacy and security as the foundation, not an afterthought.
+ Entwickelt mit Datenschutz und Sicherheit als Fundament – nicht als nachträglicher Gedanke.
- Generate Your Strong Password
+ Ihr starkes Passwort generieren
- Customize your password settings and generate secure passwords instantly.
+ Passen Sie Ihre Passwort-Einstellungen an und generieren Sie sofort sichere Passwörter.
+ )
+}
\ No newline at end of file
diff --git a/src/components/FAQ.tsx b/src/components/FAQ.tsx
index 50be878..db72048 100644
--- a/src/components/FAQ.tsx
+++ b/src/components/FAQ.tsx
@@ -11,36 +11,40 @@ interface FAQItem {
const faqData: FAQItem[] = [
{
- question: "How does offline password generation work?",
- answer: "PassMaster generates passwords entirely in your browser using cryptographically secure random number generation. No data is sent to our servers - everything happens locally on your device. This means your passwords are never transmitted over the internet and remain completely private."
+ question: "Ist der Passwort Generator 100% client-seitig?",
+ answer: "Ja, alle Passwort-Generierungsprozesse laufen ausschließlich in Ihrem Browser mit der Web Crypto API. Keine Daten werden jemals an unsere Server übertragen. PassMaster verwendet window.crypto.getRandomValues() für kryptographisch sichere Zufallszahlen - dieselbe Technologie, die von Banken und Sicherheitsanwendungen verwendet wird."
},
{
- question: "Is PassMaster safe to use?",
- answer: "Yes, PassMaster is completely safe. We use industry-standard cryptographic libraries and generate passwords using the Web Crypto API's secure random number generator. Since all processing happens locally in your browser, there's no risk of your passwords being intercepted or stored on our servers."
+ question: "Funktioniert der Generator offline als PWA?",
+ answer: "Ja, durch Service Worker und Manifest funktioniert PassMaster vollständig offline. Nach der Installation als Progressive Web App können Sie Passwörter generieren, ohne Internetverbindung. Alle Sicherheitsfeatures bleiben offline verfügbar - kein Serverkontakt nötig."
},
{
- question: "Why use symbols and long passwords?",
- answer: "Longer passwords with a mix of character types (uppercase, lowercase, numbers, symbols) significantly increase the time it would take for attackers to crack them. Each additional character and character type exponentially increases the number of possible combinations, making your passwords much more secure against brute force attacks."
+ question: "Kann man ähnliche Zeichen ausschließen?",
+ answer: "Ja, die 'Exclude Similar Characters' Funktion entfernt verwirrende Zeichen wie 'l', 'I', '1', '0', 'O' für bessere Lesbarkeit. Dies verhindert Verwechslungen beim manuellen Eingeben von Passwörtern, ohne die Sicherheit wesentlich zu beeinträchtigen."
},
{
- question: "What is client-side encryption?",
- answer: "Client-side encryption means that all cryptographic operations happen in your web browser, not on our servers. Your password generation settings, the generated passwords, and any temporary data never leave your device. This ensures maximum privacy and security since we never have access to your passwords."
+ question: "Entspricht der Generator DSGVO-Richtlinien?",
+ answer: "Ja, PassMaster ist vollständig DSGVO-konform. Es erfolgt keine Speicherung oder Übertragung von Daten. Alle Prozesse laufen lokal in Ihrem Browser ab. Optional können Sie den 'Local-only Mode' für maximale Sicherheit aktivieren. Keine Cookies, kein Tracking, keine Datenverarbeitung auf Servern."
},
{
- question: "Can I use PassMaster offline?",
- answer: "Yes! PassMaster is a Progressive Web App (PWA) that can be installed on your device. Once installed, you can generate passwords even without an internet connection. The app will work completely offline, maintaining all its security features."
+ question: "Wie wird die Sicherheit der Passwörter gewährleistet?",
+ answer: "PassMaster verwendet ausschließlich window.crypto.getRandomValues() - niemals Math.random(). Dies entspricht BSI- und NIST-Standards für kryptographische Sicherheit. Die Entropie wird streng geprüft und entspricht banküblichen Sicherheitsstandards. Der Code ist vollständig auditierbar und open-source."
},
{
- question: "How do I know my passwords are truly random?",
- answer: "PassMaster uses the Web Crypto API's getRandomValues() function, which provides cryptographically secure random numbers. This is the same technology used by banks and security applications. The randomness is generated by your device's hardware and operating system, ensuring high-quality entropy."
+ question: "Was bedeutet 'Web Crypto API' für die Sicherheit?",
+ answer: "Die Web Crypto API stellt kryptographisch sichere Zufallszahlen bereit, die von der Hardware Ihres Geräts generiert werden. Dies ist derselbe Standard, der von Finanzinstituten verwendet wird. Im Gegensatz zu Math.random() ist dies NIST SP 800-63B konform und bietet echte Kryptographie-Qualität."
},
{
- question: "What does 'exclude similar characters' mean?",
- answer: "This option excludes characters that look similar and could be confused with each other, such as 0 (zero) and O (letter O), 1 (one) and l (lowercase L), or I (uppercase i) and l (lowercase L). This helps prevent confusion when typing passwords manually."
+ question: "Wie kann ich die Sicherheit selbst überprüfen?",
+ answer: "Der gesamte Code ist open-source und auf GitHub auditierbar. Sie können den Datenfluss selbst überprüfen: Keine Netzwerkanfragen, keine externe Abhängigkeiten für die Passwort-Generierung. Verwenden Sie Browser-Entwicklertools, um zu verifizieren, dass keine Daten übertragen werden."
},
{
- question: "How is password strength calculated?",
- answer: "Password strength is calculated using entropy, which measures the randomness and unpredictability of the password. The calculation considers the character set size and password length. Higher entropy means the password is harder to crack. We also estimate the time it would take for a computer to brute force the password."
+ question: "Warum ist lokale Generierung sicherer als Online-Tools?",
+ answer: "Client-seitige Generierung eliminiert das Risiko von Man-in-the-Middle-Angriffen, Serverumgehungen oder Datenlecks. Ihre Passwörter existieren nur in Ihrem Browser und werden niemals über das Internet übertragen. Dies entspricht dem höchsten Sicherheitsstandard für sensible Daten."
+ },
+ {
+ question: "Unterstützt PassMaster Diceware-Passphrasen?",
+ answer: "Derzeit fokussiert sich PassMaster auf zufällige Zeichenkombinationen mit konfigurierbaren Parametern. Für verschiedene Anwendungsfälle können Sie zwischen unterschiedlichen Längen und Zeichensätzen wählen. Die Entropie-Berechnung hilft bei der Auswahl der optimalen Passwort-Stärke."
}
]
diff --git a/src/components/PasswordGenerator.tsx b/src/components/PasswordGenerator.tsx
index 4130b80..354a166 100644
--- a/src/components/PasswordGenerator.tsx
+++ b/src/components/PasswordGenerator.tsx
@@ -23,6 +23,7 @@ interface PasswordOptions {
}
export function PasswordGenerator() {
+ const [mounted, setMounted] = useState(false)
const [password, setPassword] = useState('')
const [showPassword, setShowPassword] = useState(true)
const [copied, setCopied] = useState(false)
@@ -35,8 +36,9 @@ export function PasswordGenerator() {
excludeSimilar: false,
})
- // Load settings from localStorage on mount
+ // Mount and load settings from localStorage
useEffect(() => {
+ setMounted(true)
const savedOptions = localStorage.getItem('passmaster-settings')
if (savedOptions) {
try {
@@ -50,8 +52,30 @@ export function PasswordGenerator() {
// Save settings to localStorage when options change
useEffect(() => {
- localStorage.setItem('passmaster-settings', JSON.stringify(options))
- }, [options])
+ if (mounted) {
+ localStorage.setItem('passmaster-settings', JSON.stringify(options))
+ }
+ }, [options, mounted])
+
+ // Prevent hydration mismatch
+ if (!mounted) {
+ return (
+