Password Strength API: Build Better Auth UX Without Reinventing the Wheel

#api #webdev #tutorial #security

"Your password must be 8 characters." That's the extent of most password UX. Here's how to build a password strength meter that actually helps users without running any ML locally.

What Good Password UX Looks Like

Weak:    ████░░░░░░ "Add numbers or symbols"
Fair:    ██████░░░░ "Longer is better"
Strong:  █████████░ "Great password!"

Real-time feedback as the user types. No "submit and discover your password is wrong."

The API Call

// React hook for real-time password analysis
function usePasswordStrength(password) {
  const [analysis, setAnalysis] = React.useState(null);

  React.useEffect(() => {
    if (!password) return;

    fetch(`https://api.lazy-mac.com/password-strength/analyze`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ password })
    })
    .then(r => r.json())
    .then(setAnalysis);
  }, [password]);

  return analysis;
}

Response:

{
  "score": 3,
  "strength": "strong",
  "crack_time": "centuries",
  "feedback": {
    "warning": "",
    "suggestions": ["Add a symbol to make it even stronger"]
  },
  "entropy_bits": 71.2,
  "checks": {
    "length": true,
    "uppercase": true,
    "lowercase": true,
    "numbers": true,
    "symbols": false,
    "common_password": false,
    "dictionary_word": false
  }
}

The UI Component

function PasswordInput({ onChange }) {
  const [value, setValue] = React.useState('');
  const strength = usePasswordStrength(value);

  const colors = { weak: '#ff4444', fair: '#ffaa00', strong: '#00aa44', very_strong: '#0066cc' };

  return (
    <div>
      <input type="password" value={value} onChange={e => { setValue(e.target.value); onChange(e.target.value); }} />
      {strength && (
        <>
          <div style={{ height: 4, background: colors[strength.strength], width: `${strength.score * 25}%` }} />
          <p>{strength.feedback.suggestions[0]}</p>
        </>
      )}
    </div>
  );
}

Why Not zxcvbn?

zxcvbn (Dropbox's library) is 800KB. For a small form on a marketing page, that's a significant bundle cost. The API approach: 0KB client-side, always up-to-date dictionary.

Password Strength API | Full API store