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 ;
@@ -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 (
{
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"}