Feat: Update user validation schema to include username/email check

The validation schema will throw an error if the username or email is already found in the database.

src/components/RegisterUserForm.tsx

@@ -1,5 +1,7 @@
 import sendRegisterUserRequest from '@/requests/sendRegisterUserRequest';
-import CreateUserValidationSchema from '@/services/User/schema/CreateUserValidationSchema';
+import CreateUserValidationSchema, {
+  CreateUserValidationSchemaWithUsernameAndEmailCheck,
+} from '@/services/User/schema/CreateUserValidationSchema';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/router';
 import { FC, useState } from 'react';
@@ -18,7 +20,7 @@ const RegisterUserForm: FC = () => {
   const router = useRouter();
   const { reset, register, handleSubmit, formState } = useForm<
     z.infer<typeof CreateUserValidationSchema>
-  >({ resolver: zodResolver(CreateUserValidationSchema) });
+  >({ resolver: zodResolver(CreateUserValidationSchemaWithUsernameAndEmailCheck) });
 
   const { errors } = formState;
   const [serverResponseError, setServerResponseError] = useState('');

src/config/nextConnect/middleware/validateRequest.ts

@@ -3,6 +3,11 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { NextHandler } from 'next-connect';
 import { z } from 'zod';
 
+interface ValidateRequestArgs {
+  bodySchema?: z.ZodSchema<any>;
+  querySchema?: z.ZodSchema<any>;
+}
+
 /**
  * Middleware to validate the request body and/or query against a zod schema.
  *
@@ -18,15 +23,8 @@ import { z } from 'zod';
  * @param args.querySchema The query schema to validate against.
  * @throws ServerError with status code 400 if the request body or query is invalid.
  */
-const validateRequest =
-  ({
-    bodySchema,
-    querySchema,
-  }: {
-    bodySchema?: z.ZodSchema<any>;
-    querySchema?: z.ZodSchema<any>;
-  }) =>
-  async (req: NextApiRequest, res: NextApiResponse, next: NextHandler) => {
+const validateRequest = ({ bodySchema, querySchema }: ValidateRequestArgs) => {
+  return (req: NextApiRequest, res: NextApiResponse, next: NextHandler) => {
     if (bodySchema) {
       const parsed = bodySchema.safeParse(JSON.parse(JSON.stringify(req.body)));
       if (!parsed.success) {
@@ -42,8 +40,8 @@ const validateRequest =
       }
       req.query = parsed.data;
     }
-
     return next();
   };
+};
 
 export default validateRequest;

src/pages/account/index.tsx

@@ -26,11 +26,11 @@ const AccountInfo: FC<{
   >({
     resolver: zodResolver(GetUserSchema),
     defaultValues: {
-      username: 'test',
-      email: 'test@example.com',
-      firstName: 'test',
-      lastName: 'icle',
-      dateOfBirth: new Date(),
+      username: user.username,
+      email: user.email,
+      firstName: user.firstName,
+      lastName: user.lastName,
+      dateOfBirth: user.dateOfBirth,
     },
   });
 

src/pages/api/users/check-email.ts

@@ -0,0 +1,43 @@
+import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
+
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import findUserByEmail from '@/services/User/findUserByEmail';
+
+const CheckEmailRequestQuerySchema = z.object({
+  email: z.string(),
+});
+
+interface CheckEmailRequestSchema extends NextApiRequest {
+  query: z.infer<typeof CheckEmailRequestQuerySchema>;
+}
+
+const router = createRouter<
+  CheckEmailRequestSchema,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+const checkEmail = async (req: NextApiRequest, res: NextApiResponse) => {
+  const { email: emailToCheck } = req.query;
+
+  const email = await findUserByEmail(emailToCheck as string);
+
+  res.json({
+    success: true,
+    payload: { emailIsTaken: !!email },
+    statusCode: 200,
+    message: 'Getting username availability.',
+  });
+};
+
+router.get(
+  validateRequest({ querySchema: z.object({ email: z.string().email() }) }),
+  checkEmail,
+);
+
+const handler = router.handler(NextConnectOptions);
+
+export default handler;

src/pages/api/users/check-username.ts

@@ -0,0 +1,43 @@
+import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
+
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { createRouter } from 'next-connect';
+import { z } from 'zod';
+import validateRequest from '@/config/nextConnect/middleware/validateRequest';
+import findUserByUsername from '@/services/User/findUserByUsername';
+
+const CheckUsernameRequestQuerySchema = z.object({
+  username: z.string(),
+});
+
+interface CheckUsernameRequestSchema extends NextApiRequest {
+  query: z.infer<typeof CheckUsernameRequestQuerySchema>;
+}
+
+const router = createRouter<
+  CheckUsernameRequestSchema,
+  NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
+>();
+
+const checkUsername = async (req: NextApiRequest, res: NextApiResponse) => {
+  const { username: usernameToCheck } = req.query;
+
+  const user = await findUserByUsername(usernameToCheck as string);
+
+  res.json({
+    success: true,
+    payload: { usernameIsTaken: !!user },
+    statusCode: 200,
+    message: 'Getting username availability.',
+  });
+};
+
+router.get(
+  validateRequest({ querySchema: z.object({ username: z.string() }) }),
+  checkUsername,
+);
+
+const handler = router.handler(NextConnectOptions);
+
+export default handler;

src/prisma/seed/create/createNewUsers.ts

@@ -53,7 +53,16 @@ const createNewUsers = async ({ numberOfUsers }: CreateNewUsersArgs) => {
     const dateOfBirth = faker.date.birthdate({ mode: 'age', min: 19 });
     const createdAt = faker.date.past(1);
 
-    const user = { firstName, lastName, email, username, dateOfBirth, createdAt, hash };
+    const user = {
+      firstName,
+      lastName,
+      email,
+      username,
+      dateOfBirth,
+      createdAt,
+      hash,
+      accountIsVerified: true,
+    };
 
     data.push(user);
   }

src/requests/valdiateEmail.ts

@@ -0,0 +1,25 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+
+const validateEmail = async (email: string) => {
+  const response = await fetch(`/api/users/check-email?email=${email}`);
+  const json = await response.json();
+
+  const parsed = APIResponseValidationSchema.safeParse(json);
+
+  if (!parsed.success) {
+    return false;
+  }
+
+  const parsedPayload = z
+    .object({ usernameIsTaken: z.boolean() })
+    .safeParse(parsed.data.payload);
+
+  if (!parsedPayload.success) {
+    return false;
+  }
+
+  return !parsedPayload.data.usernameIsTaken;
+};
+
+export default validateEmail;

src/requests/validateUsername.ts

@@ -0,0 +1,25 @@
+import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
+import { z } from 'zod';
+
+const validateUsername = async (username: string) => {
+  const response = await fetch(`/api/users/check-username?username=${username}`);
+  const json = await response.json();
+
+  const parsed = APIResponseValidationSchema.safeParse(json);
+
+  if (!parsed.success) {
+    return false;
+  }
+
+  const parsedPayload = z
+    .object({ usernameIsTaken: z.boolean() })
+    .safeParse(parsed.data.payload);
+
+  if (!parsedPayload.success) {
+    return false;
+  }
+
+  return !parsedPayload.data.usernameIsTaken;
+};
+
+export default validateUsername;

src/services/User/schema/CreateUserValidationSchema.ts

@@ -1,53 +1,75 @@
+import validateEmail from '@/requests/valdiateEmail';
+import validateUsername from '@/requests/validateUsername';
 import sub from 'date-fns/sub';
 import { z } from 'zod';
 
 const minimumDateOfBirth = sub(new Date(), { years: 19 });
-const CreateUserValidationSchema = z
-  .object({
-    email: z.string().email({ message: 'Email must be a valid email address.' }),
-    // use special characters, numbers, and uppercase letters
-    password: z
+const CreateUserValidationSchema = z.object({
+  // use special characters, numbers, and uppercase letters
+  password: z
+    .string()
+    .min(8, { message: 'Password must be at least 8 characters.' })
+    .refine((password) => /[A-Z]/.test(password), {
+      message: 'Password must contain at least one uppercase letter.',
+    })
+    .refine((password) => /[0-9]/.test(password), {
+      message: 'Password must contain at least one number.',
+    })
+    .refine((password) => /[^a-zA-Z0-9]/.test(password), {
+      message: 'Password must contain at least one special character.',
+    }),
+  confirmPassword: z.string(),
+  firstName: z
+    .string()
+    .min(1, { message: 'First name must not be empty.' })
+    .max(20, { message: 'First name must be less than 20 characters.' })
+    .refine((firstName) => /^[a-zA-Z]+$/.test(firstName), {
+      message: 'First name must only contain letters.',
+    }),
+  lastName: z
+    .string()
+    .min(1, { message: 'Last name must not be empty.' })
+    .max(20, { message: 'Last name must be less than 20 characters.' })
+    .refine((lastName) => /^[a-zA-Z]+$/.test(lastName), {
+      message: 'Last name must only contain letters.',
+    }),
+  dateOfBirth: z.string().refine(
+    (dateOfBirth) => {
+      const parsedDateOfBirth = new Date(dateOfBirth);
+      return parsedDateOfBirth <= minimumDateOfBirth;
+    },
+    { message: 'You must be at least 19 years old to register.' },
+  ),
+});
+
+export default CreateUserValidationSchema.extend({
+  username: z
+    .string()
+    .min(1, { message: 'Username must not be empty.' })
+    .max(20, { message: 'Username must be less than 20 characters.' }),
+
+  email: z.string().email({ message: 'Email must be a valid email address.' }),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: 'Passwords do not match.',
+  path: ['confirmPassword'],
+});
+
+export const CreateUserValidationSchemaWithUsernameAndEmailCheck =
+  CreateUserValidationSchema.extend({
+    email: z
       .string()
-      .min(8, { message: 'Password must be at least 8 characters.' })
-      .refine((password) => /[A-Z]/.test(password), {
-        message: 'Password must contain at least one uppercase letter.',
-      })
-      .refine((password) => /[0-9]/.test(password), {
-        message: 'Password must contain at least one number.',
-      })
-      .refine((password) => /[^a-zA-Z0-9]/.test(password), {
-        message: 'Password must contain at least one special character.',
-      }),
-    confirmPassword: z.string(),
-    firstName: z
-      .string()
-      .min(1, { message: 'First name must not be empty.' })
-      .max(20, { message: 'First name must be less than 20 characters.' })
-      .refine((firstName) => /^[a-zA-Z]+$/.test(firstName), {
-        message: 'First name must only contain letters.',
-      }),
-    lastName: z
-      .string()
-      .min(1, { message: 'Last name must not be empty.' })
-      .max(20, { message: 'Last name must be less than 20 characters.' })
-      .refine((lastName) => /^[a-zA-Z]+$/.test(lastName), {
-        message: 'Last name must only contain letters.',
+      .email({ message: 'Email must be a valid email address.' })
+      .refine(async (email) => validateEmail(email), {
+        message: 'Email is already taken.',
       }),
     username: z
       .string()
       .min(1, { message: 'Username must not be empty.' })
-      .max(20, { message: 'Username must be less than 20 characters.' }),
-    dateOfBirth: z.string().refine(
-      (dateOfBirth) => {
-        const parsedDateOfBirth = new Date(dateOfBirth);
-        return parsedDateOfBirth <= minimumDateOfBirth;
-      },
-      { message: 'You must be at least 19 years old to register.' },
-    ),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
+      .max(20, { message: 'Username must be less than 20 characters.' })
+      .refine(async (username) => validateUsername(username), {
+        message: 'Username is already taken.',
+      }),
+  }).refine((data) => data.password === data.confirmPassword, {
     message: 'Passwords do not match.',
     path: ['confirmPassword'],
   });
-
-export default CreateUserValidationSchema;