Merge pull request #885 from ragnarbull/ragnarbull-auth-pwd-fixes

Password fixes - enforce max length, add checks (pwd breach, PII, low entropy), improved UX, deprecate common-passwords api

frontend/src/pages/password-reset.tsx

@@ -10,9 +10,9 @@ import queryString from "query-string";
 
 import Button from "@app/components/basic/buttons/Button";
 import InputField from "@app/components/basic/InputField";
-import passwordCheck from "@app/components/utilities/checks/PasswordCheck";
+import passwordCheck from "@app/components/utilities/checks/password/PasswordCheck";
 import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
-import { useResetPassword,useVerifyPasswordResetCode } from "@app/hooks/api";
+import { useResetPassword, useVerifyPasswordResetCode } from "@app/hooks/api";
 import { getBackupEncryptedPrivateKey } from "@app/hooks/api/auth/queries";
 
 import { deriveArgonKey } from "../components/utilities/cryptography/crypto";
@@ -28,25 +28,30 @@ export default function PasswordReset() {
   const [privateKey, setPrivateKey] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [backupKeyError, setBackupKeyError] = useState(false);
-  const [passwordErrorLength, setPasswordErrorLength] = useState(false);
-  const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
-  const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
+  const [passwordErrorTooShort, setPasswordErrorTooShort] = useState(false);
+  const [passwordErrorTooLong, setPasswordErrorTooLong] = useState(false);
+  const [passwordErrorNoLetterChar, setPasswordErrorNoLetterChar] = useState(false);
+  const [passwordErrorNoNumOrSpecialChar, setPasswordErrorNoNumOrSpecialChar] = useState(false);
+  const [passwordErrorRepeatedChar, setPasswordErrorRepeatedChar] = useState(false);
+  const [passwordErrorEscapeChar, setPasswordErrorEscapeChar] = useState(false);
+  const [passwordErrorLowEntropy, setPasswordErrorLowEntropy] = useState(false);
+  const [passwordErrorBreached, setPasswordErrorBreached] = useState(false);
 
   const router = useRouter();
 
   const { mutateAsync: verifyPasswordResetCodeMutateAsync } = useVerifyPasswordResetCode();
   const { mutateAsync: resetPasswordMutateAsync } = useResetPassword();
-  
+
   const parsedUrl = queryString.parse(router.asPath.split("?")[1]);
   const token = parsedUrl.token as string;
   const email = (parsedUrl.to as string)?.replace(" ", "+").trim();
 
-  // Unencrypt the private key with a backup key
+  // Decrypt the private key with a backup key
   const getEncryptedKeyHandler = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
       const result = await getBackupEncryptedPrivateKey({ verificationToken });
-      
+
       setPrivateKey(
         Aes256Gcm.decrypt({
           ciphertext: result.encryptedPrivateKey,
@@ -56,7 +61,7 @@ export default function PasswordReset() {
         })
       );
       setStep(3);
-    } catch(err) {
+    } catch (err) {
       console.error(err);
       setBackupKeyError(true);
     }
@@ -65,12 +70,16 @@ export default function PasswordReset() {
   // If everything is correct, reset the password
   const resetPasswordHandler = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    const errorCheck = passwordCheck({
+    const errorCheck = await passwordCheck({
       password: newPassword,
-      setPasswordErrorLength,
-      setPasswordErrorNumber,
-      setPasswordErrorLowerCase,
-      errorCheck: false
+      setPasswordErrorTooShort,
+      setPasswordErrorTooLong,
+      setPasswordErrorNoLetterChar,
+      setPasswordErrorNoNumOrSpecialChar,
+      setPasswordErrorRepeatedChar,
+      setPasswordErrorEscapeChar,
+      setPasswordErrorLowEntropy,
+      setPasswordErrorBreached
     });
 
     if (!errorCheck) {
@@ -127,10 +136,10 @@ export default function PasswordReset() {
               verifier: result.verifier,
               verificationToken
             });
-            
+
             router.push("/login");
 
-            setLoading(false)
+            setLoading(false);
           });
         }
       );
