Harden signup/reset flows: add trimmed name/email validation, password policy with bcrypt 72-byte limit, confirm-password match, and blur-gated inline errors

Author: kryvosheyin

frontend/app/api/auth/password-reset/confirm/route.ts

@@ -6,30 +6,20 @@ import { z } from 'zod';
 import { db } from '@/db';
 import { passwordResetTokens } from '@/db/schema/passwordResetTokens';
 import { users } from '@/db/schema/users';
-import {
-  PASSWORD_MAX_LEN,
-  PASSWORD_MIN_LEN,
-  PASSWORD_POLICY_REGEX,
-} from '@/lib/auth/signup-constraints';
+import { PASSWORD_MAX_BYTES, PASSWORD_MIN_LEN, PASSWORD_POLICY_REGEX } from '@/lib/auth/signup-constraints';
 
 const schema = z.object({
   token: z.string().uuid(),
   password: z
     .string()
-    .min(
-      PASSWORD_MIN_LEN,
-      `Password must be at least ${PASSWORD_MIN_LEN} characters`
-    )
-    .max(
-      PASSWORD_MAX_LEN,
-      `Password must be at most ${PASSWORD_MAX_LEN} characters`
-    )
+    .min(PASSWORD_MIN_LEN, `Password must be at least ${PASSWORD_MIN_LEN} characters`)
     .regex(/[A-Z]/, 'Password must contain at least one capital letter')
-    .regex(
-      /[^A-Za-z0-9]/,
-      'Password must contain at least one special character'
+    .regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character')
+    .regex(PASSWORD_POLICY_REGEX, 'Password does not meet the required policy')
+    .refine(
+      (val) => Buffer.byteLength(val, 'utf8') <= PASSWORD_MAX_BYTES,
+      `Password must be at most ${PASSWORD_MAX_BYTES} bytes`
     )
-    .regex(PASSWORD_POLICY_REGEX, 'Password does not meet the required policy'),
 });
 
 function firstFieldErrorMessage(

frontend/app/api/auth/signup/route.ts

@@ -12,7 +12,7 @@ import {
   EMAIL_MIN_LEN,
   NAME_MAX_LEN,
   NAME_MIN_LEN,
-  PASSWORD_MAX_LEN,
+  PASSWORD_MAX_BYTES,
   PASSWORD_MIN_LEN,
   PASSWORD_POLICY_REGEX,
 } from '@/lib/auth/signup-constraints';
@@ -21,6 +21,20 @@ import { resolveBaseUrl } from '@/lib/http/getBaseUrl';
 
 export const runtime = 'nodejs';
 
+const passwordSchema = z
+  .string()
+  .min(
+    PASSWORD_MIN_LEN,
+    `Password must be at least ${PASSWORD_MIN_LEN} characters`
+  )
+  .regex(/[A-Z]/, 'Password must contain at least one capital letter')
+  .regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character')
+  .regex(PASSWORD_POLICY_REGEX, 'Password does not meet the required policy')
+  .refine(
+    val => Buffer.byteLength(val, 'utf8') <= PASSWORD_MAX_BYTES,
+    `Password must be at most ${PASSWORD_MAX_BYTES} bytes`
+  );
+
 const signupSchema = z
   .object({
     name: z
@@ -34,14 +48,8 @@ const signupSchema = z
       .min(EMAIL_MIN_LEN, `Email must be at least ${EMAIL_MIN_LEN} characters`)
       .max(EMAIL_MAX_LEN, `Email must be at most ${EMAIL_MAX_LEN} characters`)
       .email('Invalid email'),
-    password: z
-      .string()
-      .min(PASSWORD_MIN_LEN, `Password must be at least ${PASSWORD_MIN_LEN} characters`)
-      .max(PASSWORD_MAX_LEN, `Password must be at most ${PASSWORD_MAX_LEN} characters`)
-      .regex(/[A-Z]/, 'Password must contain at least one capital letter')
-      .regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character')
-      .regex(PASSWORD_POLICY_REGEX, 'Password does not meet the required policy'),
-    confirmPassword: z.string(),
+    password: passwordSchema,
+    confirmPassword: passwordSchema,
   })
   .superRefine((val, ctx) => {
     if (val.password !== val.confirmPassword) {
@@ -109,10 +117,7 @@ export async function POST(req: Request) {
     });
 
     return NextResponse.json(
-      {
-        success: true,
-        verificationRequired: true,
-      },
+      { success: true, verificationRequired: true },
       { status: 201 }
     );
   } catch (error) {

frontend/components/auth/ResetPasswordForm.tsx

@@ -9,7 +9,7 @@ import { AuthSuccessBanner } from '@/components/auth/AuthSuccessBanner';
 import { PasswordField } from '@/components/auth/fields/PasswordField';
 import { Button } from '@/components/ui/button';
 import {
-  PASSWORD_MAX_LEN,
+  PASSWORD_MAX_BYTES,
   PASSWORD_MIN_LEN,
   PASSWORD_POLICY_REGEX,
 } from '@/lib/auth/signup-constraints';
@@ -20,6 +20,7 @@ type ResetPasswordFormProps = {
 
 export function ResetPasswordForm({ token }: ResetPasswordFormProps) {
   const t = useTranslations('auth.resetPassword');
+  const tf = useTranslations('auth.fields');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
@@ -30,16 +31,16 @@ export function ResetPasswordForm({ token }: ResetPasswordFormProps) {
   const passwordPolicyOk = useMemo(() => {
     if (!passwordValue) return false;
     if (passwordValue.length < PASSWORD_MIN_LEN) return false;
-    if (passwordValue.length > PASSWORD_MAX_LEN) return false;
+    if (passwordValue.length > PASSWORD_MAX_BYTES) return false;
     return PASSWORD_POLICY_REGEX.test(passwordValue);
   }, [passwordValue]);
 
   const passwordRequirementsText =
-    '8–128 characters, at least one capital letter, and at least one special character.';
+    tf('validation.passwordRequirements', { PASSWORD_MIN_LEN, PASSWORD_MAX_BYTES });
 
   const passwordErrorText =
     passwordTouched && !passwordPolicyOk
-      ? `Password must meet requirements: ${passwordRequirementsText}`
+      ? tf('validation.invalidPassword', { passwordRequirementsText })
       : null;
 
   const submitDisabled = loading || !passwordPolicyOk;
@@ -93,10 +94,9 @@ export function ResetPasswordForm({ token }: ResetPasswordFormProps) {
             <PasswordField
               id="password"
               name="password"
-              placeholder="New password"
+              placeholder={tf('setNewPassword')}
               autoComplete="new-password"
               minLength={PASSWORD_MIN_LEN}
-              maxLength={PASSWORD_MAX_LEN}
               pattern={PASSWORD_POLICY_REGEX.source}
               onChange={setPasswordValue}
               onBlur={() => setPasswordTouched(true)}

frontend/components/auth/SignupForm.tsx

@@ -18,7 +18,7 @@ import {
   EMAIL_MIN_LEN,
   NAME_MAX_LEN,
   NAME_MIN_LEN,
-  PASSWORD_MAX_LEN,
+  PASSWORD_MAX_BYTES,
   PASSWORD_MIN_LEN,
   PASSWORD_POLICY_REGEX,
 } from '@/lib/auth/signup-constraints';
@@ -28,8 +28,13 @@ type SignupFormProps = {
   returnTo: string;
 };
 
+function utf8ByteLength(value: string): number {
+  return new TextEncoder().encode(value).length;
+}
+
 export function SignupForm({ locale, returnTo }: SignupFormProps) {
   const t = useTranslations('auth.signup');
+  const tf = useTranslations('auth.fields');
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -68,15 +73,17 @@ export function SignupForm({ locale, returnTo }: SignupFormProps) {
   const passwordPolicyOk = useMemo(() => {
     if (!passwordValue) return false;
     if (passwordValue.length < PASSWORD_MIN_LEN) return false;
-    if (passwordValue.length > PASSWORD_MAX_LEN) return false;
-    return PASSWORD_POLICY_REGEX.test(passwordValue);
+    if (!PASSWORD_POLICY_REGEX.test(passwordValue)) return false;
+    if (utf8ByteLength(passwordValue) > PASSWORD_MAX_BYTES) return false;
+    return true;
   }, [passwordValue]);
 
   const confirmPasswordPolicyOk = useMemo(() => {
     if (!confirmPasswordValue) return false;
     if (confirmPasswordValue.length < PASSWORD_MIN_LEN) return false;
-    if (confirmPasswordValue.length > PASSWORD_MAX_LEN) return false;
-    return PASSWORD_POLICY_REGEX.test(confirmPasswordValue);
+    if (!PASSWORD_POLICY_REGEX.test(confirmPasswordValue)) return false;
+    if (utf8ByteLength(confirmPasswordValue) > PASSWORD_MAX_BYTES) return false;
+    return true;
   }, [confirmPasswordValue]);
 
   const passwordsMatch = useMemo(() => {
@@ -86,36 +93,37 @@ export function SignupForm({ locale, returnTo }: SignupFormProps) {
 
   const nameErrorText =
     nameTouched && !nameLooksValid
-      ? `Name must be at least ${NAME_MIN_LEN} characters and at most ${NAME_MAX_LEN} characters`
+      ? tf('validation.invalidName', { NAME_MIN_LEN, NAME_MAX_LEN })
       : null;
 
   const emailErrorText = useMemo(() => {
     if (!emailTouched) return null;
-
-    if (!emailTrimmed) return "Email is required";
+    if (!emailTrimmed) return null;
 
     if (emailTrimmed.length > EMAIL_MAX_LEN) {
-      return `Email must not exceed ${EMAIL_MAX_LEN} characters.`;
+      return tf('validation.emailTooLong', { EMAIL_MAX_LEN });
     }
 
     if (!emailFormatOk) {
-      return 'Email format is invalid.';
+      return tf('validation.invalidEmail');
     }
 
     return null;
-  }, [emailTouched, emailTrimmed, emailFormatOk]);
+  }, [emailTouched, emailTrimmed, emailFormatOk, tf]);
 
-  const passwordRequirementsText =
-    '8–128 characters, at least one capital letter, and at least one special character.';
+  const passwordRequirementsText = tf('validation.passwordRequirements', {
+    PASSWORD_MIN_LEN,
+    PASSWORD_MAX_BYTES,
+  });
 
   const passwordErrorText =
     passwordTouched && !passwordPolicyOk
-      ? `Password must meet requirements: ${passwordRequirementsText}`
+      ? tf('validation.invalidPassword', { passwordRequirementsText })
       : null;
 
   const confirmPolicyErrorText =
     confirmPasswordTouched && !confirmPasswordPolicyOk
-      ? `Password must meet requirements: ${passwordRequirementsText}`
+      ? tf('validation.invalidPassword', { passwordRequirementsText })
       : null;
 
   const mismatchErrorText =
@@ -124,11 +132,10 @@ export function SignupForm({ locale, returnTo }: SignupFormProps) {
       passwordValue.length > 0 &&
       confirmPasswordValue.length > 0 &&
       !passwordsMatch
-      ? 'Passwords do not match.'
+      ? tf('validation.passwordsDontMatch')
       : null;
 
-  const confirmPasswordErrorText =
-    mismatchErrorText ?? confirmPolicyErrorText ?? null;
+  const confirmPasswordErrorText = mismatchErrorText ?? confirmPolicyErrorText ?? null;
 
   const submitDisabled =
     loading ||
@@ -238,9 +245,7 @@ export function SignupForm({ locale, returnTo }: SignupFormProps) {
               onChange={setNameValue}
               onBlur={() => setNameTouched(true)}
             />
-            {nameErrorText && (
-              <p className="text-sm text-red-600">{nameErrorText}</p>
-            )}
+            {nameErrorText && <p className="text-sm text-red-600">{nameErrorText}</p>}
           </div>
 
           <div className="space-y-1">
@@ -250,47 +255,53 @@ export function SignupForm({ locale, returnTo }: SignupFormProps) {
               onChange={value => {
                 setEmailValueLive(value);
                 setEmail(value);
-
               }}
               onBlur={() => setEmailTouched(true)}
             />
-            {emailErrorText && (
-              <p className="text-sm text-red-600">{emailErrorText}</p>
-            )}
+            {emailErrorText && <p className="text-sm text-red-600">{emailErrorText}</p>}
           </div>
 
           <div className="space-y-1">
             <PasswordField
               id="password"
               name="password"
-              placeholder="Password"
+              placeholder={tf('password')}
               autoComplete="new-password"
               minLength={PASSWORD_MIN_LEN}
-              maxLength={PASSWORD_MAX_LEN}
               pattern={PASSWORD_POLICY_REGEX.source}
               onChange={setPasswordValue}
               onBlur={() => setPasswordTouched(true)}
             />
             {passwordErrorText && (
               <p className="text-sm text-red-600">{passwordErrorText}</p>
             )}
+            {passwordTouched && utf8ByteLength(passwordValue) > PASSWORD_MAX_BYTES && (
+              <p className="text-sm text-red-600">
+                {tf('validation.passwordTooLongBytes', { PASSWORD_MAX_BYTES })}
+              </p>
+            )}
           </div>
 
           <div className="space-y-1">
             <PasswordField
               id="confirmPassword"
               name="confirmPassword"
-              placeholder="Confirm password"
+              placeholder={tf('confirmPassword')}
               autoComplete="new-password"
               minLength={PASSWORD_MIN_LEN}
-              maxLength={PASSWORD_MAX_LEN}
               pattern={PASSWORD_POLICY_REGEX.source}
               onChange={setConfirmPasswordValue}
               onBlur={() => setConfirmPasswordTouched(true)}
             />
             {confirmPasswordErrorText && (
               <p className="text-sm text-red-600">{confirmPasswordErrorText}</p>
             )}
+            {confirmPasswordTouched &&
+              utf8ByteLength(confirmPasswordValue) > PASSWORD_MAX_BYTES && (
+                <p className="text-sm text-red-600">
+                  {tf('validation.passwordTooLongBytes', { PASSWORD_MAX_BYTES })}
+                </p>
+              )}
           </div>
 
           {error && <AuthErrorBanner message={error} />}

frontend/components/auth/fields/EmailField.tsx

@@ -45,13 +45,11 @@ export function EmailField({
     e.currentTarget.setCustomValidity('');
   };
 
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
     const input = e.currentTarget;
     const trimmed = input.value.trim();
 
-    if (trimmed !== input.value) {
-      input.value = trimmed;
-    }
+    input.value = trimmed;
 
     onChange?.(trimmed);
     onBlur?.(e);
@@ -68,7 +66,7 @@ export function EmailField({
       className="w-full rounded border px-3 py-2"
       onInvalid={handleInvalid}
       onInput={handleInput}
-      onChange={onChange ? e => onChange(e.currentTarget.value) : undefined}
+      onChange={e => onChange?.(e.currentTarget.value)}
       onBlur={handleBlur}
     />
   );

frontend/components/auth/fields/NameField.tsx

@@ -15,7 +15,7 @@ export function NameField({
   minLength,
   maxLength,
   onChange,
-  onBlur
+  onBlur,
 }: NameFieldProps) {
   const t = useTranslations('auth.fields');