react-have-i-been-pwned
v1.1.2
Published
Have I been pwned? react registration component
Downloads
68
Readme
React Have I Been Pwned?
React component which validates a password on the client side by the Have I Been Pwned API by Troy Hunt.
Features
- Use your own styles
- Adjust the entire look by using the render prop
- Increase the security by informing the users of their unsecure passwords
- Lightweight implementation using the Fetch API
Example
There is also an interactive example available on codesandbox.
<HIBPPasswordChecker password={this.state.password}>
{({ initial, loading, error, pwned, count }) => {
if (initial) return null;
if (loading) return 'Checking the Security of this password...';
if (error) return `error: ${error}`;
if (!pwned)
return (
<>
This password is safe to use and appeared in no known data
breaches.{' '}
<a
href="https://haveibeenpwned.com/FAQs#DataSource"
rel="noopener noreferrer"
target="_blank"
>
Learn more
</a>
.
</>
);
if (pwned)
return (
<>
<strong>This password isn't safe to use</strong> and
appeared in {count.toLocaleString()} data breaches. You can still use it, but
you probably shouldn't.{' '}
<a
href="https://haveibeenpwned.com/FAQs#DataSource"
rel="noopener noreferrer"
target="_blank"
>
Learn more
</a>
.
</>
);
}}
</HIBPPasswordChecker>