enhance auth workflow by adding a better error message and by validating the auth payload on server side

client/components/auth/auth.module.css

@@ -18,4 +18,5 @@
 
 .formContentSpace {
   margin-bottom: 1rem;
+  text-align: center;
 }

client/components/auth/index.tsx

@@ -1,14 +1,19 @@
 import { FormEvent, useState } from 'react'
-import { Button, Input, Text, useToasts } from '@geist-ui/core'
+import { Button, Input, Text, useToasts, Note } from '@geist-ui/core'
 import styles from './auth.module.css'
 import { useRouter } from 'next/router'
 import Link from '../Link'
 
+const NO_EMPTY_SPACE_REGEX = /^\S*$/;
+const ERROR_MESSAGE = "Provide a non empty username and a password with at least 6 characters";
+
 const Auth = ({ page }: { page: "signup" | "signin" }) => {
     const router = useRouter();
 
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
+    const [errorMsg, setErrorMsg] = useState('');
+
     const { setToast } = useToasts();
 
     const signingIn = page === 'signin'
@@ -23,6 +28,9 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
     const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault()
 
+        if (!NO_EMPTY_SPACE_REGEX.test(username) || password.length < 6) return setErrorMsg(ERROR_MESSAGE)
+        else setErrorMsg('');
+
         const reqOpts = {
             method: 'POST',
             headers: {
@@ -85,6 +93,7 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
                             </Text>
                         )}
                     </div>
+                    {errorMsg && <Note scale={0.75} type='error'>{errorMsg}</Note>}
                 </form>
             </div>
         </div >

server/src/routes/auth.ts

@@ -1,18 +1,23 @@
 import { Router } from 'express'
-// import { Movie } from '../models/Post'
 import { genSalt, hash, compare } from "bcrypt"
 import { User } from '../../lib/models/User'
 import { sign } from 'jsonwebtoken'
 import config from '../../lib/config'
 import jwt from '../../lib/middleware/jwt'
 
+const NO_EMPTY_SPACE_REGEX = /^\S*$/
+
 export const auth = Router()
 
+const validateAuthPayload = (username: string, password: string): void => {
+    if (!NO_EMPTY_SPACE_REGEX.test(username) || password.length < 6) {
+        throw new Error("Authentication data does not fulfill requirements")
+    }
+}
+
 auth.post('/signup', async (req, res, next) => {
     try {
-        if (!req.body.username || !req.body.password) {
+        validateAuthPayload(req.body.username, req.body.password)
-            throw new Error("Please provide a username and password")
-        }
 
         const username = req.body.username.toLowerCase();
 
@@ -39,9 +44,7 @@ auth.post('/signup', async (req, res, next) => {
 
 auth.post('/signin', async (req, res, next) => {
     try {
-        if (!req.body.username || !req.body.password) {
+        validateAuthPayload(req.body.username, req.body.password)
-            throw new Error("Missing username or password")
-        }
 
         const username = req.body.username.toLowerCase();
         const user = await User.findOne({ where: { username: username } });