fix security vulnerability with update password API route

apps/artboard/src/pages/artboard.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useMemo } from "react";
+import { Helmet } from "react-helmet-async";
 import { Outlet } from "react-router";
 import webfontloader from "webfontloader";
 
 import { useArtboardStore } from "../store/artboard";
 
 export const ArtboardPage = () => {
+  const name = useArtboardStore((state) => state.resume.basics.name);
   const metadata = useArtboardStore((state) => state.resume.metadata);
 
   const fontString = useMemo(() => {
@@ -57,7 +59,11 @@ export const ArtboardPage = () => {
 
   return (
     <>
-      {metadata.css.visible && <style lang="css">{`[data-page] { ${metadata.css.value} }`}</style>}
+      <Helmet>
+        <title>{name} | Reactive Resume</title>
+
+        {metadata.css.visible && <style lang="css">{metadata.css.value}</style>}
+      </Helmet>
 
       <Outlet />
     </>

apps/client/src/pages/dashboard/settings/_sections/security.tsx

@@ -8,10 +8,10 @@ import {
   Button,
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
   Input,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
@@ -23,16 +23,10 @@ import { useUpdatePassword } from "@/client/services/auth";
 import { useUser } from "@/client/services/user";
 import { useDialog } from "@/client/stores/dialog";
 
-const formSchema = z
-  .object({
-    password: z.string().min(6),
-    confirmPassword: z.string().min(6),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    path: ["confirmPassword"],
-    // eslint-disable-next-line lingui/t-call-in-function
-    message: t`The passwords you entered do not match.`,
-  });
+const formSchema = z.object({
+  currentPassword: z.string().min(6),
+  newPassword: z.string().min(6),
+});
 
 type FormValues = z.infer<typeof formSchema>;
 
@@ -44,15 +38,18 @@ export const SecuritySettings = () => {
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
-    defaultValues: { password: "", confirmPassword: "" },
+    defaultValues: { currentPassword: "", newPassword: "" },
   });
 
   const onReset = () => {
-    form.reset({ password: "", confirmPassword: "" });
+    form.reset({ currentPassword: "", newPassword: "" });
   };
 
   const onSubmit = async (data: FormValues) => {
-    await updatePassword({ password: data.password });
+    await updatePassword({
+      currentPassword: data.currentPassword,
+      newPassword: data.newPassword,
+    });
 
     toast({
       variant: "success",
@@ -78,32 +75,29 @@ export const SecuritySettings = () => {
             <Form {...form}>
               <form className="grid gap-6 sm:grid-cols-2" onSubmit={form.handleSubmit(onSubmit)}>
                 <FormField
-                  name="password"
+                  name="currentPassword"
                   control={form.control}
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t`New Password`}</FormLabel>
+                      <FormLabel>{t`Current Password`}</FormLabel>
                       <FormControl>
-                        <Input type="password" autoComplete="new-password" {...field} />
+                        <Input type="password" autoComplete="current-password" {...field} />
                       </FormControl>
+                      <FormMessage />
                     </FormItem>
                   )}
                 />
 
                 <FormField
-                  name="confirmPassword"
+                  name="newPassword"
                   control={form.control}
                   render={({ field, fieldState }) => (
                     <FormItem>
-                      <FormLabel>{t`Confirm New Password`}</FormLabel>
+                      <FormLabel>{t`New Password`}</FormLabel>
                       <FormControl>
                         <Input type="password" autoComplete="new-password" {...field} />
                       </FormControl>
-                      {fieldState.error && (
-                        <FormDescription className="text-error-foreground">
-                          {fieldState.error.message}
-                        </FormDescription>
-                      )}
+                      <FormMessage />
                     </FormItem>
                   )}
                 />

apps/server/src/auth/auth.controller.ts

@@ -173,8 +173,11 @@ export class AuthController {
 
   @Patch("password")
   @UseGuards(TwoFactorGuard)
-  async updatePassword(@User("email") email: string, @Body() { password }: UpdatePasswordDto) {
-    await this.authService.updatePassword(email, password);
+  async updatePassword(
+    @User("email") email: string,
+    @Body() { currentPassword, newPassword }: UpdatePasswordDto,
+  ) {
+    await this.authService.updatePassword(email, currentPassword, newPassword);
 
     return { message: "Your password has been successfully updated." };
   }

apps/server/src/auth/auth.service.ts

@@ -159,11 +159,19 @@ export class AuthService {
     await this.mailService.sendEmail({ to: email, subject, text });
   }
 
-  async updatePassword(email: string, password: string) {
-    const hashedPassword = await this.hash(password);
+  async updatePassword(email: string, currentPassword: string, newPassword: string) {
+    const user = await this.userService.findOneByIdentifierOrThrow(email);
+
+    if (!user.secrets?.password) {
+      throw new BadRequestException(ErrorMessage.OAuthUser);
+    }
+
+    await this.validatePassword(currentPassword, user.secrets.password);
+
+    const newHashedPassword = await this.hash(newPassword);
 
     await this.userService.updateByEmail(email, {
-      secrets: { update: { password: hashedPassword } },
+      secrets: { update: { password: newHashedPassword } },
     });
   }