Merge pull request #339 from Infisical/mfa

MFA

frontend/src/components/login/LoginStep.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import Button from '@app/components/basic/buttons/Button';
+import Error from '@app/components/basic/Error';
+import InputField from '@app/components/basic/InputField';
+import attemptLogin from '@app/components/utilities/attemptLogin';
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+
+/**
+ * 1st step of login - user enters their username and password
+ * @param {Object} obj
+ * @param {String} obj.email - email of user
+ * @param {Function} obj.setEmail - function to set the email of user
+ * @param {String} obj.password - password of user
+ * @param {String} obj.setPassword - function to set the password of user
+ * @param {Function} obj.setStep - function to set the login flow step
+ * @returns
+ */
+export default function LoginStep ({
+    email,
+    setEmail,
+    password,
+    setPassword,
+    setStep
+}: {
+    email: string;
+    setEmail: (email: string) => void;
+    password: string;
+    setPassword: (password: string) => void;
+    setStep: (step: number) => void;
+}) {
+    const router = useRouter();
+    const [isLoading, setIsLoading] = useState(false);
+    const [loginError, setLoginError] = useState(false);
+
+    const { t } = useTranslation();
+
+    const handleLogin = async () => {
+        try {
+            if (!email || !password) {
+                return;
+            }
+                        
+            setIsLoading(true); 
+            const isLoginSuccessful = await attemptLogin(email, password);
+            if (isLoginSuccessful && isLoginSuccessful.success) {
+                // case: login was successful
+
+                if (isLoginSuccessful.mfaEnabled) {
+                    // case: login requires MFA step
+                    setStep(2);
+                    setIsLoading(false);
+                    return;
+                }
+
+                // case: login does not require MFA step
+                router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
+            }
+
+        } catch (err) {
+            setLoginError(true);
+        }
+        
+        setIsLoading(false);
+    }
+
+    return (
+        <form onSubmit={(e) => e.preventDefault()}>
+            <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
+            <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
+                {t('login:login')}
+            </p>
+            <div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
+                <InputField
+                label={t('common:email')}
+                onChangeHandler={setEmail}
+                type="email"
+                value={email}
+                placeholder=""
+                isRequired
+                autoComplete="username"
+                />
+            </div>
+            <div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
+                <InputField
+                label={t('common:password')}
+                onChangeHandler={setPassword}
+                type="password"
+                value={password}
+                placeholder=""
+                isRequired
+                autoComplete="current-password"
+                id="current-password"
+                />
+                <div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
+                <Link href="/verify-email">
+                    <button
+                    type="button"
+                    className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5"
+                    >
+                    {t('login:forgot-password')}
+                    </button>
+                </Link>
+                </div>
+            </div>
+            {!isLoading && loginError && <Error text={t('login:error-login') ?? ''} />}
+            <div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
+                <div className="text-l mt-6 m-8 px-8 py-3 text-lg">
+                <Button
+                    type="submit"
+                    text={t('login:login') ?? ''}
+                    onButtonPressed={async () => handleLogin()}
+                    loading={isLoading}
+                    size="lg"
+                />
+                </div>
+            </div>
+            </div>
+            {false && (
+            <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
+                <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
+                {t('common:maintenance-alert')}
+            </div>
+            )}
+            <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
+            <p className="text-sm flex justify-center text-gray-400 w-max">
+                {t('login:need-account')}
+            </p>
+            <Link href="/signup">
+                <button
+                type="button"
+                className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5"
+                >
+                {t('login:create-account')}
+                </button>
+            </Link>
+            </div>
+        </form>
+    );
+}
+
+export const getStaticProps = getTranslatedStaticProps(['auth', 'login']);

