make cognito confirmation code errors show up on frontend

Author: ItsEricSun

apps/backend/src/auth/auth.controller.ts

@@ -147,8 +147,29 @@ export class AuthController {
   }
 
   @Post('/confirmPassword')
-  confirmPassword(@Body() body: ConfirmPasswordDto): Promise<void> {
-    return this.authService.confirmForgotPassword(body);
+  async confirmPassword(@Body() body: ConfirmPasswordDto): Promise<void> {
+    try {
+      await this.authService.confirmForgotPassword(body);
+    } catch (e) {
+      console.error('Confirm password error:', e);
+      // Map Cognito errors to user-friendly messages
+      if (e instanceof Error) {
+        const errName = (e as any).name || '';
+        if (
+          errName === 'InvalidVerificationCodeException' ||
+          errName === 'CodeMismatchException'
+        ) {
+          throw new BadRequestException('Confirmation code is incorrect');
+        }
+        if (errName === 'UserNotFoundException') {
+          throw new BadRequestException('User not found');
+        }
+        if (errName === 'ExpiredCodeException') {
+          throw new BadRequestException('Confirmation code has expired');
+        }
+      }
+      throw new BadRequestException(e.message || 'Failed to reset password');
+    }
   }
 
   @Post('/delete')

apps/frontend/src/containers/auth/ResetPasswordForm.tsx

@@ -97,18 +97,14 @@ export const ResetPasswordForm: React.FC<ResetPasswordFormProps> = ({
         >
           New Password
         </Label>
-        <InputGroup
-          className={`w-full focus-within:border-[#007B64] focus-within:ring-[2.5px] focus-within:ring-[#007B64] py-5 ${
-            error ? 'border-[#B4444D] ring-[2px] ring-[#B4444D]' : ''
-          }`}
-        >
+        <InputGroup className="w-full focus-within:border-[#007B64] focus-within:ring-[2.5px] focus-within:ring-[#007B64] py-5">
           <InputGroupInput
             id="new-password"
             type={showPassword ? 'text' : 'password'}
             value={newPassword}
             onChange={(e) => setNewPassword(e.target.value)}
             placeholder="Password"
-            className={`focus:ring-[#007B64] ${error ? 'bg-[#FFFAFA]' : ''}`}
+            className="focus:ring-[#007B64]"
           />
           <InputGroupAddon
             align="inline-end"