Package Exports

react-protected-app
react-protected-app/dist/index.js

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-protected-app) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-app-protect

Protect your react application with simple Username and Password prompt (not a replacement for basic auth), which looks like htpassword from Apache server.

Uses base64 to encrypt the password.

Stores the encrypted credentials in the localStorage.

Checks if the stored credentials is valid against generated credentials.

Usage

1. Install

npm install --save react-protected-app
yarn add react-protected-app

2. Wrap Root Component

import React from "react";
import { Router, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Protected from "react-protected-app";

function App() {
  return (
    <Protected>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </Router>
    </Protected>
  );
}

export default App;

3. Generate Protected Credentials

Run following command to generate encrypted credentials:

$ protect-credential <username-to-set>
Your credential: <encrypted-username>

$ protect-credential <password-to-set>
Your credential: <encrypted-password>

4. Set Protected Credentials

Set following environment variables with your protected credentials:

PROTECTED_USERNAME="<encrypted-username>"
PROTECTED_PASSWORD="<encrypted-password>"

5. Start your application server

Logo

react-protected-app