From 6390dcdc10663647f0020ce556dab280468c8e95 Mon Sep 17 00:00:00 2001
From: McAuley Penney <jacobmpenney@gmail.com>
Date: Thu, 16 Mar 2023 15:29:16 -0700
Subject: [PATCH] feat(login-client): hash passwords

When registering a user, hash their password
before committing it to the database. When
logging a user in, hash their password before
comparing it against the database.

Note: Using bcryptjs currently gives compilation
	  warnings. It is not an issue arising from
	  our code. I've used a hack to package.json,
	  found at the link below, as a means of
	  quieting it until the issue is resolved.

https://github.com/facebook/create-react-app/issues/11756#issuecomment-1422741289
---
 package.json              |  1 +
 src/pages/login/login.jsx | 25 +++++++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index f6e5e07d..f93ccf59 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
 	},
 	"proxy": "http://localhost:5000/",
 	"devDependencies": {
+		"crypto": "npm:crypto-browserify@3.12.0",
 		"react-router-dom": "^6.7.0"
 	}
 }
diff --git a/src/pages/login/login.jsx b/src/pages/login/login.jsx
index 1638c9e3..2ce90743 100644
--- a/src/pages/login/login.jsx
+++ b/src/pages/login/login.jsx
@@ -17,6 +17,8 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { LoadingButton } from "@mui/lab"
 import { styled } from '@mui/material/styles';
 
+import bcrypt from 'bcryptjs'
+const salt = bcrypt.genSaltSync();
 
 const Alert = React.forwardRef(function Alert(props, ref) {
 	return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
@@ -30,6 +32,12 @@ const Item = styled(Paper)(({ theme }) => ({
 	color: theme.palette.text.secondary,
 }));
 
+function prepSecureAuthInfo(username, password) {
+	let hash = bcrypt.hashSync(password, salt)
+
+	return { "username": username, "password": hash }
+}
+
 
 function Login() {
 	const navigate = useNavigate();
@@ -53,8 +61,6 @@ function Login() {
 
 	const [showPassword, setShowPassword] = React.useState(true);
 
-	const props = { values, handleChange }
-
 	return (
 		<Grid
 			container
@@ -134,11 +140,14 @@ function Login() {
 							onClick={() => {
 								setLoading("login");
 
-								//  const salt = bcrypt.genSaltSync(0);
-								//  values.password = bcrypt.hashSync(values.password, salt);
+								let authInput = prepSecureAuthInfo(values.username, values.password)
 
 								const attemptLogin = async (values) => {
 									try {
+										// Pass the hash directly into post request instead
+										// of updating the login form state. If we update the
+										// state with the hashed password, it displays it in
+										// the password inpute field.
 										let auth_res = await axios.post(
 											`http://localhost:5000/auth_login/`,
 											values,
@@ -146,6 +155,7 @@ function Login() {
 												withCredentials: true
 											}
 										)
+
 										if (auth_res.status === 200) {
 											navigate("/observation");
 										}
@@ -162,7 +172,7 @@ function Login() {
 									}
 								};
 
-								attemptLogin(props.values);
+								attemptLogin(authInput);
 							}}
 							loadingPosition="center"
 							loading={isLoading === "login"}
@@ -177,6 +187,9 @@ function Login() {
 							type="submit"
 							onClick={() => {
 								setLoading("registration");
+
+								let authInput = prepSecureAuthInfo(values.username, values.password)
+
 								const attemptRegistration = async (values) => {
 									try {
 
@@ -208,7 +221,7 @@ function Login() {
 									}
 								};
 
-								attemptRegistration(props.values);
+								attemptRegistration(authInput);
 							}}
 							loadingPosition="center"
 							loading={isLoading === "registration"}