Skip to main content
import { useState } from 'react';
import { useStytchB2BClient } from '@stytch/react/b2b';

export const PasswordStrengthCheck = () => {
  const stytch = useStytchB2BClient();
  const [password, setPassword] = useState('');
  const [strength, setStrength] = useState(null);

  const checkStrength = async () => {
    const response = await stytch.passwords.strengthCheck({
      password: password,
      email_address: 'user@example.com',
    });
    setStrength(response);
  };

  return (
    <div>
      <input
        type="password"
        value={password}
        onChange={(e) => {
          setPassword(e.target.value);
          checkStrength();
        }}
        placeholder="Password"
      />
      {strength && (
        <div>
          <p>Valid: {strength.valid_password ? 'Yes' : 'No'}</p>
          <p>Score: {strength.score}/4</p>
          {strength.breached_password && <p>Warning: Password has been breached!</p>}
        </div>
      )}
    </div>
  );
};
passwords.strengthCheck wraps the Strength Check Password API endpoint. This endpoint allows you to check whether or not the provided password is valid based on the configuration set in your Stytch Dashboard, and to provide feedback to the on how to increase the strength of their password.

​
Parameters

​
password
string
required
The password to authenticate, reset, or set for the first time. Any UTF8 character is allowed, e.g. spaces, emojis, non-English characters, etc.
​
email_address
string
The email associated with the password. Provide this for a more accurate strength check.

​
Response fields

​
valid_password
boolean
Returns true if the password passes our password validation. We offer two validation options, zxcvbn is the default option which offers a high level of sophistication. We also offer LUDS which is less sophisticated but easier to understand. If an email address is included in the call we also require that the password hasn’t been compromised using built-in breach detection powered by HaveIBeenPwned.
​
score
number
The score of the password determined by zxcvbn. Values will be between 1 and 4, a 3 or greater is required to pass validation.
​
strength_policy
string
The strength policy type enforced, either zxcvbn or luds.
​
breach_detection_on_create
boolean
Will return true if breach detection will be evaluated. By default this option is enabled. This option can be disabled in the dashboard. If this value is false then breached_password will always be false as well.
​
breached_password
boolean
Returns true if the password has been breached. Powered by HaveIBeenPwned.
​
zxcvbn_feedback
object
The feedback object contains relevant information to relay to users that failed to create a strong enough password.
​
luds_feedback
object
The feedback object contains relevant information to relay to users that failed to create a strong enough password.