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

This commit is contained in:
Sebastian Sauerer 2022-03-13 20:57:55 +01:00
parent 2ba1dd7f26
commit a361b16293
3 changed files with 22 additions and 9 deletions

View file

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

View file

@ -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 >

View file

@ -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) {
throw new Error("Please provide a username and password")
}
validateAuthPayload(req.body.username, req.body.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) {
throw new Error("Missing username or password")
}
validateAuthPayload(req.body.username, req.body.password)
const username = req.body.username.toLowerCase();
const user = await User.findOne({ where: { username: username } });