Authentication improvements (#21194)

* jwt permissions

* add old password to body req

* add model and migration

need to track the datetime that passwords were changed for the jwt

* auth api backend changes

- use os.open to create jwt secret with restrictive permissions (0o600: read/write for owner only)
- add backend validation for password strength
- add iat claim to jwt so the server can determine when a token was issued and reject any jwts issued before a user's password_changed_at timestamp, ensuring old tokens are invalidated after a password change
- set logout route to public to avoid 401 when logging out
- issue new jwt for users who change their own password so they stay logged in

* improve set password dialog

- add field to verify old password
- add password strength requirements

* frontend tweaks for password dialog

* i18n

* use verify endpoint for existing password verification

avoid /login side effects (creating a new session)

* public logout

* only check if password has changed on jwt refresh

* fix tests

Fix migration 030 by using raw sql to select usernames (avoid ORM selecting nonexistent columns)

* add multi device warning to password dialog

* remove password verification endpoint

Just send old_password + new password in one request, let the backend handle verification in a single operation

docs/docs/configuration/reference.md

@@ -123,7 +123,7 @@ auth:
   # Optional: Refresh time in seconds (default: shown below)
   # When the session is going to expire in less time than this setting,
   # it will be refreshed back to the session_length.
-  refresh_time: 43200 # 12 hours
+  refresh_time: 1800 # 30 minutes
   # Optional: Rate limiting for login failures to help prevent brute force
   # login attacks (default: shown below)
   # See the docs for more information on valid values

frigate/api/auth.py

@@ -55,8 +55,8 @@ def require_admin_by_default():
         "/auth",
         "/auth/first_time_login",
         "/login",
-        # Authenticated user endpoints (allow_any_authenticated)
         "/logout",
+        # Authenticated user endpoints (allow_any_authenticated)
         "/profile",
         # Public info endpoints (allow_public)
         "/",
@@ -311,7 +311,10 @@ def get_jwt_secret() -> str:
             )
             jwt_secret = secrets.token_hex(64)
             try:
