fix: assert passwords are at most 72 bytes (#1013)

* docs: update README with hot protips

README.md

@@ -86,6 +86,18 @@ Automatically fix issues
 yarn fmt
 ```
 
+Testing a single file (or a regex pattern of files):
+
+```bash
+yarn vitest file-regex
+```
+
+Extend truncated debug output for tests:
+```bash
+export DEBUG_PRINT_LIMIT=1000000
+yarn vitest
+```
+
 ## Sites
 
 - [prod](https://app.aptible.com)

src/app/test/accept-invite.test.tsx

@@ -145,4 +145,52 @@ describe("Accept invitation flows", () => {
       await screen.findByRole("heading", { name: /Environments/ });
     });
   });
+
+  describe("new user signup - data validation", () => {
+    it("should enforce a maximum password length", async () => {
+      server.use(
+        rest.get(`${testEnv.authUrl}/current_token`, (_, res, ctx) => {
+          return res(ctx.status(401));
+        }),
+        ...verifiedUserHandlers(),
+      );
+      const { App, store } = setupAppIntegrationTest({
+        initEntries: [teamAcceptInviteUrl(testVerifiedInvitation.id, "222")],
+      });
+
+      await waitForBootup(store);
+
+      render(<App />);
+      const name = await screen.findByRole("textbox", { name: "name" });
+      await act(() => userEvent.type(name, "mock name"));
+      const pass = await screen.findByLabelText("password");
+
+      // 73 bytes (too long)
+      await act(() =>
+        userEvent.type(pass, "Aptible!1234*••••••••••••••••••••"),
+      );
+
+      const signupBtn = await screen.findByRole("button", {
+        name: "Create Account",
+      });
+      expect(signupBtn);
+      fireEvent.click(signupBtn);
+
+      // Await rendering for error message
+      await screen.findByText(/Too long: Passwords are limited to 72 bytes/);
+
+      // Assert the error message is present (somewhat redundant but more explict)
+      expect(
+        screen.queryByText(/Too long: Passwords are limited to 72 bytes/),
+      ).toBeInTheDocument();
+
+      // Clear password and set to an OK password
+      await act(() => userEvent.clear(pass));
+      await act(() => userEvent.type(pass, "Aptible!1234"));
+      fireEvent.click(signupBtn);
+
+      // After clicking, assert we are on the next screen
+      await screen.findByRole("button", { name: /Accept Invite/ });
+    });
+  });
 });

src/validator/index.ts

@@ -79,7 +79,7 @@ export function stackNameValidator(stackName = "") {
 
 const COMPLEXITY_RULES: [string, RegExp][] = [
   ["must be at least 10 characters", /^.{0,9}$/],
-  ["must be shorter than 128 characters", /^.{128,}$/],
+  ["must be shorter than 72 characters", /^.{72,}$/],
   ["must contain at least one uppercase letter", /^[^A-Z]+$/],
   ["must contain at least one lowercase letter", /^[^a-z]+$/],
   [
@@ -99,6 +99,11 @@ export function passValidator(password: string) {
     }
   });
 
+  // Assert byte length is <= 72 due to bcrypt limitations
+  if (new TextEncoder().encode(password).length > 72) {
+    errors.push("Too long: Passwords are limited to 72 bytes");
+  }
+
   return errors.join(", ");
 }