0.1.3 • Published 5 years ago
react-password-gate v0.1.3
react-password-gate
react-password-gate is a quick and dirty solution to add basic-auth like password protection to your react project.
Installation
npm install react-password-gate
Usage
Update your main render to wrap your app with the PasswordGate
component :
import PasswordGate from "react-password-gate";
const accessList = [
"test:$2a$10$A/1QDqi8DeNBeavrPXKSUOoNWDd75Qp0CwxoRGVZ3/nJQeT1vs9kO",
"user1:$2a$10$xF9XbrsoNhT8m37Y6DkwteçkgHlpT6m6zbY5e9yNg1fzPicqVn1ntG"
];
ReactDOM.render(
<PasswordGate accessList={accessList}>
<App />
</PasswordGate>,
document.getElementById("root")
);
accessList
is a .htpasswd
syntax compliant array of credentials.
Each line follows this syntax : {username}:{bcryptPasswordHash}
When not authenticated, it renders the following form :
The Good :thumbsup:
Super easy to use
No need to get access to the web server to enable basic authentication.
No database needed
The Bad :thumbsdown:
Security level : meh/10.
All password hash are public and your credentials will be stored in cleartext on local storage.
Todo
- Handle bad credentials
- Pass a custom form component as props