パスワード強度のお手軽表示！zxcvbn-tsをReactに導入してみる

yarn add @zxcvbn-ts/core @zxcvbn-ts/language-common @zxcvbn-ts/language-ja

'use client'
 
import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnJaPackage from '@zxcvbn-ts/language-ja'
 
const SamplePage = () => {
  const password = 'somePassword'
  const options = {
    translations: zxcvbnJaPackage.translations,
    graphs: zxcvbnCommonPackage.adjacencyGraphs,
    dictionary: {
      ...zxcvbnCommonPackage.dictionary,
      ...zxcvbnJaPackage.dictionary,
    },
  }
 
  zxcvbnOptions.setOptions(options)
  const result = zxcvbn(password)
  console.log('result: ', result)
 
  // zxcvbnを試したいため画面には何も表示しない
  return <div />
}
 
export default SamplePage

{
    "onlineThrottling100PerHour": 18734400,
    "onlineNoThrottling10PerSecond": 52040,
    "offlineSlowHashing1e4PerSecond": 52.04,
    "offlineFastHashing1e10PerSecond": 0.00005204
}

feedback: {
  warning: '一般的に使用されるパスワードです',
  suggestions: [ '一般的ではない単語を増やしてください' ]
}

feedback: {
  warning: 'よく使われるパスワードに似ています',
  suggestions: [ '一般的ではない単語を増やしてください', '最初の文字以外も大文字にしてください' ]
}

feedback: {
  warning: null,
  suggestions: [ '一般的ではない単語を増やしてください' ] 
}

'use client'
 
import { useEffect, useState } from 'react'
 
import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core'
import { ZxcvbnResult } from '@zxcvbn-ts/core/src/types'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnJaPackage from '@zxcvbn-ts/language-ja'
 
const SamplePage = () => {
  // 入力されたパスワードの値
  const [password, setPassword] = useState<string | undefined>(undefined)
  // zxcvbnの結果
  const [result, setResult] = useState<ZxcvbnResult | undefined>(undefined)
 
  // zxcvbnの設定
  const options = {
    translations: zxcvbnJaPackage.translations,
    graphs: zxcvbnCommonPackage.adjacencyGraphs,
    dictionary: {
      ...zxcvbnCommonPackage.dictionary,
      ...zxcvbnJaPackage.dictionary,
    },
  }
  zxcvbnOptions.setOptions(options)
 
  useEffect(() => {
    // パスワードがない場合はzxcvbnの結果をリセットする
    if (!password) {
      setResult(undefined)
      return
    }
 
    // 入力されたパスワードを用いてzxcvbnの結果を取得、useStateに格納する
    setResult(zxcvbn(password))
  }, [password, result])
 
  return (
    <div className="w-[300px]">
      <div className="grid gap-[20px]">
        <label htmlFor="email">
          <div>email</div>
          <input
            type="text"
            id="email"
            className="h-[30px] w-full rounded-[4px] border border-[#909090]"
          />
        </label>
        <label htmlFor="password">
          <div>password</div>
          <input
            type="text"
            id="password"
            className="h-[30px] w-full rounded-[4px] border border-[#909090]"
            onChange={e => setPassword(e.target.value)}
          />
        </label>
      </div>
 
      <div className="mt-[60px]">
        <div className="flex w-full gap-[1%]">
          {/* 強度を表す5段階のバーを表示 */}
          {[0, 1, 2, 3, 4].map(v => (
            <div
              className={`h-[4px] w-[24%] ${
                result && v <= result.score ? 'bg-[#666]' : 'bg-[#ccc]'
              }`}
              key={v}
            />
          ))}
        </div>
        {result && result.score + 1}
      </div>
 
      {/* feedback.warning がある場合は表示 */}
      {result?.feedback && <div className="text-[#f00]">{result.feedback.warning}</div>}
    </div>
  )
}
 
export default SamplePage