Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@enzoic/enzoic-react-native-password-strength

Package Overview
Dependencies
3
Maintainers
1
Versions
8
Issues
File Explorer

Advanced tools

@enzoic/enzoic-react-native-password-strength

Enzoic password strength meter control for use in React Native projects

    3.2.0latest

Version published
Maintainers
1
Yearly downloads
3,822
decreased by-55.04%

Weekly downloads

Changelog

Source

v3.2.0

  • Add tooltipPlacement prop to allow setting position of tooltip in cases where field is near top/bottom/left/right of screen.
  • Tweak the strength bubble to remove it from rendering when it has no content so that the entire input is clickable in a blank state.
  • Autosize the width of the portion of the field reserved for the strength bubble to provide as much space as possible for the input data.

Readme

Source

Enzoic React Native Password Strength Meter

The Enzoic React Native Password Strength Meter replaces existing password strength meters for signup and password change forms. It not only provides a typical, algorithmic strength estimation, based on the zxcvbn library, but also verifies that the password is not known to be compromised by checking it against Enzoic's Passwords API.

The password strength meter is free to use for up to 100,000 requests per month against the Enzoic API. After that, the meter will fallback to zxcvbn checks only. If you need more requests than that, you can contact us at https://enzoic.com/contact-us

Install in your project

npm install --save enzoic-react-native-password-strength

Note: react/react-native is a peer dependency. You should be using this in a React Native project.

Using the tool

<Enzoic style={{ display: 'none' }} minLength={5} minScore={2} changeCallback={onchange} />

Importing

If using ES6 imports: import Enzoic from 'enzoic-react-native-password-strength';

Using CommonJS require: var ReactPasswordStrength = require('enzoic-react-native-password-strength');

Props

changeCallback

  • Callback after input has changed (and score was recomputed)
  • React Native Password Strength passes two objects to the callback function:
    • current app state (score, password, isValid)
    • full result produced by zxcvbn including feedback (see docs for more properties)

defaultValue

  • A default value to set for the password field. If a non-empty string is provided the changeCallback will be called in componentDidMount.

hidePasswordIconOverride

  • By default the component will use a dark gray eye image for the hide plaintext password icon. This allows you to pass in an element to override it. For example, you may pass in an Icon from the iconset you are using or an alternate Image. You will need to size it appropriately (45x45).

highlightStrengthBubble

  • When true, pulses the strength bubble whenever it is clickable to better call attention to it from the user. CLicking the strength bubble provides more information when a password is weak or compromised.

inputComponent

  • Optionally provide a different input component than the React Native default TextInput to use.

inputProps

  • Additional props to apply to the input element.

inputStyles

  • Style object for the input element.

insertedElements

  • Additional elements to be inserted inside the wrapper element.

language

  • An ISO 639-1 language code for which language to display strings in. Currently supported: English (en), French (fr), Spanish (es), German (de), Portuguese (pt), and Italian (it).

minLength (Default: 8)

  • Minimum password length acceptable for password to be considered valid

minScore (Default: 4)

  • Minimum score acceptable for password to be considered valid
  • Scale from 0 - 5. The score values are as follows:
    • 0: Hacked indicates the password is known by Enzoic to be compromised
    • 1: Very Weak - equivalent to zxcvbn score of 0
    • 2: Weak - equivalent to zxcvbn score of 1
    • 3: Medium - equivalent to zxcvbn score of 2
    • 4: Strong - equivalent to zxcvbn score of 3
    • 5: Very Strong - equivalent to zxcvbn score of 4
  • See zxcvbn docs for explanations of scores
  • Scores of 0-3 will have a hover popup available indicating reasons for the score and suggestions to improve it.
  • Scores 4-5 (Strong, Very Strong) will not have a popup value

scoreContainerOffset

  • By default the score container (e.g. Strong, Weak, etc.) is vertically centered in the input element. You can provide a positive or negative offset value to move it up or down.

scoreWords (Default: ['Hacked', 'Very Weak', 'Weak', 'Medium', 'Strong', 'Very Strong'])

  • An array denoting the words used to describe respective score values in the UI

showPasswordIconOverride

  • By default the component will use a dark gray eye image for the show plaintext password icon. This allows you to pass in an element to override it. For example, you may pass in an Icon from the iconset you are using or an alternate Image. You will need to size it appropriately (45x45).

style

  • Style object to customize container

tooltipPlacement

  • Controls where the strength tooltip shows when the strength bubble is touched for more information. Possible values: "top", "bottom", "right", "left". Defaults to "top".

tooShortWord (Default: 'Too Short')

  • A string to describe when password is too short (based on minLength prop).

userInputs

  • An array of strings that zxcvbn will treat as an extra dictionary. You can add your product name, company name into this list to prevent these from being used as part of user passwords.

wrapperElement

  • Optionally provide a wrapper component to use around the input field (default is View).

wrapperElementProps

  • Props object for the wrapper element.

Acknowledgements

This library is based heavily on the react-password-strength library by Mateusz Wijas and the zxcvbn library by Dropbox.

Keywords

FAQs

What is @enzoic&#x2F;enzoic-react-native-password-strength?

Enzoic password strength meter control for use in React Native projects

Is @enzoic&#x2F;enzoic-react-native-password-strength popular?

The npm package @enzoic&#x2F;enzoic-react-native-password-strength receives a total of 21 weekly downloads. As such, @enzoic&#x2F;enzoic-react-native-password-strength popularity was classified as not popular.

Is @enzoic&#x2F;enzoic-react-native-password-strength well maintained?

We found that @enzoic&#x2F;enzoic-react-native-password-strength demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 05 May 2021
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc