Enhance signup and password reset flows

Author: kryvosheyin

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

@@ -6,18 +6,38 @@ 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';
 
 const schema = z.object({
   token: z.string().uuid(),
-  password: z.string().min(8),
+  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'),
 });
 
 export async function POST(req: Request) {
   const body = await req.json().catch(() => null);
   const parsed = schema.safeParse(body);
 
   if (!parsed.success) {
-    return NextResponse.json({ error: 'Invalid request' }, { status: 400 });
+    return NextResponse.json(
+      { error: parsed.error.flatten().fieldErrors },
+      { status: 400 }
+    );
   }
 
   const { token, password } = parsed.data;
@@ -60,4 +80,4 @@ export async function POST(req: Request) {
   await db.update(users).set({ passwordHash }).where(eq(users.id, userId));
 
   return NextResponse.json({ success: true });
-}
+}

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

@@ -7,16 +7,51 @@ import { z } from 'zod';
 import { db } from '@/db';
 import { users } from '@/db/schema/users';
 import { createEmailVerificationToken } from '@/lib/auth/email-verification';
+import {
+  EMAIL_MAX_LEN,
+  EMAIL_MIN_LEN,
+  NAME_MAX_LEN,
+  NAME_MIN_LEN,
+  PASSWORD_MAX_LEN,
+  PASSWORD_MIN_LEN,
+  PASSWORD_POLICY_REGEX,
+} from '@/lib/auth/signup-constraints';
 import { sendVerificationEmail } from '@/lib/email/sendVerificationEmail';
 import { resolveBaseUrl } from '@/lib/http/getBaseUrl';
 
 export const runtime = 'nodejs';
 
-const signupSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  email: z.string().email('Invalid email'),
-  password: z.string().min(8, 'Password must be at least 8 characters'),
-});
+const signupSchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(NAME_MIN_LEN, `Name must be at least ${NAME_MIN_LEN} characters`)
+      .max(NAME_MAX_LEN, `Name must be at most ${NAME_MAX_LEN} characters`),
+    email: z
+      .string()
+      .trim()
+      .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(),
+  })
+  .superRefine((val, ctx) => {
+    if (val.password !== val.confirmPassword) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['confirmPassword'],
+        message: 'Passwords do not match',
+      });
+    }
+  });
 
 export async function POST(req: Request) {
   try {
@@ -88,4 +123,4 @@ export async function POST(req: Request) {
       { status: 500 }
     );
   }
-}
+}

frontend/components/auth/ResetPasswordForm.tsx

@@ -1,13 +1,18 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { AuthErrorBanner } from '@/components/auth/AuthErrorBanner';
 import { AuthShell } from '@/components/auth/AuthShell';
 import { AuthSuccessBanner } from '@/components/auth/AuthSuccessBanner';
 import { PasswordField } from '@/components/auth/fields/PasswordField';
 import { Button } from '@/components/ui/button';
+import {
+  PASSWORD_MAX_LEN,
+  PASSWORD_MIN_LEN,
+  PASSWORD_POLICY_REGEX,
+} from '@/lib/auth/signup-constraints';
 
 type ResetPasswordFormProps = {
   token: string;
@@ -19,8 +24,31 @@ export function ResetPasswordForm({ token }: ResetPasswordFormProps) {
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
 
+  const [passwordValue, setPasswordValue] = useState('');
+  const [passwordTouched, setPasswordTouched] = useState(false);
+
+  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);
+  }, [passwordValue]);
+
+  const passwordRequirementsText =
+    '8–128 characters, at least one capital letter, and at least one special character.';
+
+  const passwordErrorText =
+    passwordTouched && !passwordPolicyOk
+      ? `Password must meet requirements: ${passwordRequirementsText}`
+      : null;
+
+  const submitDisabled = loading || !passwordPolicyOk;
+
   async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
+
+    if (submitDisabled) return;
+
     setLoading(true);
     setError(null);
 
@@ -38,8 +66,12 @@ export function ResetPasswordForm({ token }: ResetPasswordFormProps) {
         }),
       });
 
+      const data = await res.json().catch(() => null);
+
       if (!res.ok) {
-        setError(t('errors.resetFailed'));
+        const msg =
+          typeof data?.error === 'string' ? data.error : t('errors.resetFailed');
+        setError(msg);
         return;
       }
 
@@ -57,15 +89,30 @@ export function ResetPasswordForm({ token }: ResetPasswordFormProps) {
         <AuthSuccessBanner message={t('success')} />
       ) : (
         <form onSubmit={onSubmit} className="space-y-4">
-          <PasswordField minLength={8} />
+          <div className="space-y-1">
+            <PasswordField
+              id="password"
+              name="password"
+              placeholder="New 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>
+            )}
+          </div>
 
           {error && <AuthErrorBanner message={error} />}
 
-          <Button type="submit" disabled={loading} className="w-full">
+          <Button type="submit" disabled={submitDisabled} className="w-full">
             {loading ? t('submitting') : t('submit')}
           </Button>
         </form>
       )}
     </AuthShell>
   );
-}
+}