Package Exports

react-password-gate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-password-gate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 :

"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