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 {
|
.formContentSpace {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
text-align: center;
|
||||||
|
}
|
|
@ -1,14 +1,19 @@
|
||||||
import { FormEvent, useState } from 'react'
|
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 styles from './auth.module.css'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import Link from '../Link'
|
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 Auth = ({ page }: { page: "signup" | "signin" }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const [username, setUsername] = useState('');
|
const [username, setUsername] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
|
const [errorMsg, setErrorMsg] = useState('');
|
||||||
|
|
||||||
const { setToast } = useToasts();
|
const { setToast } = useToasts();
|
||||||
|
|
||||||
const signingIn = page === 'signin'
|
const signingIn = page === 'signin'
|
||||||
|
@ -23,6 +28,9 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
|
||||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
||||||
|
if (!NO_EMPTY_SPACE_REGEX.test(username) || password.length < 6) return setErrorMsg(ERROR_MESSAGE)
|
||||||
|
else setErrorMsg('');
|
||||||
|
|
||||||
const reqOpts = {
|
const reqOpts = {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
|
@ -85,6 +93,7 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{errorMsg && <Note scale={0.75} type='error'>{errorMsg}</Note>}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div >
|
</div >
|
||||||
|
|
|
@ -1,18 +1,23 @@
|
||||||
import { Router } from 'express'
|
import { Router } from 'express'
|
||||||
// import { Movie } from '../models/Post'
|
|
||||||
import { genSalt, hash, compare } from "bcrypt"
|
import { genSalt, hash, compare } from "bcrypt"
|
||||||
import { User } from '../../lib/models/User'
|
import { User } from '../../lib/models/User'
|
||||||
import { sign } from 'jsonwebtoken'
|
import { sign } from 'jsonwebtoken'
|
||||||
import config from '../../lib/config'
|
import config from '../../lib/config'
|
||||||
import jwt from '../../lib/middleware/jwt'
|
import jwt from '../../lib/middleware/jwt'
|
||||||
|
|
||||||
|
const NO_EMPTY_SPACE_REGEX = /^\S*$/
|
||||||
|
|
||||||
export const auth = Router()
|
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) => {
|
auth.post('/signup', async (req, res, next) => {
|
||||||
try {
|
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();
|
const username = req.body.username.toLowerCase();
|
||||||
|
|
||||||
|
@ -39,9 +44,7 @@ auth.post('/signup', async (req, res, next) => {
|
||||||
|
|
||||||
auth.post('/signin', async (req, res, next) => {
|
auth.post('/signin', async (req, res, next) => {
|
||||||
try {
|
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 username = req.body.username.toLowerCase();
|
||||||
const user = await User.findOne({ where: { username: username } });
|
const user = await User.findOne({ where: { username: username } });
|
||||||
|
|
Loading…
Reference in a new issue