feat: integrate zxcvbn-ts for password strength evaluation

package.json

@@ -57,6 +57,9 @@
     "@tiptap/extension-typography": "^2.10.3",
     "@tiptap/pm": "^2.10.3",
     "@tiptap/react": "^2.10.3",
+    "@zxcvbn-ts/core": "^3.0.4",
+    "@zxcvbn-ts/language-common": "^3.0.4",
+    "@zxcvbn-ts/language-en": "^3.0.2",
     "convex": "^1.17.3",
     "convex-helpers": "^0.1.67",
     "lucide-react": "^0.468.0",

src/components/app/PasswordStrength/PasswordStrength.tsx

@@ -140,17 +140,17 @@ export function PasswordStrength({
         )}
       </AriaMeter>
       {warning && <Banner variant="danger">{warning}</Banner>}
-      {suggestions && (
+      {suggestions && suggestions.length > 0 && (
         <Banner variant="info">
-          <p>
+          <span>
             <span>To fix this:</span>
             <br />
             <ul className="list-disc list-inside">
               {suggestions.map((suggestion) => (
                 <li key={suggestion}>{suggestion}</li>
               ))}
             </ul>
-          </p>
+          </span>
         </Banner>
       )}
     </div>

src/routes/_unauthenticated/signin.tsx

@@ -1,4 +1,4 @@
-import { Logo } from "@/components/app";
+import { Logo, PasswordStrength } from "@/components/app";
 import {
   AnimateChangeInHeight,
   Banner,
@@ -14,8 +14,10 @@ import {
   Tooltip,
   TooltipTrigger,
 } from "@/components/common";
+import { usePasswordStrength } from "@/utils/usePasswordStrength";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
+
 import { ConvexError } from "convex/values";
 import { ChevronLeft } from "lucide-react";
 import { useState } from "react";
@@ -38,6 +40,7 @@ const SignIn = () => {
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate({ from: "/signin" });
   const isClosed = process.env.NODE_ENV === "production";
+  const passwordState = usePasswordStrength(password);
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -137,7 +140,20 @@ const SignIn = () => {
               value={password}
               onChange={setPassword}
             />
-            <Button type="submit" isDisabled={isSubmitting} variant="primary">
+            {password && passwordState && (
+              <PasswordStrength
+                value={passwordState.score}
+                warning={passwordState.feedback.warning ?? undefined}
+                suggestions={passwordState.feedback.suggestions ?? undefined}
+              />
+            )}
+            <Button
+              type="submit"
+              isDisabled={
+                isSubmitting || (passwordState && passwordState.score < 3)
+              }
+              variant="primary"
+            >
               {isSubmitting ? "Registering..." : "Register"}
             </Button>
             <p className="text-sm text-gray-dim text-center text-balance">
@@ -179,6 +195,7 @@ const ForgotPassword = ({
   const [step, setStep] = useState<"forgot" | { email: string }>("forgot");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const passwordState = usePasswordStrength(newPassword);
 
   return step === "forgot" ? (
     <Form
@@ -278,7 +295,18 @@ const ForgotPassword = ({
         value={newPassword}
         onChange={setNewPassword}
       />
-      <Button type="submit" variant="primary" isDisabled={isSubmitting}>
+      {passwordState && (
+        <PasswordStrength
+          value={passwordState.score}
+          warning={passwordState.feedback.warning || undefined}
+          suggestions={passwordState.feedback.suggestions || undefined}
+        />
+      )}
+      <Button
+        type="submit"
+        variant="primary"
+        isDisabled={isSubmitting || (passwordState && passwordState?.score < 3)}
+      >
         Reset password
       </Button>
     </Form>

src/utils/usePasswordStrength.ts

@@ -0,0 +1,36 @@
+import { type ZxcvbnResult, zxcvbnAsync } from "@zxcvbn-ts/core";
+import { zxcvbnOptions } from "@zxcvbn-ts/core";
+import { useDeferredValue, useEffect, useState } from "react";
+
+const loadOptions = async () => {
+  const zxcvbnCommonPackage = await import(
+    /* webpackChunkName: "zxcvbnCommonPackage" */ "@zxcvbn-ts/language-common"
+  );
+  const zxcvbnEnPackage = await import(
+    /* webpackChunkName: "zxcvbnEnPackage" */ "@zxcvbn-ts/language-en"
+  );
+  return {
+    dictionary: {
+      ...zxcvbnCommonPackage.dictionary,
+      ...zxcvbnEnPackage.dictionary,
+    },
+    translations: zxcvbnEnPackage.translations,
+  };
+};
+
+loadOptions().then((options) => {
+  zxcvbnOptions.setOptions(options);
+});
+
+export function usePasswordStrength(password: string) {
+  const [result, setResult] = useState<ZxcvbnResult>();
+  const deferredPassword = useDeferredValue(password);
+
+  useEffect(() => {
+    if (password) {
+      zxcvbnAsync(deferredPassword).then((response) => setResult(response));
+    }
+  }, [password, deferredPassword]);
+
+  return result;
+}