-                with open(jwt_secret_file, "w") as f:
+                fd = os.open(
+                    jwt_secret_file, os.O_WRONLY | os.O_CREAT | os.O_EXCL, 0o600
+                )
+                with os.fdopen(fd, "w") as f:
                     f.write(str(jwt_secret))
             except Exception:
                 logger.warning(
@@ -356,9 +359,35 @@ def verify_password(password, password_hash):
     return secrets.compare_digest(password_hash, compare_hash)
 
 
+def validate_password_strength(password: str) -> tuple[bool, Optional[str]]:
+    """
+    Validate password strength.
+
+    Returns a tuple of (is_valid, error_message).
+    """
+    if not password:
+        return False, "Password cannot be empty"
+
+    if len(password) < 8:
+        return False, "Password must be at least 8 characters long"
+
+    if not any(c.isupper() for c in password):
+        return False, "Password must contain at least one uppercase letter"
+
+    if not any(c.isdigit() for c in password):
+        return False, "Password must contain at least one digit"
+
+    if not any(c in '!@#$%^&*(),.?":{}|<>' for c in password):
+        return False, "Password must contain at least one special character"
+
+    return True, None
+
+
 def create_encoded_jwt(user, role, expiration, secret):
     return jwt.encode(
-        {"alg": "HS256"}, {"sub": user, "role": role, "exp": expiration}, secret
+        {"alg": "HS256"},
+        {"sub": user, "role": role, "exp": expiration, "iat": int(time.time())},
+        secret,
     )
 
 
@@ -619,13 +648,27 @@ def auth(request: Request):
             return fail_response
 
         # if the jwt cookie is expiring soon
-        elif jwt_source == "cookie" and expiration - JWT_REFRESH <= current_time:
+        if jwt_source == "cookie" and expiration - JWT_REFRESH <= current_time:
             logger.debug("jwt token expiring soon, refreshing cookie")
-            # ensure the user hasn't been deleted
+
+            # Check if password has been changed since token was issued
+            # If so, force re-login by rejecting the refresh
             try:
-                User.get_by_id(user)
+                user_obj = User.get_by_id(user)
+                if user_obj.password_changed_at is not None:
+                    token_iat = int(token.claims.get("iat", 0))
+                    password_changed_timestamp = int(
+                        user_obj.password_changed_at.timestamp()
+                    )
+                    if token_iat < password_changed_timestamp:
+                        logger.debug(
+                            "jwt token issued before password change, rejecting refresh"
+                        )
+                        return fail_response
             except DoesNotExist:
+                logger.debug("user not found")
                 return fail_response
+
             new_expiration = current_time + JWT_SESSION_LENGTH
             new_encoded_jwt = create_encoded_jwt(
                 user, role, new_expiration, request.app.jwt_token
@@ -660,7 +703,7 @@ def profile(request: Request):
     )
 
 
-@router.get("/logout", dependencies=[Depends(allow_any_authenticated())])
+@router.get("/logout", dependencies=[Depends(allow_public())])
 def logout(request: Request):
     auth_config: AuthConfig = request.app.frigate_config.auth
     response = RedirectResponse("/login", status_code=303)
@@ -782,10 +825,63 @@ async def update_password(
 
     HASH_ITERATIONS = request.app.frigate_config.auth.hash_iterations
 
-    password_hash = hash_password(body.password, iterations=HASH_ITERATIONS)
-    User.set_by_id(username, {User.password_hash: password_hash})
+    try:
+        user = User.get_by_id(username)
+    except DoesNotExist:
+        return JSONResponse(content={"message": "User not found"}, status_code=404)
 
-    return JSONResponse(content={"success": True})
+    # Require old_password when:
+    # 1. Non-admin user is changing another user's password (admin only action)
+    # 2. Any user is changing their own password
+    is_changing_own_password = current_username == username
+    is_non_admin = current_role != "admin"
+
+    if is_changing_own_password or is_non_admin:
+        if not body.old_password:
+            return JSONResponse(
+                content={"message": "Current password is required"},
+                status_code=400,
+            )
+        if not verify_password(body.old_password, user.password_hash):
+            return JSONResponse(
+                content={"message": "Current password is incorrect"},
+                status_code=401,
+            )
+
+    # Validate new password strength
+    is_valid, error_message = validate_password_strength(body.password)
+    if not is_valid:
+        return JSONResponse(
+            content={"message": error_message},
+            status_code=400,
+        )
+
+    password_hash = hash_password(body.password, iterations=HASH_ITERATIONS)
+    User.update(
+        {
+            User.password_hash: password_hash,
+            User.password_changed_at: datetime.now(),
+        }
+    ).where(User.username == username).execute()
+
+    response = JSONResponse(content={"success": True})
+
+    # If user changed their own password, issue a new JWT to keep them logged in
+    if current_username == username:
+        JWT_COOKIE_NAME = request.app.frigate_config.auth.cookie_name
+        JWT_COOKIE_SECURE = request.app.frigate_config.auth.cookie_secure
+        JWT_SESSION_LENGTH = request.app.frigate_config.auth.session_length
+
+        expiration = int(time.time()) + JWT_SESSION_LENGTH
+        encoded_jwt = create_encoded_jwt(
+            username, current_role, expiration, request.app.jwt_token
+        )
+        # Set new JWT cookie on response
+        set_jwt_cookie(
+            response, JWT_COOKIE_NAME, encoded_jwt, expiration, JWT_COOKIE_SECURE
+        )
+
+    return response
 
 
 @router.put(

frigate/api/defs/request/app_body.py

@@ -11,6 +11,7 @@ class AppConfigSetBody(BaseModel):
 
 class AppPutPasswordBody(BaseModel):
     password: str
+    old_password: Optional[str] = None
 
 
 class AppPostUsersBody(BaseModel):

frigate/config/auth.py

@@ -20,7 +20,7 @@ class AuthConfig(FrigateBaseModel):
         default=86400, title="Session length for jwt session tokens", ge=60
     )
     refresh_time: int = Field(
-        default=43200,
+        default=1800,
         title="Refresh the session if it is going to expire in this many seconds",
         ge=30,
     )

frigate/models.py

@@ -133,6 +133,7 @@ class User(Model):
         default="admin",
     )
     password_hash = CharField(null=False, max_length=120)
+    password_changed_at = DateTimeField(null=True)
     notification_tokens = JSONField()
 
     @classmethod

migrations/030_create_user_review_status.py

@@ -54,7 +54,9 @@ def migrate(migrator, database, fake=False, **kwargs):
 
     # Migrate existing has_been_reviewed data to UserReviewStatus for all users
     def migrate_data():
-        all_users = list(User.select())
+        # Use raw SQL to avoid ORM issues with columns that don't exist yet
+        cursor = database.execute_sql('SELECT "username" FROM "user"')
+        all_users = cursor.fetchall()
         if not all_users:
             return
 
@@ -63,7 +65,7 @@ def migrate(migrator, database, fake=False, **kwargs):
         )
         reviewed_segment_ids = [row[0] for row in cursor.fetchall()]
         # also migrate for anonymous (unauthenticated users)
