Removed all references to commonPasswords & the data file. This api route can be deprecated in favor of the client-side secure call to the haveIBeenPwnd password API. Further the datafile contains no passwords that meet the minimum password criteria.

2026-10-15 19:16:22 +00:00 · 2023-08-22 23:30:24 +10:00
parent 1f60a3d73e
commit 3e36adcf5c
10 changed files with 208 additions and 1793 deletions
@@ -22,31 +22,23 @@ import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
 import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
 import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
 import SecurityClient from "@app/components/utilities/SecurityClient";
-import {
-  useGetCommonPasswords
-} from "@app/hooks/api";
-import {
-  completeAccountSignupInvite,
-  verifySignupInvite
-} from "@app/hooks/api/auth/queries";
+import { completeAccountSignupInvite, verifySignupInvite } from "@app/hooks/api/auth/queries";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";

 // eslint-disable-next-line new-cap
 const client = new jsrp.client();

 type Errors = {
-  length?: string,
-  upperCase?: string,
-  lowerCase?: string,
-  number?: string,
-  specialChar?: string,
-  repeatedChar?: string,
-  breachedPassword?: string
+  length?: string;
+  upperCase?: string;
+  lowerCase?: string;
+  number?: string;
+  specialChar?: string;
+  repeatedChar?: string;
+  breachedPassword?: string;
 };

 export default function SignupInvite() {
-  const { data: commonPasswords } = useGetCommonPasswords();
-
  const [password, setPassword] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
@@ -80,10 +72,9 @@ export default function SignupInvite() {
    } else {
      setLastNameError(false);
    }
-  
+
    errorCheck = await checkPassword({
      password,
-      commonPasswords,
      setErrors
    });

@@ -117,7 +108,7 @@ export default function SignupInvite() {
              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 {
@@ -128,7 +119,7 @@ export default function SignupInvite() {
                text: privateKey,
                secret: key
              });
-              
+
              // create the protected key by encrypting the symmetric key
              // [key] with the derived key
              const {
@@ -139,10 +130,8 @@ export default function SignupInvite() {
                text: key.toString("hex"),
                secret: Buffer.from(derivedKey.hash)
              });
-              
-              const {
-                token: jwtToken
-              } = await completeAccountSignupInvite({
+
+              const { token: jwtToken } = await completeAccountSignupInvite({
                email,
                firstName,
                lastName,
@@ -156,20 +145,20 @@ export default function SignupInvite() {
                salt: result.salt,
                verifier: result.verifier
              });
-              
+
              // unset temporary signup JWT token and set JWT token
              SecurityClient.setSignupToken("");
              SecurityClient.setToken(jwtToken);

              saveTokenToLocalStorage({
-                  publicKey,
-                  encryptedPrivateKey,
-                  iv: encryptedPrivateKeyIV,
-                  tag: encryptedPrivateKeyTag,
-                  privateKey
+                publicKey,
+                encryptedPrivateKey,
+                iv: encryptedPrivateKeyIV,
+                tag: encryptedPrivateKeyTag,
+                privateKey
              });

-              const userOrgs = await fetchOrganizations(); 
+              const userOrgs = await fetchOrganizations();

              const orgId = userOrgs[0]._id;
              localStorage.setItem("orgData.id", orgId);
@@ -189,12 +178,12 @@ export default function SignupInvite() {

  // Step 4 of the sign up process (download the emergency kit pdf)
  const stepConfirmEmail = (
-    <div className="border border-mineshaft-600 bg-mineshaft-800 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 mb-6 flex justify-center text-primary-100">
+    <div className="h-7/12 mx-1 mb-36 flex w-full max-w-xs flex-col items-center rounded-xl border border-mineshaft-600 bg-mineshaft-800 py-8 px-4 drop-shadow-xl md:mb-16 md:max-w-lg md:px-6">
+      <p className="mb-6 flex justify-center text-center text-4xl font-semibold text-primary-100">
        Confirm your email
      </p>
      <Image src="/images/dragon-signupinvite.svg" height={262} width={410} alt="verify email" />
-      <div className="flex flex-col items-center justify-center md:p-2 max-h-24 max-w-md mx-auto text-lg px-4 mt-10 mb-2">
+      <div className="mx-auto mt-10 mb-2 flex max-h-24 max-w-md flex-col items-center justify-center px-4 text-lg md:p-2">
        <Button
          text="Confirm Email"
          onButtonPressed={async () => {
@@ -230,11 +219,11 @@ export default function SignupInvite() {

  // Because this is the invite signup - we directly go to the last step of signup (email is already verified)
  const main = (
-    <div className="border border-mineshaft-600 bg-mineshaft-800 w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-32 md:mb-16">
-      <p className="text-4xl font-bold flex justify-center mb-6 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-tr from-mineshaft-300 to-white">
+    <div className="h-7/12 mx-auto mb-32 w-max rounded-xl border border-mineshaft-600 bg-mineshaft-800 py-10 px-8 drop-shadow-xl md:mb-16">
+      <p className="mx-8 mb-6 flex justify-center bg-gradient-to-tr from-mineshaft-300 to-white bg-clip-text text-4xl font-bold text-transparent md:mx-16">
        Almost there!
      </p>
-      <div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
+      <div className="relative z-0 flex max-h-24 w-full items-center justify-end rounded-lg md:p-2">
        <InputField
          label="First Name"
          onChangeHandler={setFirstName}
@@ -246,7 +235,7 @@ export default function SignupInvite() {
          autoComplete="given-name"
        />
      </div>
-      <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
+      <div className="flex max-h-24 w-full items-center justify-center rounded-lg md:p-2">
        <InputField
          label="Last Name"
          onChangeHandler={setLastName}
@@ -258,14 +247,13 @@ export default function SignupInvite() {
          autoComplete="family-name"
        />
      </div>
-      <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
+      <div className="mt-2 flex max-h-60 w-full flex-col items-center justify-center rounded-lg md:p-2">
        <InputField
          label="Password"
          onChangeHandler={(pass) => {
            setPassword(pass);
            checkPassword({
              password: pass,
-              commonPasswords,
              setErrors
            });
          }}
@@ -277,31 +265,26 @@ export default function SignupInvite() {
          id="new-password"
        />
        {Object.keys(errors).length > 0 && (
-            <div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2">
-              <div className="mb-2 text-sm text-gray-400">Password should contain at least:</div> 
-              {Object.keys(errors).map((key) => {
-                if (errors[key as keyof Errors]) {
-                  return (
-                    <div className="ml-1 flex flex-row items-top justify-start" key={key}>
-                      <div>
-                        <FontAwesomeIcon 
-                          icon={faXmark} 
-                          className="text-md text-red ml-0.5 mr-2.5"
-                        />
-                      </div>
-                      <p className="text-gray-400 text-sm">
-                        {errors[key as keyof Errors]} 
-                      </p>
+          <div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2">
+            <div className="mb-2 text-sm text-gray-400">Password should contain at least:</div>
+            {Object.keys(errors).map((key) => {
+              if (errors[key as keyof Errors]) {
+                return (
+                  <div className="items-top ml-1 flex flex-row justify-start" key={key}>
+                    <div>
+                      <FontAwesomeIcon icon={faXmark} className="text-md ml-0.5 mr-2.5 text-red" />
                    </div>
-                  );
-                }
+                    <p className="text-sm text-gray-400">{errors[key as keyof Errors]}</p>
+                  </div>
+                );
+              }

-                return null;
-              })}
-            </div>
-          )}
+              return null;
+            })}
+          </div>
+        )}
      </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="mx-auto mt-2 flex max-h-24 max-w-max flex-col items-center justify-center px-2 py-3 text-lg md:px-4 md:py-5">
        <Button
          text="Sign Up"
          onButtonPressed={() => {
@@ -316,21 +299,21 @@ export default function SignupInvite() {

  // Step 4 of the sign up process (download the emergency kit pdf)
  const step4 = (
-    <div className="border border-mineshaft-600 bg-mineshaft-800 flex flex-col items-center w-full max-w-xs md:max-w-lg h-7/12 pt-8 pb-6 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-white to-mineshaft-300">
+    <div className="h-7/12 mx-1 mb-36 flex w-full max-w-xs flex-col items-center rounded-xl border border-mineshaft-600 bg-mineshaft-800 px-4 pt-8 pb-6 drop-shadow-xl md:mb-16 md:max-w-lg md:px-6">
+      <p className="flex justify-center bg-gradient-to-br from-white to-mineshaft-300 bg-clip-text text-center text-4xl font-semibold text-transparent">
        Save your Emergency Kit
      </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">
+      <div className="text-md mt-4 flex w-full max-w-md flex-col items-center justify-center rounded-md px-2 text-gray-400 md:mt-8">
        <div>
          If you get locked out of your account, your Emergency Kit is the only way to sign in.
        </div>
        <div className="mt-3">We recommend you download it and keep it somewhere safe.</div>
      </div>
-      <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
+      <div className="mx-auto mt-4 flex w-full max-w-xs flex-row items-center rounded-md bg-white/10 p-2 text-gray-400 md:max-w-md">
        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
        It contains your Secret Key which we cannot access or recover for you if you lose it.
      </div>
-      <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">
+      <div className="mx-auto mt-4 flex max-h-24 max-w-max flex-col items-center justify-center px-2 py-3 text-lg md:px-4 md:py-5">
        <Button
          text="Download PDF"
          onButtonPressed={async () => {
@@ -350,7 +333,7 @@ export default function SignupInvite() {
  );

  return (
-    <div className="bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 h-screen flex flex-col items-center justify-center">
+    <div className="flex h-screen flex-col items-center justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
      <Head>
        <title>Sign Up</title>
        <link rel="icon" href="/infisical.ico" />