Scaffold Pwned Passwords clone: React/wouter frontend, Koa/pg backend, import CLI
- Backend: Koa + @koa/router serving the HIBP-style /range/:prefix k-anonymity API, backed by Postgres via pg, with migrate/seed scripts run through tsx. - Frontend: React + wouter, bundled with webpack (dev server + prod build), thin client that hashes passwords locally and only sends the hash prefix. - Import package: CLI to bulk-load a wordlist or hash list into the database, plus a separate script to pull the full dataset from the HIBP range API. Both support parallelism (worker threads for wordlist hashing, concurrency limiter for DB/HTTP fan-out). - Dev tooling: docker compose for a local Postgres, .env.local/.env.example, DATABASE_URL support as an alternative to discrete PG* vars.
This commit is contained in:
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "webpack serve --config webpack.config.js --mode development",
|
||||
"build": "webpack --config webpack.config.js --mode production",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7",
|
||||
"wouter": "^3.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"html-webpack-plugin": "^5.6.7",
|
||||
"ts-loader": "^9.6.2",
|
||||
"typescript": "^6.0.3",
|
||||
"webpack": "^5.108.3",
|
||||
"webpack-cli": "^7.1.0",
|
||||
"webpack-dev-server": "^5.2.5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Pwned Passwords</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Link } from "wouter";
|
||||
|
||||
export function AboutPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1>About</h1>
|
||||
<p>
|
||||
This is a small clone of the{" "}
|
||||
<a href="https://haveibeenpwned.com/API/v3#PwnedPasswords" target="_blank" rel="noreferrer">
|
||||
HaveIBeenPwned Pwned Passwords API
|
||||
</a>
|
||||
, built for local development and testing.
|
||||
</p>
|
||||
<Link href="/">Back to checker</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Link, Route, Switch } from "wouter";
|
||||
import { CheckerPage } from "./CheckerPage";
|
||||
import { AboutPage } from "./AboutPage";
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<div>
|
||||
<nav>
|
||||
<Link href="/">Checker</Link> | <Link href="/about">About</Link>
|
||||
</nav>
|
||||
<Switch>
|
||||
<Route path="/" component={CheckerPage} />
|
||||
<Route path="/about" component={AboutPage} />
|
||||
<Route>404 - not found</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { useState } from "react";
|
||||
import { checkPassword, type PwnedResult } from "./api";
|
||||
|
||||
export function CheckerPage() {
|
||||
const [password, setPassword] = useState("");
|
||||
const [result, setResult] = useState<PwnedResult | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleSubmit(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
try {
|
||||
setResult(await checkPassword(password));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Pwned Passwords checker</h1>
|
||||
<p>Your password never leaves the browser: only the first 5 characters of its SHA-1 hash are sent to the server.</p>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
placeholder="Enter a password to check"
|
||||
/>
|
||||
<button type="submit" disabled={loading || password.length === 0}>
|
||||
{loading ? "Checking..." : "Check"}
|
||||
</button>
|
||||
</form>
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
{result && result.pwned && (
|
||||
<p style={{ color: "red" }}>
|
||||
This password has been seen {result.count.toLocaleString()} times in data breaches.
|
||||
</p>
|
||||
)}
|
||||
{result && !result.pwned && <p style={{ color: "green" }}>This password was not found in the dataset.</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
export interface PwnedResult {
|
||||
pwned: boolean;
|
||||
count: number;
|
||||
}
|
||||
|
||||
async function sha1(value: string): Promise<string> {
|
||||
const bytes = new TextEncoder().encode(value);
|
||||
const digest = await crypto.subtle.digest("SHA-1", bytes);
|
||||
return Array.from(new Uint8Array(digest))
|
||||
.map((byte) => byte.toString(16).padStart(2, "0"))
|
||||
.join("")
|
||||
.toUpperCase();
|
||||
}
|
||||
|
||||
// Implements the k-anonymity model used by HaveIBeenPwned: only the first 5
|
||||
// characters of the password hash are ever sent to the server.
|
||||
export async function checkPassword(password: string): Promise<PwnedResult> {
|
||||
const hash = await sha1(password);
|
||||
const prefix = hash.slice(0, 5);
|
||||
const suffix = hash.slice(5);
|
||||
|
||||
const response = await fetch(`/range/${prefix}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`range request failed: ${response.status}`);
|
||||
}
|
||||
|
||||
const body = await response.text();
|
||||
for (const line of body.split(/\r?\n/)) {
|
||||
if (!line) continue;
|
||||
const [lineSuffix, count] = line.split(":");
|
||||
if (lineSuffix === suffix) {
|
||||
return { pwned: true, count: Number(count) };
|
||||
}
|
||||
}
|
||||
|
||||
return { pwned: false, count: 0 };
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { App } from "./App";
|
||||
|
||||
const container = document.getElementById("root");
|
||||
if (!container) {
|
||||
throw new Error("missing #root element");
|
||||
}
|
||||
|
||||
createRoot(container).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
const path = require("node:path");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
|
||||
const backendPort = process.env.BACKEND_PORT || 3001;
|
||||
const frontendPort = process.env.FRONTEND_PORT || 3000;
|
||||
|
||||
module.exports = (_env, argv) => {
|
||||
const isDev = argv.mode !== "production";
|
||||
|
||||
return {
|
||||
entry: "./src/index.tsx",
|
||||
devtool: isDev ? "eval-source-map" : "source-map",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "bundle.[contenthash].js",
|
||||
clean: true,
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".tsx", ".ts", ".js"],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: "ts-loader",
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "./public/index.html",
|
||||
}),
|
||||
],
|
||||
devServer: {
|
||||
port: frontendPort,
|
||||
historyApiFallback: true,
|
||||
hot: true,
|
||||
proxy: [
|
||||
{
|
||||
context: ["/range"],
|
||||
target: `http://localhost:${backendPort}`,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user