-        usernames = [user.username for user in all_users] + ["anonymous"]
+        usernames = [user[0] for user in all_users] + ["anonymous"]
 
         for segment_id in reviewed_segment_ids:
             for username in usernames:

migrations/032_add_password_changed_at.py

@@ -0,0 +1,42 @@
+"""Peewee migrations -- 032_add_password_changed_at.py.
+
+Some examples (model - class or model name)::
+
+    > Model = migrator.orm['model_name']            # Return model in current state by name
+
+    > migrator.sql(sql)                             # Run custom SQL
+    > migrator.python(func, *args, **kwargs)        # Run python code
+    > migrator.create_model(Model)                  # Create a model (could be used as decorator)
+    > migrator.remove_model(model, cascade=True)    # Remove a model
+    > migrator.add_fields(model, **fields)          # Add fields to a model
+    > migrator.change_fields(model, **fields)       # Change fields
+    > migrator.remove_fields(model, *field_names, cascade=True)
+    > migrator.rename_field(model, old_field_name, new_field_name)
+    > migrator.rename_table(model, new_table_name)
+    > migrator.add_index(model, *col_names, unique=False)
+    > migrator.drop_index(model, *col_names)
+    > migrator.add_not_null(model, *field_names)
+    > migrator.drop_not_null(model, *field_names)
+    > migrator.add_default(model, field_name, default)
+
+"""
+
+import peewee as pw
+
+SQL = pw.SQL
+
+
+def migrate(migrator, database, fake=False, **kwargs):
+    migrator.sql(
+        """
+        ALTER TABLE user ADD COLUMN password_changed_at DATETIME NULL
+        """
+    )
+
+
+def rollback(migrator, database, fake=False, **kwargs):
+    migrator.sql(
+        """
+        ALTER TABLE user DROP COLUMN password_changed_at
+        """
+    )

web/public/locales/en/views/settings.json

@@ -712,6 +712,8 @@
         "password": {
           "title": "Password",
           "placeholder": "Enter password",
+          "show": "Show password",
+          "hide": "Hide password",
           "confirm": {
             "title": "Confirm Password",
             "placeholder": "Confirm Password"
@@ -723,6 +725,13 @@
             "strong": "Strong",
             "veryStrong": "Very Strong"
           },
+          "requirements": {
+            "title": "Password requirements:",
+            "length": "At least 8 characters",
+            "uppercase": "At least one uppercase letter",
+            "digit": "At least one digit",
+            "special": "At least one special character (!@#$%^&*(),.?\":{}|<>)"
+          },
           "match": "Passwords match",
           "notMatch": "Passwords don't match"
         },
@@ -733,6 +742,10 @@
             "placeholder": "Re-enter new password"
           }
         },
+        "currentPassword": {
+          "title": "Current Password",
+          "placeholder": "Enter your current password"
+        },
         "usernameIsRequired": "Username is required",
         "passwordIsRequired": "Password is required"
       },
