Reactで、入力したパスワードの強さを表示する方法

パスワード | 文字の種類の判定 | zxcvbn（英語の辞書まで） | zxcvbn（日本語の辞書も）
Password1! | 強い | 1 | 1
P@ssw0rd2026 | 強い | 1 | 1
Qwerty123! | 強い | 1 | 1
sakura2026 | 弱い | 1 | 1
Tanaka@1985 | 強い | 3 | 2
kumo umi sora yama | 弱い | 4 | 4
velvet-cactus-orbit-lamp | 弱い | 4 | 4

--- Password1!（score 1、推測回数 10^4.3）
warning: よく使われるパスワードに似ています
suggestions: ["一般的ではない単語を増やしてください","最初の文字以外も大文字にしてください"]

Password1!（10文字）: 11.5ms
velvet-cactus-orbit-lamp（24文字）: 11.6ms
velvet-cactus-orbit-lamp-river-stone（36文字）: 40.9ms
xq7vplmrz2kd9wtb（16文字）: 41.7ms
xq7vplmrz2kd9wtbhy3nfgcs8jaeu4oi（32文字）: 494.6ms
xqvplmrzkdwtbhynfgcsjaeuoixqvplm（32文字）: 15.3ms

画面と同じスレッドで調べる版: 打ち終わるまで 4169ms、50ms 以上画面が止まった回数 14回、いちばん長く止まった時間 373ms、合計 2223ms、最後の表示 強さ：とても強い
Web Worker 版: 打ち終わるまで 1765ms、50ms 以上画面が止まった回数 0回、いちばん長く止まった時間 0ms、合計 0ms、最後の表示 強さ：とても強い

1回目: 849ms（強さ：弱い）
2回目: 343ms（強さ：弱い）
3回目: 351ms（強さ：弱い）

// パスワードの強さを、画面の処理とは別のスレッド（Web Worker）で調べる
import { ZxcvbnFactory } from '@zxcvbn-ts/core';
import * as common from '@zxcvbn-ts/language-common';
import * as en from '@zxcvbn-ts/language-en';
import * as ja from '@zxcvbn-ts/language-ja';
import type { StrengthRequest, StrengthResult } from './strength-types';

const zxcvbn = new ZxcvbnFactory({
  dictionary: { ...common.dictionary, ...en.dictionary, ...ja.dictionary },
  graphs: common.adjacencyGraphs,
  translations: ja.translations,
});

onmessage = (e: MessageEvent<StrengthRequest>) => {
  const { password, userInputs } = e.data;
  const r = zxcvbn.check(password, userInputs);
  const result: StrengthResult = {
    password,
    score: r.score,
    warning: r.feedback.warning,
    suggestions: r.feedback.suggestions,
  };
  postMessage(result);
};

import type { Score } from '@zxcvbn-ts/core';

export type StrengthRequest = { password: string; userInputs: string[] };
export type StrengthResult = { password: string; score: Score; warning: string | null; suggestions: string[] };

import { useEffect, useRef, useState } from 'react';
import type { StrengthRequest, StrengthResult } from './strength-types';

type WorkerState = { worker: Worker; busy: boolean; next: StrengthRequest | null; latest: string };

export function usePasswordStrength(password: string, userInputs: string[]) {
  const [result, setResult] = useState<StrengthResult | null>(null);
  const ref = useRef<WorkerState | null>(null);

  useEffect(() => {
    const state: WorkerState = {
      worker: new Worker('/strength-worker.js', { type: 'module' }),
      busy: false,
      next: null,
      latest: '',
    };
    state.worker.onmessage = (e: MessageEvent<StrengthResult>) => {
      if (state.next) {
        // 調べているあいだに入力が変わったら、この結果は使わずに最新の値を調べる
        state.worker.postMessage(state.next);
        state.next = null;
      } else {
        state.busy = false;
        // 調べているあいだに欄が空になっていたら、この結果は使わない
        if (e.data.password === state.latest) setResult(e.data);
      }
    };
    ref.current = state;
    return () => state.worker.terminate();
  }, []);

  const inputsKey = userInputs.join('\n');
  useEffect(() => {
    const state = ref.current!;
    state.latest = password;
    if (password === '') {
      // 前の結果を消しておき、次に打ち始めたときに古い強さが出ないようにする
      state.next = null;
      setResult(null);
      return;
    }
    const request: StrengthRequest = { password, userInputs: inputsKey.split('\n').filter(Boolean) };
    if (state.busy) {
      state.next = request;
    } else {
      state.busy = true;
      state.worker.postMessage(request);
    }
  }, [password, inputsKey]);

  return password === '' ? null : result;
}

最後の表示: 強さ：弱い、警告: よく使われるパスワードに似ています

消す前: 強さ：とても強い
a を打った直後: 強さ：とても弱い
落ち着いたあと: 強さ：とても弱い

1.5秒後: 強さの表示=0個、色の付いたバー 0本

2092868 dist/main-thread.js
225477 dist/main.js
1868207 dist/strength-worker.js
main.js gzip: 69859
strength-worker.js gzip: 944237
main-thread.js gzip: 1013549

import type { StrengthResult } from './strength-types';

const LABELS = ['とても弱い', '弱い', 'ふつう', '強い', 'とても強い'];
const COLORS = ['#d85878', '#d85878', '#e0a030', '#00c8e8', '#067a98'];

type Props = { id: string; result: StrengthResult | null };

export function StrengthMeter({ id, result }: Props) {
  // score は 0〜4。5本のバーのうち、score + 1 本に色を付ける
  const filled = result ? result.score + 1 : 0;
  return (
    <div className="strength">
      <div className="bars" aria-hidden="true">
        {[0, 1, 2, 3, 4].map((i) => (
          <span key={i} style={{ background: i < filled ? COLORS[result!.score] : '#dde3e6' }} />
        ))}
      </div>
      <div id={id}>
        {result && <p className="label">強さ：{LABELS[result.score]}</p>}
        {result?.warning && <p className="warning">{result.warning}</p>}
        {result && result.suggestions.length > 0 && (
          <ul>
            {result.suggestions.map((s) => (
              <li key={s}>{s}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

name: パスワード
description: 強さ：弱い 個人情報やページに関する情報は含めるべきではありません 一般的ではない単語を増やしてください

mikanbatake#7 userInputs=[] → score 4、10^11.7、warning: null
mikanbatake#7 userInputs=["mikanbatake@example.com"] → score 4、10^11.7、warning: null
mikanbatake#7 userInputs=["mikanbatake@example.com","mikanbatake"] → score 1、10^4.3、warning: 個人情報やページに関する情報は含めるべきではありません

import { useId, useState } from 'react';
import { usePasswordStrength } from './usePasswordStrength';
import { StrengthMeter } from './StrengthMeter';

export function SignupForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const strengthId = useId();

  // メールアドレスと、その @ より前の部分を、パスワードに使ってほしくない言葉として渡す
  const userInputs = [email, email.split('@')[0]].filter(Boolean);
  const result = usePasswordStrength(password, userInputs);

  return (
    <form>
      <label>
        メールアドレス
        <input type="email" autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <label>
        パスワード
        <input
          type="password"
          autoComplete="new-password"
          aria-describedby={strengthId}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      <StrengthMeter id={strengthId} result={result} />
    </form>
  );
}

メールアドレスが空: 強さ：とても強い、警告: （なし）
メールアドレスを入れたあと: 強さ：弱い、警告: 個人情報やページに関する情報は含めるべきではありません