https://github.com/ascorbic/use-pwned-passwords
React custom hook to check passwords against the HaveIBeenPwned API
https://github.com/ascorbic/use-pwned-passwords
Last synced: 7 days ago
JSON representation
React custom hook to check passwords against the HaveIBeenPwned API
- Host: GitHub
- URL: https://github.com/ascorbic/use-pwned-passwords
- Owner: ascorbic
- Created: 2019-05-29T13:27:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T22:56:31.000Z (about 3 years ago)
- Last Synced: 2025-08-19T01:41:46.368Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.29 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## usePwnedPasswords custom hook
This is a custom React hook that adds support for checking password fields against Troy Hunt's Have I Been Pwned [passwords API](https://haveibeenpwned.com/Passwords). Uses the [hibp module](https://github.com/wKovacs64/hibp) for the heavy lifting.
### Usage
```jsx
import { usePwnedPasswords } from "use-pwned-passwords";
export const App = () => {
const [passwordValue, pwnedCount, fieldProps] = usePwnedPasswords();
return (
{pwnedCount ? (
Your password has been found in {pwnedCount} breaches.
Please choose a more secure one.
) : null}
Enter your password:
);
};
```
The password is checked onBlur. The `usePwnedPasswords()` function can optionally take a config object. Currently there is one option you can set: `defaultValue` which sets the default value of the password field, but I'm not sure why you would set that.
### Demo
[Open demo](https://use-pwned-passwords.netlify.com/).
To run locally, run `yarn demo`