frontend/src/components/login/MFAStep.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useState } from 'react';
+import ReactCodeInput from 'react-code-input';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+
+import attemptLoginMfa from '@app/components/utilities/attemptLoginMfa';
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+import { useSendMfaToken } from '@app/hooks/api/auth';
+
+import Button from '../basic/buttons/Button';
+import Error from '../basic/Error';
+
+// The style for the verification code input
+const props = {
+  inputStyle: {
+    fontFamily: 'monospace',
+    margin: '4px',
+    MozAppearance: 'textfield',
+    width: '55px',
+    borderRadius: '5px',
+    fontSize: '24px',
+    height: '55px',
+    paddingLeft: '7',
+    backgroundColor: '#0d1117',
+    color: 'white',
+    border: '1px solid #2d2f33',
+    textAlign: 'center',
+    outlineColor: '#8ca542',
+    borderColor: '#2d2f33'
+  }
+} as const;
+
+interface VerifyMfaTokenError {
+  response: {
+    data: {
+      context: {
+        code: string;
+        triesLeft: number;
+      }
+    },
+    status: number;
+  }
+}
+
+/**
+ * 2nd step of login - users enter their MFA code
+ * @param {Object} obj
+ * @param {String} obj.email - email of user
+ * @param {String} obj.password - password of user
+ * @param {Function} obj.setStep - function to set the login flow step
+ * @returns
+ */
+export default function MFAStep({
+  email,
+  password
+}: {
+  email: string;
+  password: string;
+}): JSX.Element {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [mfaCode, setMfaCode] = useState('');
+  const [triesLeft, setTriesLeft] = useState<number | undefined>(undefined);
+
+  const { t } = useTranslation();
+
+  const sendMfaToken = useSendMfaToken();
+
+  const handleLoginMfa = async () => {
+    try {
+      if (mfaCode.length !== 6) {
+        return;
+      }
+      
+      setIsLoading(true);
+      const isLoginSuccessful = await attemptLoginMfa({
+        email,
+        password,
+        mfaToken: mfaCode
+      });
+
+      if (isLoginSuccessful) {
+        setIsLoading(false);
+        router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
+      }
+      
+    } catch (err) {
+      const error = err as VerifyMfaTokenError;
+      
+      if (error?.response?.status === 500) {
+        window.location.reload();
+      } else if (error?.response?.data?.context?.triesLeft) {
+        setTriesLeft(error?.response?.data?.context?.triesLeft);
+        if (error.response.data.context.triesLeft === 0) {
+          window.location.reload();
+        }
+      }
+
+      setIsLoading(false);
+    }
+  }
+  
+  const handleResendMfaCode = async () => {
+    try {
+      await sendMfaToken.mutateAsync({ email });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  return (
+    <form className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
+      <p className="text-l flex justify-center text-bunker-300">{t('mfa:step2-message')}</p>
+      <p className="text-l flex justify-center font-semibold my-2 text-bunker-300">{email} </p>
+      <div className="hidden md:block">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setMfaCode}
+          {...props}
+          className="mt-6 mb-2"
+        />
+      </div>
+      {typeof triesLeft === 'number' && <Error text={`${t('mfa:step2-code-error')} ${triesLeft}`} />}
+      <div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
+        <Button
+          text={t('mfa:verify') ?? ''} 
+          onButtonPressed={() => handleLoginMfa()} 
+          size="lg" 
+        />
+      </div>
+      <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
+        <div className="flex flex-row items-baseline gap-1 text-sm">
+          <span className="text-bunker-400">{t('mfa:step2-resend-alert')}</span>
+          <u
+            className={`font-normal ${
+              isLoading
+                ? 'text-bunker-400'
+                : 'text-primary-700 hover:text-primary duration-200'
+            }`}
+          >
+            <button disabled={isLoading} onClick={() => handleResendMfaCode()} type="button">
+              {isLoading
+                ? t('mfa:step2-resend-progress')
+                : t('mfa:step2-resend-submit')}
+            </button>
+          </u>
+        </div>
+        <p className="text-sm text-bunker-400 pb-2">{t('mfa:step2-spam-alert')}</p>
+      </div>
+    </form>
+  );
+}
+
+export const getStaticProps = getTranslatedStaticProps(['auth', 'mfa']);

frontend/src/components/navigation/NavBarDashboard.tsx

@@ -87,7 +87,6 @@ export default function Navbar() {
   }, []);
 
   const closeApp = async () => {
-    console.log('Logging out...');
     await logout();
     router.push('/login');
   };

frontend/src/components/signup/DonwloadBackupPDFStep.tsx