@@ -750,9 +763,13 @@
       "passwordSetting": {
         "cannotBeEmpty": "Password cannot be empty",
         "doNotMatch": "Passwords do not match",
+        "currentPasswordRequired": "Current password is required",
+        "incorrectCurrentPassword": "Current password is incorrect",
+        "passwordVerificationFailed": "Failed to verify password",
         "updatePassword": "Update Password for {{username}}",
         "setPassword": "Set Password",
-        "desc": "Create a strong password to secure this account."
+        "desc": "Create a strong password to secure this account.",
+        "multiDeviceWarning": "Any other devices where you are logged in will be required to re-login within {{refresh_time}}. You can also force all users to re-authenticate immediately by rotating your JWT secret."
       },
       "changeRole": {
         "title": "Change User Role",

web/src/components/menu/AccountSettings.tsx

@@ -42,19 +42,27 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
   const logoutUrl = config?.proxy?.logout_url || `${baseUrl}api/logout`;
 
   const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [isPasswordLoading, setIsPasswordLoading] = useState(false);
 
   const Container = isDesktop ? DropdownMenu : Drawer;
   const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
   const Content = isDesktop ? DropdownMenuContent : DrawerContent;
   const MenuItem = isDesktop ? DropdownMenuItem : DrawerClose;
 
-  const handlePasswordSave = async (password: string) => {
+  const handlePasswordSave = async (password: string, oldPassword?: string) => {
     if (!profile?.username || profile.username === "anonymous") return;
+    setIsPasswordLoading(true);
     axios
-      .put(`users/${profile.username}/password`, { password })
+      .put(`users/${profile.username}/password`, {
+        password,
+        old_password: oldPassword,
+      })
       .then((response) => {
         if (response.status === 200) {
           setPasswordDialogOpen(false);
+          setPasswordError(null);
+          setIsPasswordLoading(false);
           toast.success(t("users.toast.success.updatePassword"), {
             position: "top-center",
           });
@@ -65,14 +73,10 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
           error.response?.data?.message ||
           error.response?.data?.detail ||
           "Unknown error";
-        toast.error(
-          t("users.toast.error.setPasswordFailed", {
-            errorMessage,
-          }),
-          {
-            position: "top-center",
-          },
-        );
+
+        // Keep dialog open and show error
+        setPasswordError(errorMessage);
+        setIsPasswordLoading(false);
       });
   };
 
@@ -154,8 +158,13 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
       <SetPasswordDialog
         show={passwordDialogOpen}
         onSave={handlePasswordSave}
-        onCancel={() => setPasswordDialogOpen(false)}
+        onCancel={() => {
+          setPasswordDialogOpen(false);
+          setPasswordError(null);
+        }}
+        initialError={passwordError}
         username={profile?.username}
+        isLoading={isPasswordLoading}
       />
     </Container>
   );

web/src/components/menu/GeneralSettings.tsx

@@ -116,13 +116,22 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
   const SubItemContent = isDesktop ? DropdownMenuSubContent : DialogContent;
   const Portal = isDesktop ? DropdownMenuPortal : DialogPortal;
 
-  const handlePasswordSave = async (password: string) => {
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [isPasswordLoading, setIsPasswordLoading] = useState(false);
+
+  const handlePasswordSave = async (password: string, oldPassword?: string) => {
     if (!profile?.username || profile.username === "anonymous") return;
+    setIsPasswordLoading(true);
     axios
-      .put(`users/${profile.username}/password`, { password })
+      .put(`users/${profile.username}/password`, {
+        password,
+        old_password: oldPassword,
+      })
       .then((response) => {
         if (response.status === 200) {
           setPasswordDialogOpen(false);
+          setPasswordError(null);
+          setIsPasswordLoading(false);
           toast.success(
             t("users.toast.success.updatePassword", {
               ns: "views/settings",
@@ -138,15 +147,10 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
           error.response?.data?.message ||
           error.response?.data?.detail ||
           "Unknown error";
-        toast.error(
-          t("users.toast.error.setPasswordFailed", {
-            ns: "views/settings",
-            errorMessage,
-          }),
-          {
-            position: "top-center",
-          },
-        );
+
+        // Keep dialog open and show error
+        setPasswordError(errorMessage);
+        setIsPasswordLoading(false);
       });
   };
 
@@ -554,8 +558,13 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
       <SetPasswordDialog
         show={passwordDialogOpen}
         onSave={handlePasswordSave}
-        onCancel={() => setPasswordDialogOpen(false)}
+        onCancel={() => {
+          setPasswordDialogOpen(false);
+          setPasswordError(null);
+        }}
+        initialError={passwordError}
         username={profile?.username}
+        isLoading={isPasswordLoading}
       />
     </>
   );

web/src/components/overlay/SetPasswordDialog.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { useState, useEffect } from "react";
@@ -13,38 +11,84 @@ import {
 } from "../ui/dialog";
 
 import { Label } from "../ui/label";
-import { LuCheck, LuX } from "react-icons/lu";
+import { LuCheck, LuX, LuEye, LuEyeOff, LuExternalLink } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
+import { useDocDomain } from "@/hooks/use-doc-domain";
+import useSWR from "swr";
+import { formatSecondsToDuration } from "@/utils/dateUtil";
+import ActivityIndicator from "../indicators/activity-indicator";
 
 type SetPasswordProps = {
   show: boolean;
-  onSave: (password: string) => void;
+  onSave: (password: string, oldPassword?: string) => void;
   onCancel: () => void;
+  initialError?: string | null;
   username?: string;
+  isLoading?: boolean;
 };
 
 export default function SetPasswordDialog({
   show,
   onSave,
   onCancel,
+  initialError,
   username,
+  isLoading = false,
 }: SetPasswordProps) {
-  const { t } = useTranslation(["views/settings"]);
+  const { t } = useTranslation(["views/settings", "common"]);
+  const { getLocaleDocUrl } = useDocDomain();
+
+  const { data: config } = useSWR("config");
+  const refreshSeconds: number | undefined =
+    config?.auth?.refresh_time ?? undefined;
+  const refreshTimeLabel = refreshSeconds
+    ? formatSecondsToDuration(refreshSeconds)
+    : "30 minutes";
+  const [oldPassword, setOldPassword] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [confirmPassword, setConfirmPassword] = useState<string>("");
   const [passwordStrength, setPasswordStrength] = useState<number>(0);
   const [error, setError] = useState<string | null>(null);
 
-  // Reset state when dialog opens/closes
+  // visibility toggles for password fields
+  const [showOldPassword, setShowOldPassword] = useState<boolean>(false);
+  const [showPasswordVisible, setShowPasswordVisible] =
+    useState<boolean>(false);
+  const [showConfirmPassword, setShowConfirmPassword] =
+    useState<boolean>(false);
+  const [hasInitialized, setHasInitialized] = useState<boolean>(false);
+
+  // Password strength requirements
+
+  const requirements = {
+    length: password.length >= 8,
+    uppercase: /[A-Z]/.test(password),
+    digit: /\d/.test(password),
+    special: /[!@#$%^&*(),.?":{}|<>]/.test(password),
+  };
+
   useEffect(() => {
     if (show) {
-      setPassword("");
-      setConfirmPassword("");
-      setError(null);
+      if (!hasInitialized) {
+        setOldPassword("");
+        setPassword("");
+        setConfirmPassword("");
+        setError(null);
+        setHasInitialized(true);
+      }
+    } else {
+      setHasInitialized(false);
     }
-  }, [show]);
+  }, [show, hasInitialized]);
+
+  useEffect(() => {
+    if (show && initialError) {
+      setError(initialError);
+    }
+  }, [show, initialError]);
+
+  // Password strength calculation
 
-  // Simple password strength calculation
   useEffect(() => {
     if (!password) {
       setPasswordStrength(0);
@@ -52,30 +96,52 @@ export default function SetPasswordDialog({
     }
 
     let strength = 0;
-    // Length check
-    if (password.length >= 8) strength += 1;
-    // Contains number
-    if (/\d/.test(password)) strength += 1;
-    // Contains special char
-    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength += 1;
-    // Contains uppercase
-    if (/[A-Z]/.test(password)) strength += 1;
+    if (requirements.length) strength += 1;
+    if (requirements.digit) strength += 1;
+    if (requirements.special) strength += 1;
+    if (requirements.uppercase) strength += 1;
 
     setPasswordStrength(strength);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [password]);
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (!password) {
       setError(t("users.dialog.passwordSetting.cannotBeEmpty"));
       return;
     }
 
+    // Validate all requirements
+    if (!requirements.length) {
+      setError(t("users.dialog.form.password.requirements.length"));
+      return;
+    }
+    if (!requirements.uppercase) {
+      setError(t("users.dialog.form.password.requirements.uppercase"));
+      return;
+    }
+    if (!requirements.digit) {
+      setError(t("users.dialog.form.password.requirements.digit"));
+      return;
+    }
+    if (!requirements.special) {
+      setError(t("users.dialog.form.password.requirements.special"));
+      return;
+    }
+
     if (password !== confirmPassword) {
       setError(t("users.dialog.passwordSetting.doNotMatch"));
       return;
     }
 
-    onSave(password);
+    // Require old password when changing own password (username is provided)
+    if (username && !oldPassword) {
+      setError(t("users.dialog.passwordSetting.currentPasswordRequired"));
+      return;
+    }
+
+    onSave(password, oldPassword || undefined);
   };
 
   const getStrengthLabel = () => {
@@ -112,39 +178,199 @@ export default function SetPasswordDialog({
           <DialogDescription>
             {t("users.dialog.passwordSetting.desc")}
           </DialogDescription>
+
+          <p className="text-sm text-muted-foreground">
+            {t("users.dialog.passwordSetting.multiDeviceWarning", {
+              refresh_time: refreshTimeLabel,
+              ns: "views/settings",
+            })}
+          </p>
+          <p className="text-sm text-primary-variant">
+            <a
+              href={getLocaleDocUrl(
+                "configuration/authentication#jwt-token-secret",
+              )}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center text-primary"
+            >
+              {t("readTheDocumentation", { ns: "common" })}
+              <LuExternalLink className="ml-2 size-3" />
+            </a>
+          </p>
         </DialogHeader>
 
         <div className="space-y-4 pt-4">
+          {username && (
+            <div className="space-y-2">
+              <Label htmlFor="old-password">
+                {t("users.dialog.form.currentPassword.title")}
+              </Label>
+              <div className="relative">
+                <Input
+                  id="old-password"
+                  className="h-10 pr-10"
+                  type={showOldPassword ? "text" : "password"}
+                  value={oldPassword}
+                  onChange={(event) => {
+                    setOldPassword(event.target.value);
+                    setError(null);
+                  }}
+                  placeholder={t(
+                    "users.dialog.form.currentPassword.placeholder",
+                  )}
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  tabIndex={-1}
+                  aria-label={
+                    showOldPassword
+                      ? t("users.dialog.form.password.hide", {
+                          ns: "views/settings",
+                        })
+                      : t("users.dialog.form.password.show", {
+                          ns: "views/settings",
+                        })
+                  }
+                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                  onClick={() => setShowOldPassword(!showOldPassword)}
+                >
+                  {showOldPassword ? (
+                    <LuEyeOff className="size-4" />
+                  ) : (
+                    <LuEye className="size-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+
           <div className="space-y-2">
             <Label htmlFor="password">
               {t("users.dialog.form.newPassword.title")}
             </Label>
-            <Input
-              id="password"
-              className="h-10"
-              type="password"
-              value={password}
-              onChange={(event) => {
-                setPassword(event.target.value);
-                setError(null);
-              }}
-              placeholder={t("users.dialog.form.newPassword.placeholder")}
-              autoFocus
-            />
+            <div className="relative">
+              <Input
+                id="password"
+                className="h-10 pr-10"
+                type={showPasswordVisible ? "text" : "password"}
+                value={password}
+                onChange={(event) => {
+                  setPassword(event.target.value);
+                  setError(null);
+                }}
+                placeholder={t("users.dialog.form.newPassword.placeholder")}
+                autoFocus
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                tabIndex={-1}
+                aria-label={
+                  showPasswordVisible
+                    ? t("users.dialog.form.password.hide", {
+                        ns: "views/settings",
+                      })
+                    : t("users.dialog.form.password.show", {
+                        ns: "views/settings",
+                      })
+                }
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowPasswordVisible(!showPasswordVisible)}
+              >
+                {showPasswordVisible ? (
+                  <LuEyeOff className="size-4" />
+                ) : (
+                  <LuEye className="size-4" />
+                )}
+              </Button>
+            </div>
 
-            {/* Password strength indicator */}
             {password && (
-              <div className="mt-2 space-y-1">
+              <div className="mt-2 space-y-2">
                 <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-secondary-foreground">
                   <div
                     className={`${getStrengthColor()} transition-all duration-300`}
-                    style={{ width: `${(passwordStrength / 3) * 100}%` }}
+                    style={{ width: `${(passwordStrength / 4) * 100}%` }}
                   />
                 </div>
                 <p className="text-xs text-muted-foreground">
                   {t("users.dialog.form.password.strength.title")}
                   <span className="font-medium">{getStrengthLabel()}</span>
                 </p>
+
+                <div className="space-y-1 rounded-md bg-muted/50 p-2">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    {t("users.dialog.form.password.requirements.title")}
+                  </p>
+                  <ul className="space-y-1">
+                    <li className="flex items-center gap-2 text-xs">
+                      {requirements.length ? (
+                        <LuCheck className="size-3.5 text-green-500" />
+                      ) : (
+                        <LuX className="size-3.5 text-red-500" />
+                      )}
+                      <span
+                        className={
+                          requirements.length
+                            ? "text-green-600"
+                            : "text-red-600"
+                        }
+                      >
+                        {t("users.dialog.form.password.requirements.length")}
+                      </span>
+                    </li>
+                    <li className="flex items-center gap-2 text-xs">
+                      {requirements.uppercase ? (
+                        <LuCheck className="size-3.5 text-green-500" />
+                      ) : (
+                        <LuX className="size-3.5 text-red-500" />
+                      )}
+                      <span
+                        className={
+                          requirements.uppercase
+                            ? "text-green-600"
+                            : "text-red-600"
+                        }
+                      >
+                        {t("users.dialog.form.password.requirements.uppercase")}
+                      </span>
+                    </li>
+                    <li className="flex items-center gap-2 text-xs">
+                      {requirements.digit ? (
+                        <LuCheck className="size-3.5 text-green-500" />
+                      ) : (
+                        <LuX className="size-3.5 text-red-500" />
+                      )}
+                      <span
+                        className={
+                          requirements.digit ? "text-green-600" : "text-red-600"
+                        }
+                      >
+                        {t("users.dialog.form.password.requirements.digit")}
+                      </span>
+                    </li>
+                    <li className="flex items-center gap-2 text-xs">
+                      {requirements.special ? (
+                        <LuCheck className="size-3.5 text-green-500" />
+                      ) : (
+                        <LuX className="size-3.5 text-red-500" />
+                      )}
+                      <span
+                        className={
+                          requirements.special
+                            ? "text-green-600"
+                            : "text-red-600"
+                        }
+                      >
+                        {t("users.dialog.form.password.requirements.special")}
+                      </span>
+                    </li>
+                  </ul>
+                </div>
               </div>
             )}
           </div>
@@ -153,19 +379,44 @@ export default function SetPasswordDialog({
             <Label htmlFor="confirm-password">
               {t("users.dialog.form.password.confirm.title")}
             </Label>
-            <Input
-              id="confirm-password"
-              className="h-10"
-              type="password"
-              value={confirmPassword}
-              onChange={(event) => {
-                setConfirmPassword(event.target.value);
-                setError(null);
-              }}
-              placeholder={t(
-                "users.dialog.form.newPassword.confirm.placeholder",
-              )}
-            />
+            <div className="relative">
+              <Input
+                id="confirm-password"
+                className="h-10 pr-10"
+                type={showConfirmPassword ? "text" : "password"}
+                value={confirmPassword}
+                onChange={(event) => {
+                  setConfirmPassword(event.target.value);
+                  setError(null);
+                }}
+                placeholder={t(
+                  "users.dialog.form.newPassword.confirm.placeholder",
+                )}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                tabIndex={-1}
+                aria-label={
+                  showConfirmPassword
+                    ? t("users.dialog.form.password.hide", {
+                        ns: "views/settings",
+                      })
+                    : t("users.dialog.form.password.show", {
+                        ns: "views/settings",
+                      })
+                }
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              >
+                {showConfirmPassword ? (
+                  <LuEyeOff className="size-4" />
+                ) : (
+                  <LuEye className="size-4" />
+                )}
+              </Button>
+            </div>
 
             {/* Password match indicator */}
             {password && confirmPassword && (
@@ -204,6 +455,7 @@ export default function SetPasswordDialog({
                 aria-label={t("button.cancel", { ns: "common" })}
                 onClick={onCancel}
                 type="button"
+                disabled={isLoading}
               >
                 {t("button.cancel", { ns: "common" })}
               </Button>
@@ -212,9 +464,25 @@ export default function SetPasswordDialog({
                 aria-label={t("button.save", { ns: "common" })}
                 className="flex flex-1"
                 onClick={handleSave}
-                disabled={!password || password !== confirmPassword}
+                disabled={
+                  isLoading ||
+                  !password ||
+                  password !== confirmPassword ||
+                  (username && !oldPassword) ||
+                  !requirements.length ||
+                  !requirements.uppercase ||
+                  !requirements.digit ||
+                  !requirements.special
+                }
               >
-                {t("button.save", { ns: "common" })}
+                {isLoading ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
               </Button>
             </div>
           </div>

web/src/views/settings/AuthenticationView.tsx

@@ -57,6 +57,8 @@ export default function AuthenticationView({
   const [showCreateRole, setShowCreateRole] = useState(false);
   const [showEditRole, setShowEditRole] = useState(false);
   const [showDeleteRole, setShowDeleteRole] = useState(false);
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [isPasswordLoading, setIsPasswordLoading] = useState(false);
 
   const [selectedUser, setSelectedUser] = useState<string>();
   const [selectedUserRole, setSelectedUserRole] = useState<string>();
@@ -70,12 +72,15 @@ export default function AuthenticationView({
   }, [t]);
 
   const onSavePassword = useCallback(
-    (user: string, password: string) => {
+    (user: string, password: string, oldPassword?: string) => {
+      setIsPasswordLoading(true);
       axios
-        .put(`users/${user}/password`, { password })
+        .put(`users/${user}/password`, { password, old_password: oldPassword })
         .then((response) => {
           if (response.status === 200) {
             setShowSetPassword(false);
+            setPasswordError(null);
+            setIsPasswordLoading(false);
             toast.success(t("users.toast.success.updatePassword"), {
               position: "top-center",
             });
@@ -86,14 +91,10 @@ export default function AuthenticationView({
             error.response?.data?.message ||
             error.response?.data?.detail ||
             "Unknown error";
-          toast.error(
-            t("users.toast.error.setPasswordFailed", {
-              errorMessage,
-            }),
-            {
-              position: "top-center",
-            },
-          );
+
+          // Keep dialog open and show error
+          setPasswordError(errorMessage);
+          setIsPasswordLoading(false);
         });
     },
     [t],
@@ -563,8 +564,15 @@ export default function AuthenticationView({
       </div>
       <SetPasswordDialog
         show={showSetPassword}
-        onCancel={() => setShowSetPassword(false)}
-        onSave={(password) => onSavePassword(selectedUser!, password)}
+        onCancel={() => {
+          setShowSetPassword(false);
+          setPasswordError(null);
+        }}
+        initialError={passwordError}
+        onSave={(password, oldPassword) =>
+          onSavePassword(selectedUser!, password, oldPassword)
+        }
+        isLoading={isPasswordLoading}
       />
       <DeleteUserDialog
         show={showDelete}