react-pwd-validator

Simple password validator and React UI components with typescript support

Installation

npm i react-pwd-validator

or

yarn add react-pwd-validator

Features

• PasswordValidator class with multiple configuration options
• PasswordInput UI component
• PasswordValidationMessages UI component

Validator

The password validator PasswordValidator class is used to initialize a validator with varying levels of strength.

Configurable Parameters:

• Password strength (default is level 5)
• Minimum password length (default is 8 based on OWASP recommendations)
• Maximum password length (default is 64 based on OWASP recommendations)

6 levels of password strength (each incremental level contains the restrictions of the previous levels):

• 0 - No restrictions
• 1 - Password must meet length requirements
• 2 - Password must contain at least one lowercase letter
• 3 - Password must contain at least one uppercase letter
• 4 - Password must contain at least on digit
• 5 (default if no level is provided) - Password must contain at least on special character

Method

Usage

PasswordValidator.validatePassword()

Validates password based on parameters

import { PasswordValidator } from "react-pwd-validator";

const passwordValidator = new PasswordValidator(); // Defaults to maximum password strength
const password = "Password";
const passwordValidation = passwordValidator.validatePassword(password);
console.log(passwordValidation);

Outputs

{
  passwordLevels: {
    digits: true,
    length: true,
    lowercaseLetters: true,
    specialCharacters: false,
    uppercaseLetters: true,
  },
  validated: false;
}

Example: User defined parameters

import { PasswordValidator } from "react-pwd-validator";
/*
 * Strength level = 3
 * Minimum password length = 5
 * Maximum password length = 30
 */
const passwordValidator = new PasswordValidator(3, 5, 30);
const password = "Password";
const passwordValidation = passwordValidator.validatePassword(password);
console.log(passwordValidation);

Output

// passwordValidation object
{
  passwordLevels: {
    length: true,
    lowercaseLetters: true,
    uppercaseLetters: true,
  },
  validated: true;
}

PasswordValidator.getMessages()

Gets password info messages for UI based on validator strength

const passwordValidator = new PasswordValidator();
console.log(passwordValidator.getMessages());

{
  length: "Must be at least 8 characters long",
  lowercaseLetters: "Must contain at least 1 lowercase letter",
  uppercaseLetters: "Must contain at least 1 uppercase letter",
  digits: "Must contain at least 1 digit",
  specialCharacters: "Must contain at least 1 symbol"
}

/*
 * Strength level = 3
 * Minimum password length = 5
 * Maximum password length = 30
 */
const passwordValidator = new PasswordValidator(3, 5, 30);
console.log(passwordValidator.getMessages());

{
  length: "Must be at least 5 characters long",
  lowercaseLetters: "Must contain at least 1 lowercase letter",
  uppercaseLetters: "Must contain at least 1 uppercase letter",
}

Password Input

Usage

This UI component make is so that you can change the visibility of the input text. The most basic usage is as follows:

import { PasswordInput } from "react-pwd-validator"

const MyForm = () => {
  return (
    <PasswordInput placeholder="Password" />
  )
}

You able to change the eye icons by passing them into the component as props

// Icons.tsx
import React from "react";

export const Eye = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg {...props}>
      <path />
    </svg>
  );
};

export const EyeSlash = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg {...props}>
      <path />
    </svg>
  );
};

import { PasswordInput } from "react-pwd-validator"
import { Eye, EyeSlash } from "./Icons"


const MyForm = () => {
  return (
    <PasswordInput placeholder="Password" eyeIcon={Eye} eyeSlashIcon={EyeSlash}/>
  )
}

usePasswordValidator Hook

This hooks is useful to manage the validatation state of a password. It is best used in combination with the PasswordValidationMessages UI component. The hook returns an object contaning a PasswordValidation object and a PasswordMessages object. You can pass in the same options as the PassordValidator class.

function usePasswordValidator(password: string, passwordStrength?: number | undefined, minLength?: number | undefined, maxLength?: number | undefined): {
    passwordValidation: PasswordValidation;
    messages: PasswordMessages;
}

Usage

import { useState } from "react";
import {
  PasswordInput,
  usePasswordValidator,
} from "react-pwd-validator";

function App() {
  const [password, setPassword] = useState("");
  const passwordValidationStatus = usePasswordValidator(password);
  
  return (
    <div>
      <PasswordInput
        placeholder="Password"
        onChange={(e) => setPassword(e.target.value)}
      />
      {passwordValidationStatus.passwordValidation.validated ?
        // Something if password is validated
        :
        // Something if password is invalid
      }
    </div>
  )
}

PasswordValidationMessages

This UI components renders all of the password messages along with their current state.

Example:

import {
  PasswordValidationMessages
  usePasswordValidator,
} from "react-pwd-validator";

function App() {
  const password = "Test"
  const passwordValidationStatus = usePasswordValidator(password);
  
  return (
    <div>
      <PasswordValidationMessages
        passwordValidationStatus={passwordValidationStatus}
      />
    </div>
  )
}

Example of using everything together

import React, { useState, useEffect } from "react";
import {
  PasswordInput,
  PasswordValidationMessages,
  usePasswordValidator,
} from "react-password-validator";

function App() {
  const [password, setPassword] = useState("");
  const [isFocused, toggleFocus] = useState(false);
  const passwordValidationStatus = usePasswordValidator(password);
  useEffect(() => {
    console.log(passwordValidationStatus.messages);
  }, [password]);
  return (
    <div className="App" style={{ display: "grid", placeItems: "center" }}>
      <div
        className="container"
        style={{ display: "flex", flexDirection: "column" }}
      >
        <PasswordInput
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
          onFocus={() => toggleFocus(true)}
          onBlur={() => toggleFocus(false)}
        />
        {(password.length > 0 || isFocused) && (
          <PasswordValidationMessages
            passwordValidationStatus={passwordValidationStatus}
          />
        )}
        {passwordValidationStatus.passwordValidation.validated ? (
          <div className="is-valid valid">Valid</div>
        ) : (
          <div className="is-valid invalid">Invalid</div>
        )}
      </div>
    </div>
  );
}