@@ -169,13 +178,17 @@ export default function PasswordReset() {
 
   // Input backup key
   const stepInputBackupKey = (
-    <form onSubmit={getEncryptedKeyHandler} className="my-32 mx-1 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pt-6 pb-3 drop-shadow-xl md:max-w-lg md:px-6">
+    <form
+      onSubmit={getEncryptedKeyHandler}
+      className="my-32 mx-1 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pt-6 pb-3 drop-shadow-xl md:max-w-lg md:px-6"
+    >
       <p className="mx-auto mb-4 flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
         Enter your backup key
       </p>
-      <div className="flex flex-row items-center justify-center md:pb-4 mt-4 md:mx-2">
-        <p className="text-sm flex justify-center text-gray-400 w-max max-w-md">
-          You can find it in your emergency kit. You had to download the emergency kit during signup.
+      <div className="mt-4 flex flex-row items-center justify-center md:mx-2 md:pb-4">
+        <p className="flex w-max max-w-md justify-center text-sm text-gray-400">
+          You can find it in your emergency kit. You had to download the emergency kit during
+          signup.
         </p>
       </div>
       <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
@@ -192,12 +205,7 @@ export default function PasswordReset() {
       </div>
       <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
         <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
-          <Button
-            type="submit"
-            text="Submit Backup Key"
-            onButtonPressed={() => {}}
-            size="lg"
-          />
+          <Button type="submit" text="Submit Backup Key" onButtonPressed={() => {}} size="lg" />
         </div>
       </div>
     </form>
@@ -205,13 +213,16 @@ export default function PasswordReset() {
 
   // Enter new password
   const stepEnterNewPassword = (
-    <form onSubmit={resetPasswordHandler} className="my-32 mx-1 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pt-6 pb-3 drop-shadow-xl md:max-w-lg md:px-6">
+    <form
+      onSubmit={resetPasswordHandler}
+      className="my-32 mx-1 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pt-6 pb-3 drop-shadow-xl md:max-w-lg md:px-6"
+    >
       <p className="mx-auto flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
         Enter new password
       </p>
       <div className="mt-1 flex flex-row items-center justify-center md:mx-2 md:pb-4">
         <p className="flex w-max max-w-md justify-center text-sm text-gray-400">
-          Make sure you save it somewhere save.
+          Make sure you save it somewhere safe.
         </p>
       </div>
       <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
@@ -221,55 +232,141 @@ export default function PasswordReset() {
             setNewPassword(password);
             passwordCheck({
               password,
-              setPasswordErrorLength,
-              setPasswordErrorNumber,
-              setPasswordErrorLowerCase,
-              errorCheck: false
+              setPasswordErrorTooShort,
+              setPasswordErrorTooLong,
+              setPasswordErrorNoLetterChar,
+              setPasswordErrorNoNumOrSpecialChar,
+              setPasswordErrorRepeatedChar,
+              setPasswordErrorEscapeChar,
+              setPasswordErrorLowEntropy,
+              setPasswordErrorBreached
             });
           }}
           type="password"
           value={newPassword}
           isRequired
-          error={passwordErrorLength && passwordErrorLowerCase && passwordErrorNumber}
+          error={
+            passwordErrorTooShort &&
+            passwordErrorTooLong &&
+            passwordErrorNoLetterChar &&
+            passwordErrorNoNumOrSpecialChar &&
+            passwordErrorRepeatedChar &&
+            passwordErrorEscapeChar &&
+            passwordErrorLowEntropy &&
+            passwordErrorBreached
+          }
           autoComplete="new-password"
           id="new-password"
         />
       </div>
-      {passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber ? (
+      {passwordErrorTooShort ||
+      passwordErrorTooLong ||
+      passwordErrorNoLetterChar ||
+      passwordErrorNoNumOrSpecialChar ||
+      passwordErrorRepeatedChar ||
+      passwordErrorEscapeChar ||
+      passwordErrorLowEntropy ||
+      passwordErrorBreached ? (
         <div className="mx-2 mt-3 mb-2 flex w-full max-w-md flex-col items-start rounded-md bg-white/5 px-2 py-2">
-          <div className="mb-1 text-sm text-gray-400">Password should contain at least:</div>
+          <div className="mb-1 text-sm text-gray-400">Password should contain:</div>
           <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorLength ? (
+            {passwordErrorTooShort ? (
               <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
             ) : (
               <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
             )}
-            <div className={`${passwordErrorLength ? "text-gray-400" : "text-gray-600"} text-sm`}>
-              14 characters
+            <div className={`${passwordErrorTooShort ? "text-gray-400" : "text-gray-600"} text-sm`}>
+              at least 14 characters
             </div>
           </div>
           <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorLowerCase ? (
+            {passwordErrorTooLong ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div className={`${passwordErrorTooLong ? "text-gray-400" : "text-gray-600"} text-sm`}>
+              at most 100 characters
+            </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorNoLetterChar ? (
               <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
             ) : (
               <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
             )}
             <div
-              className={`${passwordErrorLowerCase ? "text-gray-400" : "text-gray-600"} text-sm`}
+              className={`${passwordErrorNoLetterChar ? "text-gray-400" : "text-gray-600"} text-sm`}
             >
-              1 lowercase character
+              at least 1 letter character
             </div>
           </div>
           <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorNumber ? (
+            {passwordErrorNoNumOrSpecialChar ? (
               <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
             ) : (
               <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
             )}
-            <div className={`${passwordErrorNumber ? "text-gray-400" : "text-gray-600"} text-sm`}>
-              1 number
+            <div
+              className={`${passwordErrorNoNumOrSpecialChar ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              at least 1 number or special character
             </div>
           </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+              {passwordErrorRepeatedChar ? (
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              ) : (
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              )}
+              <div
+                className={`${
+                  passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                at most 3 repeated, consecutive characters
+              </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+              {passwordErrorEscapeChar ? (
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              ) : (
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              )}
+              <div
+                className={`${
+                  passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                No escape characters allowed.
+              </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+              {passwordErrorLowEntropy ? (
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              ) : (
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              )}
+              <div
+                className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
+              >
+                Password contains sensitive data.
+              </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+              {passwordErrorBreached ? (
+                <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+              ) : (
+                <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+              )}
+              <div
+                className={`${
+                  passwordErrorBreached ? "text-gray-400" : "text-gray-600"
+                } text-sm`}
+              >
+                Password was found in a data breach.
+              </div>
+          </div>
         </div>
       ) : (
         <div className="py-2" />

frontend/src/pages/signupinvite.tsx

@@ -16,36 +16,30 @@ import { encodeBase64 } from "tweetnacl-util";
 
 import Button from "@app/components/basic/buttons/Button";
 import InputField from "@app/components/basic/InputField";
-import checkPassword from "@app/components/utilities/checks/checkPassword";
+import checkPassword from "@app/components/utilities/checks/password/checkPassword";
 import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
 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,
+  tooShort?: string;
+  tooLong?: string;
+  noLetterChar?: string;
+  noNumOrSpecialChar?: string;
+  repeatedChar?: string;
+  escapeChar?: string;
+  lowEntropy?: string;
+  breached?: string;
 };
 
 export default function SignupInvite() {
-  const { data: commonPasswords } = useGetCommonPasswords();
-
   const [password, setPassword] = useState("");
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
@@ -79,10 +73,9 @@ export default function SignupInvite() {
     } else {
       setLastNameError(false);
     }
-  
-    errorCheck = checkPassword({
+
+    errorCheck = await checkPassword({
       password,
-      commonPasswords,
       setErrors
     });
 
@@ -116,7 +109,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 {
@@ -127,7 +120,7 @@ export default function SignupInvite() {
                 text: privateKey,
                 secret: key
               });
-              
+
               // create the protected key by encrypting the symmetric key
               // [key] with the derived key
               const {
@@ -138,10 +131,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,
@@ -155,20 +146,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);
@@ -188,12 +179,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 () => {
@@ -229,11 +220,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}
@@ -245,7 +236,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}
@@ -257,14 +248,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
             });
           }}
@@ -276,31 +266,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={() => {
@@ -315,21 +300,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 () => {
@@ -349,7 +334,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" />