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 :
; const accessList = "test:$2a$10$A/1QDqi8DeNBeavrPXKSUOoNWDd75Qp0CwxoRGVZ3/nJQeT1vs9kO" "user1:$2a$10$xF9XbrsoNhT8m37Y6DkwteçkgHlpT6m6zbY5e9yNg1fzPicqVn1ntG"; ReactDOM;
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 👍
Super easy to use
No need to get access to the web server to enable basic authentication.
No database needed
The Bad 👎
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