Create — Secure Password Input

This package features a React component of a password input. Not just any password input, but a secure one.

How is that possible? We implemented the nifty open source ZXCVBN password strength estimation package from Dropbox. This package features several algorithms in order to provide the user with very detailed feedback about the strength of the password they want to register, for any given project.

Features

• Easy to install and use

• TypeScript support

• Works with user's password manager

• Comes with a 'Reveal password' button

• Option to render a link to an external document, for extra password-related advice

• Extends normal HTML input element, adding some customization

• Provide user with a rating of their password between 0 and 4

• Callback on input; provides callback with password and score

• Custom styling support

Installation

npm

npm install @createnl/secure-password-input

yarn

yarn add @createnl/secure-password-input

Usage

import React from 'react';
import SecurePasswordInput from '@createnl/secure-password-input';  
  
const ExampleComponent = () => {
  const handleChange = (value, isValid) => {
    console.log('Password:', value);
    console.log('Is valid:', isValid);
  };

  return (
    <SecurePasswordInput
      label="Secure password input"
      adviceLinkText="Read our password advice"
      adviceLinkURL="https://create.nl/wachtwoord-advies"
      onChange={handleChange}
      className="custom-class-name"
    />
  );
};  
  
export default ExampleComponent;  

Props

| Prop | Type | Default | Description | - | - | - | - | | onChange (required) | (value: string, isValid: boolean) => void | - | Event handler that fires on every input. Provides given function with password value of input and whether the password value meets the given minimumScore | label (required) | String | - | Text to contextualize the input, and provide it with a clickable label | ref | RefObject | - | Optional React ref for the HTML input element | hideLabel | Boolean | false | Hides the label element, though it preserves the component's accessibility | minimumLength | Number | 8 | Set the minimum length requirement of the password input | minimumScore | 0 | 1 | 2 | 3 | 4 | 2 | Set the minimum score requirement of the password input (Score table) | adviceLinkText | String | - | Optional text where you could direct the user to an external document with password advice (only renders if there is also a URL given within the adviceLinkURL prop) | adviceLinkURL | String | - | Link that navigates to desired external URL (only works if the adviceLinkText has content) | disabled | Boolean | false | Determine if the input, and it's interactive child elements, are disabled | tabIndex | -1 | 0 | 0 | Determine if the input, and it's interactive child elements, are reachable with keyboard navigation | className | String | - | Add a custom CSS class, this functions as the parent class (Custom styling usage) | HTML defaults | - | - | Default attributes of the HTML input element, that are not featured in this table

Score table

The value of the password input will be rated with a score between 0 and 4. The higher the score, the better. Low scores are given to passwords that are either very common, or easy to guess.

| Score | Value | - | - | 0 | Very weak | 1 | Weak | 2 | So-so | 3 | Good | 4 | Strong

Custom styling

Want to add your own styling to the password input? It makes use of some native CSS variables, so it's easy to update multiple values at once. Other CSS can be added via dedicated selectors for specific elements.

/*
  Custom CSS of the Secure Password Input (SPI)
  Shown values are CSS-variables which you can change to your liking

  Note: The name of the parent class is customizable, though the child classes retain their 'custom-spi' prefix.
*/

.custom-spi {
  --SPI-color-primary: red;

  --SPI-color-strength-weak: #ff0018;
  --SPI-color-strength-soso: #ff6800;
  --SPI-color-strength-good: #ffe800;
  --SPI-color-strength-strong: #00ff68;
  --SPI-color-strength-back: transparent;
}

.custom-spi .custom-spi__label {
  /* Custom styles for the input label */
}

.custom-spi .custom-spi__input {
  /* Custom styles for the password input */
}

.custom-spi .custom-spi__button {
  /* Custom styles for the reveal/hide password button */
}

.custom-spi .custom-spi__button-icon {
  /* Custom styles for the reveal/hide password button icon */
}

.custom-spi .custom-spi__advice-link {
  /* Custom styles for the advice link */
}

.custom-spi .custom-spi__strength-label {
  /* Custom styles for the strength indicator text */
}

.custom-spi .custom-spi__strength-meter {
  /* Custom styles for the strength indicator meter */
}

.custom-spi .custom-spi__warning {
  /* Custom styles for the warning text */
}

.custom-spi .custom-spi__suggestion-list {
  /* Custom styles for the suggestion list */
}

.custom-spi .custom-spi__suggestion {
  /* Custom styles for the suggestion text */
}

Browser compatibility

Not tested yet! Modern browsers should work