Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

password validation meter

Browse Source
This commit is contained in:
Michael Freno
2026-01-01 14:51:23 -05:00
parent 658cf98b7b
commit 0fb071a5d7
6 changed files with 271 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/components/PasswordStrengthMeter.tsx Normal file
View File

@@ -0,0 +1,151 @@
import { createMemo, For, Show } from "solid-js";
import { validatePassword, type PasswordStrength } from "~/lib/validation";
import { VALIDATION_CONFIG } from "~/config";
import CheckCircle from "./icons/CheckCircle";
interface PasswordStrengthMeterProps {
password: string;
showRequirements?: boolean;
}
interface Requirement {
label: string;
test: (password: string) => boolean;
optional?: boolean;
}
export default function PasswordStrengthMeter(
props: PasswordStrengthMeterProps
) {
const validation = createMemo(() => validatePassword(props.password));
const strengthConfig = {
weak: {
color: "bg-red",
textColor: "text-red",
label: "Weak",
width: "25%"
},
fair: {
color: "bg-yellow",
textColor: "text-yellow",
label: "Fair",
width: "50%"
},
good: {
color: "bg-blue",
textColor: "text-blue",
label: "Good",
width: "75%"
},
strong: {
color: "bg-green",
textColor: "text-green",
label: "Strong",
width: "100%"
}
};
const requirements = createMemo(() => {
const reqs: Requirement[] = [
{
label: `At least ${VALIDATION_CONFIG.MIN_PASSWORD_LENGTH} characters`,
test: (pwd) => pwd.length >= VALIDATION_CONFIG.MIN_PASSWORD_LENGTH
}
];
if (VALIDATION_CONFIG.PASSWORD_REQUIRE_UPPERCASE) {
reqs.push({
label: "One uppercase letter",
test: (pwd) => /[A-Z]/.test(pwd)
});
}
if (VALIDATION_CONFIG.PASSWORD_REQUIRE_NUMBER) {
reqs.push({
label: "One number",
test: (pwd) => /[0-9]/.test(pwd)
});
}
// Always show special character as optional/recommended
reqs.push({
label: "One special character\n(recommended)",
test: (pwd) => /[^A-Za-z0-9]/.test(pwd),
optional: true
});
return reqs;
});
const strength = createMemo(() => validation().strength);
const config = createMemo(() => strengthConfig[strength()]);
return (
<div class="w-3/4 space-y-2">
{/* Strength bar */}
<Show when={props.password.length > 0}>
<div class="space-y-1">
<div class="bg-surface h-2 w-full overflow-hidden rounded-full">
<div
class={`${config().color} h-full transition-all duration-300 ease-out`}
style={{ width: config().width }}
/>
</div>
<div class="flex justify-between text-xs">
<span class={config().textColor}>{config().label}</span>
<Show when={validation().isValid}>
<span class="text-green flex items-center gap-1">
<CheckCircle height={14} width={14} />
Valid
</span>
</Show>
</div>
</div>
</Show>
{/* Requirements checklist */}
<Show when={props.showRequirements !== false}>
<div class="space-y-1 text-sm">
<div class="text-subtext1 text-xs font-medium">
Password Requirements:
</div>
<For each={requirements()}>
{(req) => {
const isMet = createMemo(() => req.test(props.password));
return (
<div
class={`flex items-center gap-2 transition-colors ${
isMet()
? "text-green"
: req.optional
? "text-blue opacity-70"
: props.password.length > 0
? "text-red"
: "text-subtext0"
}`}
>
<Show
when={isMet()}
fallback={
<div
class={`h-4 w-4 rounded-full border-2 ${
req.optional
? "border-blue border-dashed"
: "border-subtext0"
}`}
/>
}
>
<CheckCircle height={16} width={16} />
</Show>
<span class="max-w-3/4">{req.label}</span>
</div>
);
}}
</For>
</div>
</Show>
</div>
);
}

10
src/config.ts
View File

