FF-404 add password preHashing with sha (we will hash again in the Backend) (#159)

* add password preHashin with sha (we will hash again in the Backedn)

* add reference

* [CodeFactor] Apply fixes to commit 61a4df8

* add a static salt before hashing

* make hashed password HEX code uppercase

Co-authored-by: codefactor-io <[email protected]>

Author: qvalentin

src/background/api/auth.ts

@@ -13,6 +13,7 @@ import {
 import { AccessToken, CookieStatus } from "../redux/actions/tokenTypes";
 import { deleteCookie, getCookie, setCookie } from "../methods/cookies";
 import {updateUser} from "../redux/actions/user";
+import {hashPassword} from "../methods/passwords";
 
 // reference: https://daveceddia.com/access-redux-store-outside-react/
 
@@ -40,16 +41,17 @@ export const checkForCookie = () => {
   }
 };
 
-export const loginWithUsernameAndPassword = (
+export const  loginWithUsernameAndPassword = async (
   userName: string,
   password: string,
   stayLoggedIn: boolean
 ): Promise<BackendLoginData> => {
-  console.log("[Auth] loginWithUsernameAndPassword", userName, password);
+  console.log("[Auth] loginWithUsernameAndPassword", userName);
+  let hashed = await hashPassword(password);
   return new Promise<BackendLoginData>((resolve, reject) => {
     let config = {
       headers: {
-        Authorization: `Basic ${btoa(userName + ":" + password)}`
+        Authorization: `Basic ${btoa(userName + ":" + hashed)}`
       }
     };
 

src/background/api/registration.ts

@@ -1,19 +1,25 @@
 import Axios, {AxiosError, AxiosResponse} from "axios";
 import {hostname, userPath} from "./api";
+import {hashPassword} from "../methods/passwords";
 
 export interface IRegisterServerResponse {
     httpStatus: number,
     httpMessage: string
     outputMessage?: string
 }
 
-export const registerNewUser = (username: string, password: string, passwordConfirmation: string): Promise<IRegisterServerResponse> => {
+export const registerNewUser = async (username: string, password: string, passwordConfirmation: string): Promise<IRegisterServerResponse> => {
+
+    if (password !== passwordConfirmation){
+        throw new Error("Password did not match passwordConfirmation");
+    }
+    let hashedPassword = await hashPassword(password);
 
     return new Promise((resolve, reject) => {
         const newUser = {
             username: username,
-            password: password,
-            confirmationPassword: passwordConfirmation
+            password: hashedPassword,
+            confirmationPassword: hashedPassword
         }
 
 

src/background/methods/passwords.ts

@@ -0,0 +1,12 @@
+//see: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest
+
+async function hashPassword(password: string) {
+    const msgUint8 = new TextEncoder().encode(password +  "FileFighterWithSomeSalt"); // encode as (utf-8) Uint8Array
+    const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
+    const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
+    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+    return hashHex.toUpperCase();
+}
+
+export {hashPassword}
+

src/components/pages/User/Profile.tsx

@@ -7,6 +7,7 @@ import {DEFAULT_ALERT_DURATION, MIN_PASSWORD_LENGTH} from "../../../background/c
 import {changeUserInformation, UserInformation} from "../../../background/api/userInformation";
 import {notMinStrLength} from "../../../background/methods/checkInput";
 import edit_svg from "../../../assets/images/icons/material.io/edit_white_24dp.svg";
+import {hashPassword} from "../../../background/methods/passwords";
 
 
 export default function Profile(): ReactElement {
@@ -52,8 +53,8 @@ export default function Profile(): ReactElement {
                 handleAlertVisibility(DEFAULT_ALERT_DURATION, "danger", "Error: Please pay attention to the notes below the input fields.")
                 return;
             }
-            newUser["password"] = inputUser.password
-            newUser["confirmationPassword"] = inputUser.passwordConfirmation
+            newUser["password"] = await hashPassword(inputUser.password);
+            newUser["confirmationPassword"] = newUser["password"];
         }
 
         await changeUserInformation(newUser)