enhance auth workflow by adding a better error message and by validating the auth payload on server side
This commit is contained in:
parent
2ba1dd7f26
commit
a361b16293
3 changed files with 22 additions and 9 deletions
|
@ -18,4 +18,5 @@
|
|||
|
||||
.formContentSpace {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
|
@ -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 >
|
||||
|
|
|
@ -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 } });
|
||||
|
|
Loading…
Reference in a new issue