@@ -18,6 +18,10 @@ export const AUTH_CONFIG = {
REMEMBER_ME_MAX_AGE: 60 * 60 * 24 * 14, // 14 days
/** CSRF token cookie max age in seconds (14 days) */
CSRF_TOKEN_MAX_AGE: 60 * 60 * 24 * 14, // 14 days
/** Email login link JWT expiration (15 minutes - provides reasonable time to check email without being too permissive) */
EMAIL_LOGIN_LINK_EXPIRY: "15m" as const,
/** Email verification link JWT expiration (15 minutes) */
EMAIL_VERIFICATION_LINK_EXPIRY: "15m" as const,
/** Lineage JWT expiration for mobile game */
LINEAGE_JWT_EXPIRY: "14d" as const
} as const;
@@ -232,6 +236,12 @@ export const ERROR_PAGE_CONFIG = {
export const VALIDATION_CONFIG = {
/** Minimum password length (must match securePasswordSchema in schemas/user.ts) */
MIN_PASSWORD_LENGTH: 8,
/** Require at least one uppercase letter in password */
PASSWORD_REQUIRE_UPPERCASE: true,
/** Require at least one number in password */
PASSWORD_REQUIRE_NUMBER: true,
/** Require at least one special character in password (false = optional but recommended) */
PASSWORD_REQUIRE_SPECIAL: false,
/** Maximum message length for contact form */
MAX_CONTACT_MESSAGE_LENGTH: 500,
/** Minimum password confirmation match length before showing error */

24
src/lib/validation.ts
View File

@@ -45,30 +45,34 @@ export function validatePassword(password: string): {
);
}
// Require uppercase letter
if (!/[A-Z]/.test(password)) {
// Require uppercase letter (if configured)
if (VALIDATION_CONFIG.PASSWORD_REQUIRE_UPPERCASE && !/[A-Z]/.test(password)) {
errors.push("Password must contain at least one uppercase letter");
}
// Require lowercase letter
// Require lowercase letter (always required for balanced security)
if (!/[a-z]/.test(password)) {
errors.push("Password must contain at least one lowercase letter");
}
// Require number
if (!/[0-9]/.test(password)) {
// Require number (if configured)
if (VALIDATION_CONFIG.PASSWORD_REQUIRE_NUMBER && !/[0-9]/.test(password)) {
errors.push("Password must contain at least one number");
}
// Require special character
if (!/[^A-Za-z0-9]/.test(password)) {
// Require special character (if configured)
if (
VALIDATION_CONFIG.PASSWORD_REQUIRE_SPECIAL &&
!/[^A-Za-z0-9]/.test(password)
) {
errors.push("Password must contain at least one special character");
}
// Check for common weak passwords
const commonPasswords = [
"password",
"12345678",
"1234",
"5678",
"qwerty",
"letmein",
"welcome",
@@ -93,9 +97,9 @@ export function validatePassword(password: string): {
let strength: PasswordStrength = "weak";
if (errors.length === 0) {
if (password.length >= 20) {
if (password.length >= 16) {
strength = "strong";
} else if (password.length >= 16) {
} else if (password.length >= 12) {
strength = "good";
} else if (password.length >= VALIDATION_CONFIG.MIN_PASSWORD_LENGTH) {
strength = "fair";

70
src/routes/login/index.tsx
View File

@@ -13,6 +13,7 @@ import GitHub from "~/components/icons/GitHub";
import Eye from "~/components/icons/Eye";
import EyeSlash from "~/components/icons/EyeSlash";
import CountdownCircleTimer from "~/components/CountdownCircleTimer";
import PasswordStrengthMeter from "~/components/PasswordStrengthMeter";
import { isValidEmail, validatePassword } from "~/lib/validation";
import { getClientCookie } from "~/lib/cookies.client";
import { env } from "~/env/client";
@@ -52,11 +53,8 @@ export default function LoginPage() {
const [showPasswordInput, setShowPasswordInput] = createSignal(false);
const [showPasswordConfInput, setShowPasswordConfInput] = createSignal(false);
const [passwordsMatch, setPasswordsMatch] = createSignal(false);
const [showPasswordLengthWarning, setShowPasswordLengthWarning] =
createSignal(false);
const [passwordLengthSufficient, setPasswordLengthSufficient] =
createSignal(false);
const [passwordBlurred, setPasswordBlurred] = createSignal(false);
const [password, setPassword] = createSignal("");
const [passwordConf, setPasswordConf] = createSignal("");
let emailRef: HTMLInputElement | undefined;
let passwordRef: HTMLInputElement | undefined;
@@ -325,43 +323,15 @@ export default function LoginPage() {
setPasswordsMatch(newPassword === newPasswordConf);
};
const checkPasswordLength = (password: string) => {
if (password.length >= VALIDATION_CONFIG.MIN_PASSWORD_LENGTH) {
setPasswordLengthSufficient(true);
setShowPasswordLengthWarning(false);
} else {
setPasswordLengthSufficient(false);
if (passwordBlurred()) {
setShowPasswordLengthWarning(true);
}
}
};
const passwordLengthBlurCheck = () => {
if (
!passwordLengthSufficient() &&
passwordRef &&
passwordRef.value !== ""
) {
setShowPasswordLengthWarning(true);
}
setPasswordBlurred(true);
};
const handleNewPasswordChange = (e: Event) => {
const target = e.target as HTMLInputElement;
checkPasswordLength(target.value);
const handlePasswordChange = (e: Event) => {
const target = e.currentTarget as HTMLInputElement;
setPassword(target.value);
};
const handlePasswordConfChange = (e: Event) => {
const target = e.target as HTMLInputElement;
if (passwordRef) {
checkForMatch(passwordRef.value, target.value);
}
};
const handlePasswordBlur = () => {
passwordLengthBlurCheck();
const target = e.currentTarget as HTMLInputElement;
setPasswordConf(target.value);
checkForMatch(password(), target.value);
};
return (
@@ -477,8 +447,7 @@ export default function LoginPage() {
required
minLength={8}
ref={passwordRef}
onInput={register() ? handleNewPasswordChange : undefined}
onBlur={register() ? handlePasswordBlur : undefined}
onInput={register() ? handlePasswordChange : undefined}
placeholder=" "
title="Password must be at least 8 characters"
class="underlinedInput bg-transparent"
@@ -514,18 +483,18 @@ export default function LoginPage() {
</Show>
</button>
</div>
<div
class={`${
showPasswordLengthWarning() ? "" : "opacity-0 select-none"
} text-red text-center transition-opacity duration-200 ease-in-out`}
>
Password too short! Min Length: 8
</Show>
{/* Password strength meter - shown only for registration */}
<Show when={register()}>
<div class="mx-auto flex justify-center px-4 py-2">
<PasswordStrengthMeter password={password()} />
</div>
</Show>
{/* Password confirmation - shown only for registration */}
<Show when={register()}>
<div class="-mt-4 flex justify-center">
<div class="flex justify-center">
<div class="input-group mx-4">
<input
type={showPasswordConfInput() ? "text" : "password"}
@@ -571,9 +540,8 @@ export default function LoginPage() {
<div
class={`${
!passwordsMatch() &&
passwordLengthSufficient() &&
passwordConfRef &&
passwordConfRef.value.length >= 6
passwordConf().length >=
VALIDATION_CONFIG.MIN_PASSWORD_CONF_LENGTH_FOR_ERROR
? ""
: "opacity-0 select-none"
} text-red text-center transition-opacity duration-200 ease-in-out`}

4
src/server/api/routers/auth.ts
View File

@@ -1071,7 +1071,7 @@ export const authRouter = createTRPCRouter({
rememberMe: rememberMe ?? false
})
.setProtectedHeader({ alg: "HS256" })
.setExpirationTime("15m")
.setExpirationTime(AUTH_CONFIG.EMAIL_LOGIN_LINK_EXPIRY)
.sign(secret);
const domain = env.VITE_DOMAIN || "https://freno.me";
@@ -1453,7 +1453,7 @@ export const authRouter = createTRPCRouter({
const secret = new TextEncoder().encode(env.JWT_SECRET_KEY);
const token = await new SignJWT({ email })
.setProtectedHeader({ alg: "HS256" })
.setExpirationTime("15m")
.setExpirationTime(AUTH_CONFIG.EMAIL_VERIFICATION_LINK_EXPIRY)
.sign(secret);
const domain = env.VITE_DOMAIN || "https://freno.me";

112
src/server/security.ts
View File

@@ -198,28 +198,34 @@ interface RateLimitRecord {
resetAt: number;
}
/**
* In-memory rate limit store
* In production, consider using Redis for distributed rate limiting
*/
const rateLimitStore = new Map<string, RateLimitRecord>();
/**
* Clear rate limit store (for testing only)
* Clears all rate limit records from the database
*/
export function clearRateLimitStore(): void {
rateLimitStore.clear();
export async function clearRateLimitStore(): Promise<void> {
const { ConnectionFactory } = await import("./database");
const conn = ConnectionFactory();
await conn.execute({
sql: "DELETE FROM RateLimit",
args: []
});
}
/**
* Cleanup expired rate limit entries every 5 minutes
* Runs in background to prevent database bloat
*/
setInterval(() => {
const now = Date.now();
for (const [key, record] of rateLimitStore.entries()) {
if (now > record.resetAt) {
rateLimitStore.delete(key);
}
setInterval(async () => {
try {
const { ConnectionFactory } = await import("./database");
const conn = ConnectionFactory();
const now = new Date().toISOString();
await conn.execute({
sql: "DELETE FROM RateLimit WHERE reset_at < ?",
args: [now]
});
} catch (error) {
console.error("Failed to cleanup expired rate limits:", error);
}
}, RATE_LIMIT_CLEANUP_INTERVAL_MS);
@@ -270,26 +276,51 @@ export function getAuditContext(event: H3Event): {
* @returns Remaining attempts before limit is hit
* @throws TRPCError if rate limit exceeded
*/
export function checkRateLimit(
export async function checkRateLimit(
identifier: string,
maxAttempts: number,
windowMs: number,
event?: H3Event
): number {
): Promise<number> {
const { ConnectionFactory } = await import("./database");
const { v4: uuid } = await import("uuid");
const conn = ConnectionFactory();
const now = Date.now();
const record = rateLimitStore.get(identifier);
const resetAt = new Date(now + windowMs);
if (!record || now > record.resetAt) {
// Try to get existing record
const result = await conn.execute({
sql: "SELECT id, count, reset_at FROM RateLimit WHERE identifier = ?",
args: [identifier]
});
if (result.rows.length === 0) {
// Create new record
rateLimitStore.set(identifier, {
count: 1,
resetAt: now + windowMs
await conn.execute({
sql: "INSERT INTO RateLimit (id, identifier, count, reset_at) VALUES (?, ?, ?, ?)",
args: [uuid(), identifier, 1, resetAt.toISOString()]
});
return maxAttempts - 1;
}
if (record.count >= maxAttempts) {
const remainingMs = record.resetAt - now;
const record = result.rows[0];
const recordResetAt = new Date(record.reset_at as string);
// Check if window has expired
if (now > recordResetAt.getTime()) {
// Reset the record
await conn.execute({
sql: "UPDATE RateLimit SET count = 1, reset_at = ?, updated_at = datetime('now') WHERE identifier = ?",
args: [resetAt.toISOString(), identifier]
});
return maxAttempts - 1;
}
const count = record.count as number;
// Check if limit exceeded
if (count >= maxAttempts) {
const remainingMs = recordResetAt.getTime() - now;
const remainingSec = Math.ceil(remainingMs / 1000);
// Log rate limit exceeded (fire-and-forget)
@@ -318,8 +349,12 @@ export function checkRateLimit(
}
// Increment count
record.count++;
return maxAttempts - record.count;
await conn.execute({
sql: "UPDATE RateLimit SET count = count + 1, updated_at = datetime('now') WHERE identifier = ?",
args: [identifier]
});
return maxAttempts - count - 1;
}
/**
@@ -331,13 +366,13 @@ export const RATE_LIMITS = CONFIG_RATE_LIMITS;
/**
* Rate limiting middleware for login operations
*/
export function rateLimitLogin(
export async function rateLimitLogin(
email: string,
clientIP: string,
event?: H3Event
): void {
): Promise<void> {
// Rate limit by IP
checkRateLimit(
await checkRateLimit(
`login:ip:${clientIP}`,
RATE_LIMITS.LOGIN_IP.maxAttempts,
RATE_LIMITS.LOGIN_IP.windowMs,
@@ -345,7 +380,7 @@ export function rateLimitLogin(
);
// Rate limit by email
checkRateLimit(
await checkRateLimit(
`login:email:${email}`,
RATE_LIMITS.LOGIN_EMAIL.maxAttempts,
RATE_LIMITS.LOGIN_EMAIL.windowMs,
@@ -356,11 +391,11 @@ export function rateLimitLogin(
/**
* Rate limiting middleware for password reset
*/
export function rateLimitPasswordReset(
export async function rateLimitPasswordReset(
clientIP: string,
event?: H3Event
): void {
checkRateLimit(
): Promise<void> {
await checkRateLimit(
`password-reset:ip:${clientIP}`,
RATE_LIMITS.PASSWORD_RESET_IP.maxAttempts,
RATE_LIMITS.PASSWORD_RESET_IP.windowMs,
@@ -371,8 +406,11 @@ export function rateLimitPasswordReset(
/**
* Rate limiting middleware for registration
*/
export function rateLimitRegistration(clientIP: string, event?: H3Event): void {
checkRateLimit(
export async function rateLimitRegistration(
clientIP: string,
event?: H3Event
): Promise<void> {
await checkRateLimit(
`registration:ip:${clientIP}`,
RATE_LIMITS.REGISTRATION_IP.maxAttempts,
RATE_LIMITS.REGISTRATION_IP.windowMs,
@@ -383,11 +421,11 @@ export function rateLimitRegistration(clientIP: string, event?: H3Event): void {
/**
* Rate limiting middleware for email verification
*/
export function rateLimitEmailVerification(
export async function rateLimitEmailVerification(
clientIP: string,
event?: H3Event
): void {
checkRateLimit(
): Promise<void> {
await checkRateLimit(
`email-verification:ip:${clientIP}`,
RATE_LIMITS.EMAIL_VERIFICATION_IP.maxAttempts,
RATE_LIMITS.EMAIL_VERIFICATION_IP.windowMs,