@@ -31,7 +31,7 @@ export default function DonwloadBackupPDFStep({
 
   return (
     <div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
-      <p className="text-4xl text-center font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
+      <p className="text-4xl text-center font-semibold flex justify-center text-primary">
         {t('signup:step4-message')}
       </p>
       <div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
@@ -42,7 +42,7 @@ export default function DonwloadBackupPDFStep({
         <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
         {t('signup:step4-description3')}
       </div>
-      <div className="flex flex-col items-center justify-center md:px-4 md:py-5 mt-2 px-2 py-3 max-h-24 max-w-max mx-auto text-lg">
+      <div className="flex flex-col items-center justify-center md:px-4 md:py-5 mt-4 px-2 py-3 max-h-24 max-w-max mx-auto text-lg">
         <Button
           text="Download PDF"
           onButtonPressed={async () => {

frontend/src/components/signup/UserInfoStep.tsx

@@ -1,5 +1,6 @@
+import crypto from 'crypto';
+
 import React, { useState } from 'react';
-import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -8,18 +9,21 @@ import nacl from 'tweetnacl';
 import { encodeBase64 } from 'tweetnacl-util';
 
 import completeAccountInformationSignup from '@app/pages/api/auth/CompleteAccountInformationSignup';
+import getOrganizations from '@app/pages/api/organization/getOrgs';
+import ProjectService from '@app/services/ProjectService';
 
 import Button from '../basic/buttons/Button';
 import InputField from '../basic/InputField';
-import attemptLogin from '../utilities/attemptLogin';
 import passwordCheck from '../utilities/checks/PasswordCheck';
 import Aes256Gcm from '../utilities/cryptography/aes-256-gcm';
+import { deriveArgonKey } from '../utilities/cryptography/crypto';
+import { saveTokenToLocalStorage } from '../utilities/saveTokenToLocalStorage';
+import SecurityClient from '../utilities/SecurityClient';
 
 // eslint-disable-next-line new-cap
 const client = new jsrp.client();
 
 interface UserInfoStepProps {
-  verificationToken: string;
   incrementStep: () => void;
   email: string;
   password: string;
@@ -44,7 +48,6 @@ interface UserInfoStepProps {
  * @param {string} obj.setLastName - function managing the state of user's last name
  */
 export default function UserInfoStep({
-  verificationToken,
   incrementStep,
   email,
   password,
@@ -62,7 +65,6 @@ export default function UserInfoStep({
 
   const [isLoading, setIsLoading] = useState(false);
   const { t } = useTranslation();
-  const router = useRouter();
 
   // Verifies if the information that the users entered (name, workspace)
   // is there, and if the password matches the criteria.
@@ -94,17 +96,9 @@ export default function UserInfoStep({
       const pair = nacl.box.keyPair();
       const secretKeyUint8Array = pair.secretKey;
       const publicKeyUint8Array = pair.publicKey;
-      const PRIVATE_KEY = encodeBase64(secretKeyUint8Array);
-      const PUBLIC_KEY = encodeBase64(publicKeyUint8Array);
-
-      const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
-        text: PRIVATE_KEY,
-        secret: password
-          .slice(0, 32)
-          .padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), '0')
-      }) as { ciphertext: string; iv: string; tag: string };
-
-      localStorage.setItem('PRIVATE_KEY', PRIVATE_KEY);
+      const privateKey = encodeBase64(secretKeyUint8Array);
+      const publicKey = encodeBase64(publicKeyUint8Array);
+      localStorage.setItem('PRIVATE_KEY', privateKey);
 
       client.init(
         {
@@ -113,35 +107,90 @@ export default function UserInfoStep({
         },
         async () => {
           client.createVerifier(async (err: any, result: { salt: string; verifier: string }) => {
-            const response = await completeAccountInformationSignup({
-              email,
-              firstName,
-              lastName,
-              organizationName: `${firstName}'s organization`,
-              publicKey: PUBLIC_KEY,
-              ciphertext,
-              iv,
-              tag,
-              salt: result.salt,
-              verifier: result.verifier,
-              token: verificationToken
-            });
+            try {
 
-            // if everything works, go the main dashboard page.
-            if (response.status === 200) {
-              // response = await response.json();
+              // TODO: moduralize into KeyService
+              const derivedKey = await deriveArgonKey({
+                password,
+                salt: result.salt,
+                mem: 65536,
+                time: 3,
+                parallelism: 1,
+                hashLen: 32
+              });
+              
+              if (!derivedKey) throw new Error('Failed to derive key from password');
 
-              localStorage.setItem('publicKey', PUBLIC_KEY);
-              localStorage.setItem('encryptedPrivateKey', ciphertext);
-              localStorage.setItem('iv', iv);
-              localStorage.setItem('tag', tag);
+              const key = crypto.randomBytes(32);
+             
+              // create encrypted private key by encrypting the private
+              // key with the symmetric key [key]
+              const {
+                ciphertext: encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag
+              } = Aes256Gcm.encrypt({
+                text: privateKey,
+                secret: key
+              });
+              
+              // create the protected key by encrypting the symmetric key
+              // [key] with the derived key
+              const {
+                ciphertext: protectedKey,
+                iv: protectedKeyIV,
+                tag: protectedKeyTag
+              } = Aes256Gcm.encrypt({
+                text: key.toString('hex'),
+                secret: Buffer.from(derivedKey.hash)
+              });
+              
+              const response = await completeAccountInformationSignup({
+                email,
+                firstName,
+                lastName,
+                protectedKey,
+                protectedKeyIV,
+                protectedKeyTag,
+                publicKey,
+                encryptedPrivateKey,
+                encryptedPrivateKeyIV,
+                encryptedPrivateKeyTag,
+                salt: result.salt,
+                verifier: result.verifier,
+                organizationName: `${firstName}'s organization`
+              });
+              
+              // unset signup JWT token and set JWT token
+              SecurityClient.setSignupToken('');
+              SecurityClient.setToken(response.token);
 
-              try {
-                await attemptLogin(email, password, () => {}, router, true, false);
-                incrementStep();
-              } catch (error) {
-                setIsLoading(false);
-              }
+              saveTokenToLocalStorage({
+                protectedKey,
+                protectedKeyIV,
+                protectedKeyTag,
+                publicKey,
+                encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag,
+                privateKey
+              });
+
+              const userOrgs = await getOrganizations();
+              const orgId = userOrgs[0]?._id;
+              const project = await ProjectService.initProject({
+                organizationId: orgId,
+                projectName: 'Example Project'
+              });
+
+              localStorage.setItem('orgData.id', orgId);
+              localStorage.setItem('projectData.id', project._id);
+
+              incrementStep();
+
+            } catch (error) {
+              setIsLoading(false);
+              console.error(error);
             }
           });
         }
@@ -153,7 +202,7 @@ export default function UserInfoStep({
 
   return (
     <div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
-      <p className="text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
+      <p className="text-4xl font-bold flex justify-center mb-6 mx-8 md:mx-16 text-primary">
         {t('signup:step3-message')}
       </p>
       <div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
@@ -258,4 +307,4 @@ export default function UserInfoStep({
       </div>
     </div>
   );
-}
+}

frontend/src/components/utilities/SecurityClient.ts

@@ -1,7 +1,19 @@
-import { getAuthToken, setAuthToken } from '@app/reactQuery';
+import {
+  getAuthToken, 
+  setAuthToken,
+  setMfaTempToken,
+  setSignupTempToken} from '@app/reactQuery';
 
 // depreciated: go for apiRequest module in config/api
 export default class SecurityClient {
+  static setSignupToken(tokenStr: string) {
+    setSignupTempToken(tokenStr);
+  }
+
+  static setMfaToken(tokenStr: string) {
+    setMfaTempToken(tokenStr);
+  }
+
   static setToken(tokenStr: string) {
     setAuthToken(tokenStr);
   }

frontend/src/components/utilities/attemptLogin.ts

@@ -1,20 +1,12 @@
 /* eslint-disable prefer-destructuring */
-import crypto from 'crypto';
-
 import jsrp from 'jsrp';
-import { SecretDataProps } from 'public/data/frequentInterfaces';
 
-import Aes256Gcm from '@app/components/utilities/cryptography/aes-256-gcm';
 import login1 from '@app/pages/api/auth/Login1';
 import login2 from '@app/pages/api/auth/Login2';
-import addSecrets from '@app/pages/api/files/AddSecrets';
 import getOrganizations from '@app/pages/api/organization/getOrgs';
 import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
-import getUser from '@app/pages/api/user/getUser';
-import uploadKeys from '@app/pages/api/workspace/uploadKeys';
+import KeyService from '@app/services/KeyService';
 
-import { encryptAssymmetric } from './cryptography/crypto';
-import encryptSecrets from './secrets/encryptSecrets';
 import Telemetry from './telemetry/Telemetry';
 import { saveTokenToLocalStorage } from './saveTokenToLocalStorage';
 import SecurityClient from './SecurityClient';
@@ -22,212 +14,130 @@ import SecurityClient from './SecurityClient';
 // eslint-disable-next-line new-cap
 const client = new jsrp.client();
 
+interface IsLoginSuccessful {
+  mfaEnabled: boolean;
+  success: boolean;
+}
+
 /**
- * This function logs in the user (whether it's right after signup, or a normal login)
- * @param {string} email - email of the user logging in
- * @param {string} password - password of the user logging in
- * @param {function} setErrorLogin - function that visually dispay an error is something is wrong
- * @param {*} router
- * @param {boolean} isSignUp - whether this log in is a part of signup
- * @param {boolean} isLogin - ?
- * @returns
+ * Return whether or not login is successful for user with email [email]
+ * and password [password]
+ * @param {string} email - email of user to log in
+ * @param {string} password - password of user to log in
  */
 const attemptLogin = async (
   email: string,
-  password: string,
-  setErrorLogin: (value: boolean) => void,
-  router: any,
-  isSignUp: boolean,
-  isLogin: boolean
-) => {
-  try {
-    const telemetry = new Telemetry().getInstance();
-
+  password: string
+): Promise<IsLoginSuccessful> => {
+  const telemetry = new Telemetry().getInstance();
+  return new Promise((resolve, reject) => {
     client.init(
       {
         username: email,
         password
       },
       async () => {
-        const clientPublicKey = client.getPublicKey();
-
         try {
+          const clientPublicKey = client.getPublicKey();
           const { serverPublicKey, salt } = await login1(email, clientPublicKey);
 
           client.setSalt(salt);
           client.setServerPublicKey(serverPublicKey);
           const clientProof = client.getProof(); // called M1
-
-          // if everything works, go the main dashboard page.
-          const { token, publicKey, encryptedPrivateKey, iv, tag } = await login2(
+          
+          const {
+            mfaEnabled,
+            encryptionVersion,
+            protectedKey,
+            protectedKeyIV,
+            protectedKeyTag,
+            token, 
+            publicKey, 
+            encryptedPrivateKey, 
+            iv, 
+            tag 
+          } = await login2(
             email,
             clientProof
           );
+          
+          if (mfaEnabled) {
+            // case: MFA is enabled
 
-          SecurityClient.setToken(token);
+            // set temporary (MFA) JWT token
+            SecurityClient.setMfaToken(token);
 
-          const privateKey = Aes256Gcm.decrypt({
-            ciphertext: encryptedPrivateKey,
-            iv,
-            tag,
-            secret: password
-              .slice(0, 32)
-              .padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), '0')
-          });
-
-          saveTokenToLocalStorage({
-            publicKey,
-            encryptedPrivateKey,
-            iv,
-            tag,
-            privateKey
-          });
-
-          const userOrgs = await getOrganizations();
-          const userOrgsData = userOrgs.map((org: { _id: string }) => org._id);
-
-          let orgToLogin;
-          if (userOrgsData.includes(localStorage.getItem('orgData.id'))) {
-            orgToLogin = localStorage.getItem('orgData.id');
-          } else {
-            orgToLogin = userOrgsData[0];
-            localStorage.setItem('orgData.id', orgToLogin);
-          }
-
-          let orgUserProjects = await getOrganizationUserProjects({
-            orgId: orgToLogin
-          });
-
-          orgUserProjects = orgUserProjects?.map((project: { _id: string }) => project._id);
-          let projectToLogin;
-          if (orgUserProjects.includes(localStorage.getItem('projectData.id'))) {
-            projectToLogin = localStorage.getItem('projectData.id');
-          } else {
-            try {
-              projectToLogin = orgUserProjects[0];
-              localStorage.setItem('projectData.id', projectToLogin);
-            } catch (error) {
-              console.log('ERROR: User likely has no projects. ', error);
-            }
-          }
-
-          if (email) {
-            telemetry.identify(email);
-            telemetry.capture('User Logged In');
-          }
-
-          if (isSignUp) {
-            const randomBytes = crypto.randomBytes(16).toString('hex');
-            const PRIVATE_KEY = String(localStorage.getItem('PRIVATE_KEY'));
-
-            const myUser = await getUser();
-
-            const { ciphertext, nonce } = encryptAssymmetric({
-              plaintext: randomBytes,
-              publicKey: myUser.publicKey,
-              privateKey: PRIVATE_KEY
-            }) as { ciphertext: string; nonce: string };
-
-            await uploadKeys(projectToLogin, myUser._id, ciphertext, nonce);
-
-            const secretsToBeAdded: SecretDataProps[] = [
-              {
-                pos: 0,
-                key: 'DATABASE_URL',
-                // eslint-disable-next-line no-template-curly-in-string
-                value: 'mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net',
-                valueOverride: undefined,
-                comment: 'Secret referencing example',
-                id: '',
-                tags: []
-              },
-              {
-                pos: 1,
-                key: 'DB_USERNAME',
-                value: 'OVERRIDE_THIS',
-                valueOverride: undefined,
-                comment:
-                  'Override secrets with personal value',
-                id: '',
-                tags: []
-              },
-              {
-                pos: 2,
-                key: 'DB_PASSWORD',
-                value: 'OVERRIDE_THIS',
-                valueOverride: undefined,
-                comment:
-                  'Another secret override',
-                id: '',
-                tags: []
-              },
-              {
-                pos: 3,
-                key: 'DB_USERNAME',
-                value: 'user1234',
-                valueOverride: 'user1234',
-                comment: '',
-                id: '',
-                tags: []
-              },
-              {
-                pos: 4,
-                key: 'DB_PASSWORD',
-                value: 'example_password',
-                valueOverride: 'example_password',
-                comment: '',
-                id: '',
-                tags: []
-              },
-              {
-                pos: 5,
-                key: 'TWILIO_AUTH_TOKEN',
-                value: 'example_twillio_token',
-                valueOverride: undefined,
-                comment: '',
-                id: '',
-                tags: []
-              },
-              {
-                pos: 6,
-                key: 'WEBSITE_URL',
-                value: 'http://localhost:3000',
-                valueOverride: undefined,
-                comment: '',
-                id: '',
-                tags: []
-              }
-            ];
-            const secrets = await encryptSecrets({
-              secretsToEncrypt: secretsToBeAdded,
-              workspaceId: String(localStorage.getItem('projectData.id')),
-              env: 'dev'
+            resolve({
+              mfaEnabled,
+              success: true
             });
-            await addSecrets({
-              secrets: secrets ?? [],
-              env: 'dev',
-              workspaceId: String(localStorage.getItem('projectData.id'))
+          } else if (
+            !mfaEnabled &&
+            encryptionVersion &&
+            encryptedPrivateKey &&
+            iv &&
+            tag &&
+            token
+          ) {
+            // case: MFA is not enabled
+            
+            // set JWT token
+            SecurityClient.setToken(token);
+            
+            const privateKey = await KeyService.decryptPrivateKey({
+              encryptionVersion,
+              encryptedPrivateKey,
+              iv,
+              tag,
+              password,
+              salt,
+              protectedKey,
+              protectedKeyIV,
+              protectedKeyTag
+            });
+
+            saveTokenToLocalStorage({
+              protectedKey,
+              protectedKeyIV,
+              protectedKeyTag,
+              publicKey,
+              encryptedPrivateKey,
+              iv,
+              tag,
+              privateKey
+            });
+            
+            // TODO: in the future - move this logic elsewhere
+            // because this function is about logging the user in
+            // and not initializing the login details
+            const userOrgs = await getOrganizations(); 
+            const orgId = userOrgs[0]._id;
+            localStorage.setItem('orgData.id', orgId);
+            
+            const orgUserProjects = await getOrganizationUserProjects({
+              orgId
+            });
+            
+            if (orgUserProjects.length > 0) {
+              localStorage.setItem('projectData.id', orgUserProjects[0]._id);
+            }
+
+            if (email) {
+              telemetry.identify(email);
+              telemetry.capture('User Logged In');
+            }
+            
+            resolve({
+              mfaEnabled: false,
+              success: true
             });
           }
-
-          if (isLogin) {
-            if (localStorage.getItem('projectData.id') !== "undefined") {
-              router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
-            } else {
-              router.push("/noprojects");
-            }
-          }
-        } catch (error) {
-          console.log(error);
-          setErrorLogin(true);
-          console.log('Login response not available');
+        } catch (err) {
+          reject(err);
         }
       }
     );
-  } catch (error) {
-    console.log('Something went wrong during authentication');
-  }
-  return true;
+  });
 };
 
-export default attemptLogin;
+export default attemptLogin;

frontend/src/components/utilities/attemptLoginMfa.ts

@@ -0,0 +1,103 @@
+/* eslint-disable prefer-destructuring */
+import jsrp from 'jsrp';
+
+import login1 from '@app/pages/api/auth/Login1';
+import verifyMfaToken from '@app/pages/api/auth/verifyMfaToken';
+import getOrganizations from '@app/pages/api/organization/getOrgs';
+import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
+import KeyService from '@app/services/KeyService';
+
+import { saveTokenToLocalStorage } from './saveTokenToLocalStorage';
+import SecurityClient from './SecurityClient';
+
+// eslint-disable-next-line new-cap
+const client = new jsrp.client();
+
+/**
+ * Return whether or not MFA-login is successful for user with email [email]
+ * and MFA token [mfaToken]
+ * @param {Object} obj
+ * @param {String} obj.email - email of user
+ * @param {String} obj.mfaToken - MFA code/token
+ */
+const attemptLoginMfa = async ({
+    email,
+    password,
+    mfaToken
+}: {
+    email: string;
+    password: string;
+    mfaToken: string;
+}): Promise<Boolean> => {
+    return new Promise((resolve, reject) => {
+        client.init({
+            username: email,
+            password
+        }, async () => {
+            try {
+                const clientPublicKey = client.getPublicKey();
+                const { salt } = await login1(email, clientPublicKey);
+                
+                const {
+                    encryptionVersion,
+                    protectedKey,
+                    protectedKeyIV,
+                    protectedKeyTag,
+                    token, 
+                    publicKey, 
+                    encryptedPrivateKey, 
+                    iv, 
+                    tag
+                } = await verifyMfaToken({
+                    email,
+                    mfaToken
+                });
+
+                // unset temporary (MFA) JWT token and set JWT token
+                SecurityClient.setMfaToken('');
+                SecurityClient.setToken(token);
+
+                const privateKey = await KeyService.decryptPrivateKey({
+                    encryptionVersion,
+                    encryptedPrivateKey,
+                    iv,
+                    tag,
+                    password,
+                    salt,
+                    protectedKey,
+                    protectedKeyIV,
+                    protectedKeyTag
+                });
+                
+                saveTokenToLocalStorage({
+                    protectedKey,
+                    protectedKeyIV,
+                    protectedKeyTag,
+                    publicKey,
+                    encryptedPrivateKey,
+                    iv,
+                    tag,
+                    privateKey
+                });
+
+                // TODO: in the future - move this logic elsewhere
+                // because this function is about logging the user in
+                // and not initializing the login details
+                const userOrgs = await getOrganizations(); 
+                const orgId = userOrgs[0]._id;
+                localStorage.setItem('orgData.id', orgId);
+
+                const orgUserProjects = await getOrganizationUserProjects({
+                orgId
+                });
+                localStorage.setItem('projectData.id', orgUserProjects[0]._id);
+
+                resolve(true);
+            } catch (err) {
+                reject(err);
+            }
+        });
+    });
+}
+
+export default attemptLoginMfa;

frontend/src/components/utilities/cryptography/aes-256-gcm.ts

@@ -9,14 +9,14 @@ const BLOCK_SIZE_BYTES = 16; // 128 bit
 
 interface EncryptProps {
   text: string;
-  secret: string;
+  secret: string | Buffer;
 }
 
 interface DecryptProps {
   ciphertext: string;
   iv: string;
   tag: string;
-  secret: string;
+  secret: string | Buffer;
 }
 
 interface EncryptOutputProps {

frontend/src/components/utilities/cryptography/changePassword.ts

@@ -1,14 +1,20 @@
 /* eslint-disable new-cap */
+import crypto from 'crypto';
+
 import jsrp from 'jsrp';
 
 import changePassword2 from '@app/pages/api/auth/ChangePassword2';
 import SRP1 from '@app/pages/api/auth/SRP1';
 
+import { saveTokenToLocalStorage } from '../saveTokenToLocalStorage';
 import Aes256Gcm from './aes-256-gcm';
+import { deriveArgonKey } from './crypto';
 
 const clientOldPassword = new jsrp.client();
 const clientNewPassword = new jsrp.client();
 
+// TODO: modify this function
+
 /**
  * This function loggs in the user (whether it's right after signup, or a normal login)
  * @param {*} email
@@ -63,43 +69,75 @@ const changePassword = async (
           },
           async () => {
             clientNewPassword.createVerifier(async (err, result) => {
-              // The Blob part here is needed to account for symbols that count as 2+ bytes (e.g., é, å, ø)
-              const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
+
+              const derivedKey = await deriveArgonKey({
+                password: newPassword,
+                salt: result.salt,
+                mem: 65536,
+                time: 3,
+                parallelism: 1,
+                hashLen: 32
+              });
+              
+              if (!derivedKey) throw new Error('Failed to derive key from password');
+
+              const key = crypto.randomBytes(32);
+
+              // create encrypted private key by encrypting the private
+              // key with the symmetric key [key]
+              const {
+                ciphertext: encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag
+              } = Aes256Gcm.encrypt({
                 text: localStorage.getItem('PRIVATE_KEY') as string,
-                secret: newPassword
-                  .slice(0, 32)
-                  .padStart(
-                    32 + (newPassword.slice(0, 32).length - new Blob([newPassword]).size),
-                    '0'
-                  )
+                secret: key
+              });
+              
+              // create the protected key by encrypting the symmetric key
+              // [key] with the derived key
+              const {
+                ciphertext: protectedKey,
+                iv: protectedKeyIV,
+                tag: protectedKeyTag
+              } = Aes256Gcm.encrypt({
+                text: key.toString('hex'),
+                secret: Buffer.from(derivedKey.hash)
               });
 
-              if (ciphertext) {
-                localStorage.setItem('encryptedPrivateKey', ciphertext);
-                localStorage.setItem('iv', iv);
-                localStorage.setItem('tag', tag);
+              let res;
+              try {
+                res = await changePassword2({
+                  clientProof,
+                  protectedKey,
+                  protectedKeyIV,
+                  protectedKeyTag,
+                  encryptedPrivateKey,
+                  encryptedPrivateKeyIV,
+                  encryptedPrivateKeyTag,
+                  salt: result.salt,
+                  verifier: result.verifier
+                });
+                
+                saveTokenToLocalStorage({
+                  protectedKey,
+                  protectedKeyIV,
+                  protectedKeyTag,
+                  encryptedPrivateKey,
+                  iv: encryptedPrivateKeyIV,
+                  tag: encryptedPrivateKeyTag,
+                });
 
-                let res;
-                try {
-                  res = await changePassword2({
-                    encryptedPrivateKey: ciphertext,
-                    iv,
-                    tag,
-                    salt: result.salt,
-                    verifier: result.verifier,
-                    clientProof
-                  });
-                  if (res && res.status === 400) {
-                    setCurrentPasswordError(true);
-                  } else if (res && res.status === 200) {
-                    setPasswordChanged(true);
-                    setCurrentPassword('');
-                    setNewPassword('');
-                  }
-                } catch (error) {
+                if (res && res.status === 400) {
                   setCurrentPasswordError(true);
-                  console.log(error);
+                } else if (res && res.status === 200) {
+                  setPasswordChanged(true);
+                  setCurrentPassword('');
+                  setNewPassword('');
                 }
+              } catch (error) {
+                setCurrentPasswordError(true);
+                console.log(error);
               }
             });
           }

frontend/src/components/utilities/cryptography/crypto.ts

@@ -1,3 +1,5 @@
+import argon2 from 'argon2-browser';
+
 import aes from './aes-256-gcm';
 
 const nacl = require('tweetnacl');
@@ -9,6 +11,50 @@ type EncryptAsymmetricProps = {
   privateKey: string;
 };
 
+/**
+ * Derive a key from password [password] and salt [salt] using Argon2id
+ * @param {Object} obj
+ * @param {String} obj.password - password to derive key from
+ * @param {String} obj.salt - salt to derive key from
+ * @param {Number} obj.mem - used memory, in KiB
+ * @param {Number} obj.time - number of iterations
+ * @param {Number} obj.parallelism - desired parallelism
+ * @param {Number} obj.hashLen - desired hash length (i.e. byte-length of derived key)
+ * @returns 
+ */
+const deriveArgonKey = async ({
+  password,
+  salt,
+  mem,
+  time,
+  parallelism,
+  hashLen
+}: {
+  password: string;
+  salt: string;
+  mem: number;
+  time: number;
+  parallelism: number;
+  hashLen: number;
+}) => {
+  let derivedKey;
+  try {
+    derivedKey = await argon2.hash({ 
+      pass: password, 
+      salt,
+      type: argon2.ArgonType.Argon2id,
+      mem,
+      time,
+      parallelism,
+      hashLen
+    });
+  } catch (err) {
+    console.error(err);
+  }
+
+  return derivedKey;
+}
+
 /**
  * Return assymmetrically encrypted [plaintext] using [publicKey] where
  * [publicKey] likely belongs to the recipient.
@@ -138,4 +184,10 @@ const decryptSymmetric = ({ ciphertext, iv, tag, key }: DecryptSymmetricProps):
   return plaintext;
 };
 
-export { decryptAssymmetric, decryptSymmetric, encryptAssymmetric, encryptSymmetric };
+export { 
+  decryptAssymmetric, 
+  decryptSymmetric, 
+  deriveArgonKey,
+  encryptAssymmetric, 
+  encryptSymmetric 
+};

frontend/src/components/utilities/saveTokenToLocalStorage.ts

@@ -1,12 +1,18 @@
 interface Props {
-  publicKey: string;
+  protectedKey?: string;
+  protectedKeyIV?: string;
+  protectedKeyTag?: string;
+  publicKey?: string;
   encryptedPrivateKey: string;
   iv: string;
   tag: string;
-  privateKey: string;
+  privateKey?: string;
 }
 
 export const saveTokenToLocalStorage = ({
+  protectedKey,
+  protectedKeyIV,
+  protectedKeyTag,
   publicKey,
   encryptedPrivateKey,
   iv,
@@ -14,11 +20,38 @@ export const saveTokenToLocalStorage = ({
   privateKey,
 }: Props) => {
   try {
-    localStorage.setItem("publicKey", publicKey);
+    localStorage.removeItem("protectedKey");
+    localStorage.removeItem("protectedKeyIV");
+    localStorage.removeItem("protectedKeyTag");
+    localStorage.removeItem("publicKey");
+    localStorage.removeItem("encryptedPrivateKey");
+    localStorage.removeItem("iv");
+    localStorage.removeItem("tag");
+    localStorage.removeItem("PRIVATE_KEY");
+    
+    if (protectedKey) {
+      localStorage.setItem("protectedKey", protectedKey);
+    }
+
+    if (protectedKeyIV) {
+      localStorage.setItem("protectedKeyIV", protectedKeyIV);
+    }
+
+    if (protectedKeyTag) {
+      localStorage.setItem("protectedKeyTag", protectedKeyTag);
+    }
+
+    if (publicKey) {
+      localStorage.setItem("publicKey", publicKey);
+    }
+
+    if (privateKey) {
+      localStorage.setItem("PRIVATE_KEY", privateKey);
+    }
+
     localStorage.setItem("encryptedPrivateKey", encryptedPrivateKey);
     localStorage.setItem("iv", iv);
     localStorage.setItem("tag", tag);
-    localStorage.setItem("PRIVATE_KEY", privateKey);
   } catch (err) {
     if (err instanceof Error) {
       throw new Error(