Password Strength Checker

A flexible and customizable password strength checker for React applications with TypeScript support.

Features

• 🔒 Comprehensive password strength validation
• 🎨 Customizable strength requirements and levels
• ⚛️ React components included
• 📦 Framework-agnostic core
• 💪 Written in TypeScript
• 🎯 Zero dependencies

Installation

# Using npm
npm install @awais512/password-strength-checker

# Using yarn
yarn add @awais512/password-strength-checker

# Using pnpm
pnpm add @awais512/password-strength-checker

Quick Start

Basic React Usage

import { DefaultPasswordChecker } from "@awais512/password-strength-checker";

function App() {
  return (
    <div>
      <h1>Password Checker</h1>
      <DefaultPasswordChecker />
    </div>
  );
}

Core Usage

import { PasswordStrengthChecker } from "@awais512/password-strength-checker";

const checker = new PasswordStrengthChecker();
const strength = checker.calculateStrength("MyPassword123!");
console.log(`Password strength: ${strength}%`);

Advanced Usage

Custom Requirements

import { PasswordStrengthChecker } from "@awais512/password-strength-checker";

const checker = new PasswordStrengthChecker({
  requirements: [
    {
      key: "minLength",
      description: "Minimum 10 characters",
      validator: (pwd) => pwd.length >= 10,
    },
    {
      key: "hasSymbol",
      description: "Contains @ symbol",
      validator: (pwd) => pwd.includes("@"),
    },
  ],
});

Custom Strength Levels

import { PasswordStrengthChecker } from "@awais512/password-strength-checker";

const checker = new PasswordStrengthChecker({
  strengthLevels: [
    { label: "Weak", color: "#ff0000", threshold: 30 },
    { label: "Medium", color: "#ffff00", threshold: 60 },
    { label: "Strong", color: "#00ff00", threshold: 100 },
  ],
});

Custom React Component

import {
  PasswordInput,
  PasswordStrengthChecker,
} from "@awais512/password-strength-checker";
import { useState } from "react";

function CustomPasswordChecker() {
  const [password, setPassword] = useState("");
  const checker = new PasswordStrengthChecker();

  return (
    <PasswordInput
      value={password}
      onChange={setPassword}
      checker={checker}
      renderStrengthIndicator={(strength, level) => (
        <div>
          <div
            style={{
              width: `${strength}%`,
              height: "10px",
              backgroundColor: level.color,
              transition: "all 0.3s",
            }}
          />
          <p>Strength: {level.label}</p>
        </div>
      )}
      renderRequirements={(validations) => (
        <ul>
          {checker.getRequirements().map((req) => (
            <li key={req.key}>
              {validations[req.key] ? "✅" : "❌"} {req.description}
            </li>
          ))}
        </ul>
      )}
    />
  );
}

API Reference

PasswordStrengthChecker

Main class for password validation and strength calculation.

Constructor Options

interface PasswordStrengthOptions {
  requirements?: PasswordRequirement[];
  strengthLevels?: StrengthLevel[];
  minStrength?: number;
}

Methods

• calculateStrength(password: string): number - Returns strength percentage (0-100)
• validatePassword(password: string): Record<string, boolean> - Returns validation status for each requirement
• getStrengthLevel(password: string): StrengthLevel - Returns current strength level
• isPasswordValid(password: string): boolean - Checks if password meets minimum strength
• getRequirements(): PasswordRequirement[] - Returns current requirements

React Components

PasswordInput Props

interface PasswordInputProps {
  value: string;
  onChange: (value: string) => void;
  checker: PasswordStrengthChecker;
  renderStrengthIndicator?: (
    strength: number,
    level: StrengthLevel
  ) => React.ReactNode;
  renderRequirements?: (
    validations: Record<string, boolean>
  ) => React.ReactNode;
  className?: string;
}

DefaultPasswordChecker

A pre-styled password checker component with default rendering.

Default Configuration

Default Requirements

• Minimum 8 characters
• Contains uppercase letter
• Contains lowercase letter
• Contains number
• Contains special character

Default Strength Levels

• Very Weak (0-20%)
• Weak (20-40%)
• Fair (40-60%)
• Good (60-80%)
• Strong (80-100%)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © [Awais Raza]