@createnl/secure-password-input

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 with CSS variables

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
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 (See 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
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 native CSS variables, so it's easy to update the values that are available, within just one CSS rule.

/*
  Custom class of the Secure Password Input (SPI)
  Shown values are used as defaults, if no custom styling is given 
*/

.custom-class-name {  
  --SPI-theme-color-primary: red;  
  --SPI-theme-color-white: white;  
  --SPI-theme-color-black: black;  
  
  --SPI-font-family: system-ui, sans-serif;  
  --SPI-font-size: 1rem;  
  
  --SPI-label-margin: 0 0 .625rem;  
  --SPI-label-font-size: inherit;  
  --SPI-label-font-weight: bold;  
  
  --SPI-input-width: 100%;  
  --SPI-input-height: auto;  
  --SPI-input-margin: 0;  
  --SPI-input-padding: .5rem;  
  --SPI-input-border-radius: 0;
  --SPI-input-border: 1px solid var(--SPI-theme-color-black);  
  --SPI-input-background-color: transparent;  
  
  --SPI-visibility-button-padding: .5rem;  
  --SPI-visibility-button-color: var(--SPI-theme-color-white);  
  --SPI-visibility-button-border: 1px solid var(--SPI-theme-color-black);  
  --SPI-visibility-button-background-color: var(--SPI-theme-color-primary);  
  
  --SPI-visibility-icon-size: 1rem;  
  
  --SPI-advice-link-margin: .625rem 0 0;
  --SPI-advice-link-font-size: inherit;
  --SPI-advice-link-color: var(--SPI-theme-color-primary);
  
  --SPI-strength-label-margin: .625rem 0 0;  
  --SPI-strength-label-font-size: inherit;  
  
  --SPI-strength-meter-width: 100%;  
  --SPI-strength-meter-height: .5rem;  
  --SPI-strength-meter-margin: .625rem 0 0;  
  --SPI-strength-meter-background-color: var(--SPI-theme-color-black);  
  
  --SPI-strength-meter-color-weak: #ff0018;  
  --SPI-strength-meter-color-soso: #ff6800;  
  --SPI-strength-meter-color-good: #ffe800;  
  --SPI-strength-meter-color-strong: #00ff68;  
  
  --SPI-warning-margin: .625rem 0 0;  
  --SPI-warning-font-size: inherit;  
  
  --SPI-suggestion-list-margin: .625rem 0 0;  
  --SPI-suggestion-list-padding: 0 0 0 1rem;  
  
  --SPI-suggestion-margin: .5rem 0 0;  
  --SPI-suggestion-font-size: inherit;  
}

Browser compatibility

Not tested yet! Modern browsers should work