Skip to content
Basic-Auth like react component
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src
src
tests
.gitignore
.travis.yml
CONTRIBUTING.md
README.md
nwb.config.js
package-lock.json
package.json
screenshot.png

README.md

react-password-gate

npm package

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 :

"Screenshot"

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
You can’t perform that action at this time.