feat: sigup page

Author: luannguyenQV

apps/web/@/actions/auth/index.ts

@@ -1,13 +1,13 @@
 "use server"
 
-import { redirect } from "next/navigation"
-
+import bcrypt from "bcrypt"
 import { signIn, signOut } from "configs/auth"
 import { Prisma } from "database"
 import { createUser } from "database/src/users/queries"
-import { z } from "zod"
 
-import { SignUpDataOutput } from "./type"
+import { redirect } from "@/utils/navigation"
+
+import { SignUpDataOutput, signUpSchema } from "./type"
 
 export const signInWithCredentials = async (email: string, password: string) => {
   await signIn("credentials", {
@@ -31,13 +31,20 @@ export const signUp = async (
   data: Pick<Prisma.UserCreateInput, "email" | "password">
 ): Promise<SignUpDataOutput> => {
   try {
-    await createUser({ data })
-
-    redirect("/login")
+    // hash password
+    const { email, password } = data
+    const hashedPassword = await bcrypt.hash(password, 10)
+
+    await createUser({
+      data: {
+        email,
+        password: hashedPassword,
+      },
+    })
   } catch (error) {
-    if (error.code === "P2002") {
+    if (error?.error?.code === "P2002") {
       return {
-        formErrors: [],
+        formErrors: null,
         fieldErrors: {
           email: ["Email already exists"], // TODO: localize error message
         },
@@ -49,4 +56,7 @@ export const signUp = async (
       fieldErrors: {},
     }
   }
+
+  // TODO: white this redirect not work
+  redirect("/login")
 }

apps/web/@/molecules/auth/sign-in/index.tsx

@@ -21,7 +21,7 @@ type FormData = {
 export default function SignIn() {
   const t = useTranslations("auth")
 
-  const { register, handleSubmit } = useForm<FormData>({
+  const { register, handleSubmit, formState } = useForm<FormData>({
     resolver: zodResolver(
       z.object({
         email: z.string().email(),
@@ -30,6 +30,8 @@ export default function SignIn() {
     ),
   })
 
+  console.log("formState", formState)
+
   const onSignIn = async (data: FormData) => {
     await signInWithCredentials(data.email, data.password)
   }

apps/web/@/molecules/auth/sign-up/index.tsx

@@ -28,6 +28,7 @@ import { z } from "zod"
 
 import { signUp } from "@/actions/auth"
 import { SignUpDataInput, signUpSchema } from "@/actions/auth/type"
+import { redirect } from "@/utils/navigation"
 
 import AuthForm from "../auth-form"
 
@@ -52,25 +53,25 @@ export default function SignUp() {
   //   null
   // )
 
-  console.log(">>>", errors)
-
   const formAction = async ({ confirmPassword, ...data }: SignUpDataInput) => {
     const error = await signUp(data)
 
-    console.log("formAction>>error", error)
-
     if (error.formErrors) {
       toast.error(error.formErrors?.at(0))
-    }
 
+      return
+    }
     if (error.fieldErrors) {
       Object?.entries(error.fieldErrors)?.forEach(([field, message]) => {
         setError(field, {
           type: "manual",
           message,
         })
       })
+      return
     }
+
+    redirect("/login")
   }
 
   return (
@@ -106,7 +107,7 @@ export default function SignUp() {
                 name="password"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel htmlFor="email">{t("password_label")}</FormLabel>
+                    <FormLabel htmlFor="password">{t("password_label")}</FormLabel>
                     <FormControl>
                       <Input
                         id="password"
@@ -125,7 +126,7 @@ export default function SignUp() {
                 name="confirmPassword"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel htmlFor="email">{t("confirm_password_label")}</FormLabel>
+                    <FormLabel htmlFor="confirmPassword">{t("confirm_password_label")}</FormLabel>
                     <FormControl>
                       <Input
                         id="confirmPassword"

apps/web/configs/auth.ts

@@ -1,4 +1,5 @@
 import { PrismaAdapter } from "@auth/prisma-adapter"
+import bcryptjs from "bcryptjs"
 import prisma, { getUser } from "database"
 import NextAuth from "next-auth"
 import Credentials from "next-auth/providers/credentials"
@@ -24,23 +25,29 @@ export const {
       authorize: async (credentials: Record<string, string>) => {
         try {
           // IMPROVE:
-          // const { data: user } = await getUser({
+          const { data: user } = await getUser({
+            where: {
+              email: credentials.email,
+            },
+          })
+
+          // const user = await prisma.user.findUnique({
           //   where: {
           //     email: credentials.email,
           //     password: credentials.password,
           //   },
           // })
-          const user = await prisma.user.findUnique({
-            where: {
-              email: credentials.email,
-              password: credentials.password,
-            },
-          })
 
           if (!user) {
             return null
           }
 
+          const isPasswordValid = await bcryptjs.compare(credentials.password, user.password)
+
+          if (!isPasswordValid) {
+            return null // Invalid password
+          }
+
           return user
         } catch (e) {
           return null

apps/web/package.json

@@ -31,6 +31,8 @@
     "@tiptap/react": "^2.1.7",
     "@tiptap/starter-kit": "^2.1.7",
     "autoprefixer": "^10.4.15",
+    "bcrypt": "^5.1.1",
+    "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.1",

packages/database/src/users/selects.ts

@@ -12,6 +12,7 @@ export const userDetailSelect = {
   totalFollowing: true,
   totalPost: true,
   totalView: true,
+  password: true,
 } satisfies Prisma.UserSelect
 
 export type TUserDetail = Prisma.UserGetPayload<{