Add more verification to sign up

app/api/src/functions/check-user-name/check-user-name.ts

@@ -0,0 +1,40 @@
+import type { APIGatewayEvent, Context } from 'aws-lambda'
+import { logger } from 'src/lib/logger'
+import { db } from 'src/lib/db'
+
+/**
+ * The handler function is your code that processes http request events.
+ * You can use return and throw to send a response or error, respectively.
+ *
+ * Important: When deployed, a custom serverless function is an open API endpoint and
+ * is your responsibility to secure appropriately.
+ *
+ * @see {@link https://redwoodjs.com/docs/serverless-functions#security-considerations|Serverless Function Considerations}
+ * in the RedwoodJS documentation for more information.
+ *
+ * @typedef { import('aws-lambda').APIGatewayEvent } APIGatewayEvent
+ * @typedef { import('aws-lambda').Context } Context
+ * @param { APIGatewayEvent } event - an object which contains information from the invoker.
+ * @param { Context } context - contains information about the invocation,
+ * function, and execution environment.
+ */
+export const handler = async (event: APIGatewayEvent, context: Context) => {
+  logger.info('Invoked checkUserName function')
+  const userName = event.queryStringParameters.username
+  let isUserNameAvailable = false
+  try {
+    const user = await db.user.findUnique({ where: { userName } })
+    isUserNameAvailable = !user
+  } catch (error) {
+    isUserNameAvailable = false
+  }
+  return {
+    statusCode: 200,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      isUserNameAvailable,
+    }),
+  }
+}

app/api/src/services/users/users.ts

@@ -7,7 +7,7 @@ import type { Prisma } from '@prisma/client'
 import { ForbiddenError } from '@redwoodjs/api'
 
 function userNameVerification(userName: string): string {
-  if (userName.length < 6) {
+  if (userName.length < 5) {
     throw new ForbiddenError('userName too short')
   }
   if (userName && ['new', 'edit', 'update'].includes(userName)) {

app/web/src/components/LoginModal/LoginModal.tsx

@@ -35,6 +35,13 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
       if (checkBox) {
         subscribe({ email, addMessage: (msg) => toast.error(msg), name })
       }
+      const { isUserNameAvailable } = await fetch(
+        `/.netlify/functions/check-user-name?username=${userName}`
+      ).then((res) => res.json())
+      if (!isUserNameAvailable) {
+        setError('UserName is already taken, please try something else')
+        return
+      }
       await signUp({
         email,
         password,
@@ -167,6 +174,10 @@ const SignUpForm = ({ onSubmitSignUp, checkBox, setCheckBox, onClose }) => (
               value: /^[a-zA-Z0-9-_]+$/,
               message: 'Only alphanumeric and dash characters allowed',
             },
+            minLength: {
+              value: 5,
+              message: 'Not enough Characters',
+            },
           }}
         />
         <Field