feature(validation) refactor login validation

Author: rohrig

composables/useAuth.ts

@@ -47,43 +47,33 @@ export async function registerWithEmail(
   name: string,
   email: string,
   password: string
-): Promise<FormValidation | undefined> {
+): Promise<FormValidation> {
 
   try {
-    const { data, error } = await useFetch<ISession>('/api/auth/register', {
+    const data = await $fetch<ISession>('/api/auth/register', {
       method: 'POST',
-      body: { data: { username, name, email, password } },
-      server: false,
-      key: username + name + email + password
+      body:  { username, name, email, password }
     })
 
-    if (error.value) {
-      type ErrorData = {
-        data: ErrorData
-      }
-
-      const errorData = error.value as unknown as ErrorData
-      const errors = errorData.data.data as unknown as string
-      const res = JSON.parse(errors)
-      const errorMap = new Map<string, { check: InputValidation; }>(Object.entries(res));
-
-      return { hasErrors: true, errors: errorMap }
-    }
-
     if (data) {
       useState('user').value = data
       await useRouter().push('/topics')
     }
-  } catch (e: any) {
-    console.log('error: ' + e.toString())
+
+    return { hasErrors: false, loggedIn: true }
+  } catch (error: any) {
+    const parsedErrors = JSON.parse(error.data.data)
+    const errorMap = new Map<string, { message: InputValidation; }>(Object.entries(parsedErrors))
+    return { hasErrors: true, errors: errorMap }
   }
 }
 
 export async function loginWithEmail(usernameOrEmail: string, password: string): Promise<FormValidation> {
   try {
-    const result = await $fetch<IUser>('/api/auth/login', { method: 'POST', body: { usernameOrEmail: usernameOrEmail, password: password } })
+    const result = await $fetch('/api/auth/login', { method: 'POST', body: { usernameOrEmail: usernameOrEmail, password: password } })
 
     if (!result?.id) {
+      debugger
       throw Error('something went wrong')
     }
     useState('user').value = result
@@ -95,5 +85,4 @@ export async function loginWithEmail(usernameOrEmail: string, password: string):
     const errorMap = new Map<string, { message: InputValidation; }>(Object.entries(parsedErrors))
     return { hasErrors: true, errors: errorMap }
   }
-
 }

pages/login.vue

@@ -7,15 +7,20 @@ const usernameOrEmail = ref('')
 const password = ref('')
 const hasError: Ref<boolean | null> = ref(null)
 const errorMessage: Ref<string | null> = ref(null)
-const errors: Ref<Map<string, { message: InputValidation; }> | undefined> = ref(new Map<string, { message: InputValidation }>())
+const errors: Ref<Map<string, { message: InputValidation }> | undefined> = ref(new Map<string, { message: InputValidation }>())
 
-definePageMeta({
-  middleware: 'guest'
-})
+// definePageMeta({
+//   middleware: 'guest'
+// })
 
-const postLoginForm = async function () {
-  const response = await loginWithEmail(usernameOrEmail.value, password.value)
+let response: FormValidation
+
+async function postLoginForm() {
+  response = await loginWithEmail(usernameOrEmail.value, password.value)
   errors.value = response.errors
+  const test = errors.value
+  debugger
+  console.log('errors', errors.value)
 }
 </script>
 
@@ -38,8 +43,6 @@ const postLoginForm = async function () {
 
         <div v-if="response?.hasErrors && errors"
           class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-3" role="alert">
-          <strong class="font-bold">Oops, try again! </strong>
-
           <ul class="block sm:inline">
             <li v-for="[key, value] in errors">
               {{ value.message }}

pages/register.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { ref } from "@vue/reactivity";
 import { registerWithEmail } from "~/composables/useAuth";
-import type {Ref} from "vue"
+import type { Ref } from "vue"
 
 const email: Ref<string> = ref('');
 const password: Ref<string> = ref('');
 const username: Ref<string> = ref('');
 const name: Ref<string> = ref('');
-const errors: Ref<Map<string, { check: InputValidation; }> | undefined> = ref(new Map<string, { check: InputValidation }>())
-let response: Ref<FormValidation|undefined> = ref({ hasErrors: false })
+const errors: Ref<Map<string, { message: InputValidation; }> | undefined> = ref(new Map<string, { message: InputValidation }>())
+let response: FormValidation
 
 async function postRegisterForm() {
-  response.value = await registerWithEmail(username.value, name.value, email.value, password.value);
-  errors.value = response?.value?.errors
+  response = await registerWithEmail(username.value, name.value, email.value, password.value);
+  errors.value = response.errors
+  const test = errors.value
+  debugger
 };
 
 </script>
@@ -34,11 +36,9 @@ async function postRegisterForm() {
         </div>
         <div v-if="response?.hasErrors && errors"
           class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mt-3" role="alert">
-          <strong class="font-bold">Oops, try again! </strong>
-
           <ul class="block sm:inline">
             <li v-for="[key, value] in errors">
-              {{ value.check.errorMessage }}
+              {{ value.message }}
             </li>
           </ul>
         </div>

server/App/formRequests/LoginRequest.ts

@@ -0,0 +1,17 @@
+import { z, parseBodyAs, } from "@sidebase/nuxt-parse"
+import { H3Event } from "h3"
+
+const bodySchema = z.object({
+  usernameOrEmail: z.string({
+    required_error: 'username or email required',
+  })
+    .min(1, { message: 'username or email required' }),
+  password: z.string({
+    required_error: 'password required',
+  })
+    .min(8, { message: 'password must be at least 8 characters' })
+})
+
+export default async function loginRequest(event: H3Event) {
+  return await parseBodyAs(event, bodySchema)
+}

server/App/formRequests/RegisterRequest.ts

@@ -0,0 +1,27 @@
+import { z, parseBodyAs, } from "@sidebase/nuxt-parse"
+import { H3Event } from "h3"
+
+const bodySchema = z.object({
+    username: z.string({
+        required_error: 'username required',
+    })
+        .min(1, { message: 'username required' }),
+
+    name: z.string({
+        required_error: 'name required',
+    })
+        .min(1, { message: 'name required' }),
+
+    email: z.string({
+        required_error: 'valid email required',
+    }).email({ message: 'valid email required' }),
+
+    password: z.string({
+        required_error: 'password required',
+    })
+        .min(8, { message: 'password must be at least 8 characters' })
+})
+
+export default async function registerRequest(event: H3Event) {
+    return await parseBodyAs(event, bodySchema)
+}

server/App/responses/DefaultErrorsResponse.ts

@@ -0,0 +1,7 @@
+import { H3Event } from "h3"
+import { getMappedError } from "~/server/helpers/errorMapper"
+
+export default async function sendDefaultErrorResponse(event: H3Event, erroType: string, error: any) {
+    const parsedErrors = getMappedError(erroType, error)
+    return sendError(event, createError({ statusCode: 422, statusMessage: 'Invalid Data Provided', data: parsedErrors }))
+}

server/App/responses/ZodErrorsResponse.ts

@@ -0,0 +1,7 @@
+import { H3Event } from "h3"
+import { getMappedZodErrors } from "~/server/helpers/errorMapper"
+
+export default async function sendZodErrorRespon(event: H3Event, errorData: any) {
+    const parsedErrors = getMappedZodErrors(errorData)
+    return sendError(event, createError({ statusCode: 422, statusMessage: 'Invalid Data Provided', data: parsedErrors }))
+}

server/api/auth/login.ts

@@ -1,34 +1,21 @@
-import { sanitizeUserForFrontend } from '~~/server/services/userService';
+import { sanitizeUserForFrontend } from '~/server/services/userService';
 import bcrypt from 'bcrypt'
 import { getUserByEmail } from '~/server/database/repositories/userRespository';
 import { sendError, H3Event } from "h3"
-import { makeSession } from '~~/server/services/sessionService';
-import { z, parseBodyAs, } from "@sidebase/nuxt-parse"
+import { makeSession } from '~/server/services/sessionService';
 import { ZodError } from "zod"
-import { getMappedError, getMappedZodErrors } from '~~/server/helpers/errorMapper';
-
-const bodySchema = z.object({
-  usernameOrEmail: z.string({
-    required_error: 'username or email required',
-  })
-    .min(1, { message: 'username or email required' }),
-  password: z.string({
-    required_error: 'password required',
-  })
-    .min(8, { message: 'password must be at least 8 characters' })
-})
-
-type RequestBody = z.infer<typeof bodySchema>
+import { getMappedError } from '~/server/helpers/errorMapper';
+import loginRequest from '~/server/App/formRequests/LoginRequest';
+import sendZodErrorResponse from '~/server/App/responses/ZodErrorsResponse';
+import sendDefaultErrorResponse from '~/server/App/responses/DefaultErrorsResponse';
 
 const standardAuthError = getMappedError('Authentication', 'Invalid Credentials')
 
 export default eventHandler(async (event: H3Event) => {
 
-  let body: RequestBody;
   try {
-    body = await parseBodyAs(event, bodySchema)
-
-    const user = await getUserByEmail(body.usernameOrEmail)
+    const data = await loginRequest(event)
+    const user = await getUserByEmail(data.usernameOrEmail)
 
     if (user === null) {
       return sendError(event, createError({ statusCode: 401, data: standardAuthError }))
@@ -38,7 +25,7 @@ export default eventHandler(async (event: H3Event) => {
       return sendError(event, createError({ statusCode: 401, data: standardAuthError }))
     }
 
-    const isPasswordCorrect = await bcrypt.compare(body.password, user.password)
+    const isPasswordCorrect = await bcrypt.compare(data.password, user.password)
 
     if (!isPasswordCorrect) {
       sendError(event, createError({ statusCode: 401, data: standardAuthError }))
@@ -49,10 +36,9 @@ export default eventHandler(async (event: H3Event) => {
   } catch (error: any) {
 
     if (error.data instanceof ZodError) {
-      const parsedErrors = getMappedZodErrors(error.data)
-      return sendError(event, createError({ statusCode: 422, statusMessage: 'Unauthenticated', data: parsedErrors }))
+      return await sendZodErrorResponse(event, error.data)
     }
 
-    return sendError(event, createError({ statusCode: 500, statusMessage: 'Unauthenticated', data: standardAuthError }))
+    return await sendDefaultErrorResponse(event, 'Unauthenticated', error)
   }
 })

server/api/auth/register.ts

@@ -1,33 +1,43 @@
 import { H3Event, sendError } from 'h3'
 import bcrypt from 'bcrypt'
 import { IUser } from '~/types/IUser';
-import { validateUser } from '~/server/services/userService'
 import { createUser } from '~/server/database/repositories/userRespository'
-import { makeSession } from '~~/server/services/sessionService';
-import { RegistationRequest } from '~~/types/IRegistration'
+import { makeSession } from '~/server/services/sessionService';
+import { ZodError } from "zod"
+import { validateUser } from '~/server/services/userService';
+import sendZodErrorResponse from '~/server/App/responses/ZodErrorsResponse';
+import sendDefaultErrorResponse from '~/server/App/responses/DefaultErrorsResponse';
+import registerRequest from '~/server/App/formRequests/RegisterRequest';
 
-export default eventHandler( async(event: H3Event) => {
-  const body = await readBody(event)
-  const data = body.data as RegistationRequest
+export default eventHandler(async (event: H3Event) => {
+  try {
+    const data = await registerRequest(event)
+    const validation = await validateUser(data)
 
-  const validation = await validateUser(data)
+    if (validation.hasErrors === true && validation.errors) {
+      const errors = JSON.stringify(Object.fromEntries(validation.errors))
+      return sendError(event, createError({ statusCode: 422, data: errors }))
+    }
 
-  if (validation.hasErrors === true) {
-    const errors = JSON.stringify(Object.fromEntries(validation.errors))
-    return sendError(event, createError({ statusCode: 422, data: errors }))
-  }
+    const encryptedPassword: string = await bcrypt.hash(data.password, 10)
 
-  const encryptedPassword: string = await bcrypt.hash(data.password, 10)
+    const userData: IUser = {
+      username: data.username,
+      name: data.name,
+      email: data.email,
+      loginType: 'email',
+      password: encryptedPassword
+    }
 
-  const userData: IUser = {
-    username: data.username,
-    name: data.name,
-    email: data.email,
-    loginType: 'email',
-    password: encryptedPassword
-  }
+    const user = await createUser(userData)
 
-  const user = await createUser(userData)
+    return await makeSession(user, event)
+  } catch (error: any) {
 
-  return await makeSession(user, event)
+    if (error.data instanceof ZodError) {
+      return await sendZodErrorResponse(event, error.data)
+    }
+
+    return await sendDefaultErrorResponse(event, 'oops', error)
+  }
 })

server/helpers/errorMapper.ts

@@ -1,4 +1,4 @@
-export function getMappedZodErrors(zodError: any) {
+export function mapZodError(zodError: any) {
   const errors = new Map<string, { message: string }>()
   JSON.parse(zodError).forEach((zodError: any) => {
     errors.set(zodError.path[0], { 'message': zodError.message })

server/middleware/serverAuth.ts

@@ -1,7 +1,7 @@
 import { H3Event } from "h3"
 import { authCheck } from "../services/userService"
 
-export default defineEventHandler(async (event) => {
+export default eventHandler(async (event) => {
 
  const isAllowed = await protectAuthRoute(event)
 
@@ -18,7 +18,7 @@ async function protectAuthRoute(event: H3Event): Promise<boolean> {
   'api/ask-jack/delete-question'
  ]
 
- if (!protectedRoutes.includes(event.req.url)) {
+ if (!event?.path || !protectedRoutes.includes(event.path)) {
   return true
  }