### Setup zxcvbn-ts with Language Common Package

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/common/README.md

Demonstrates how to import and initialize the zxcvbn-ts core library with the common language package. Ensure both '@zxcvbn-ts/core' and '@zxcvbn-ts/language-common' are installed.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'

const password = 'somePassword'
const options = {
  ...zxcvbnCommonPackage,
}

const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup zxcvbn-ts with Pwned Matcher

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/libraries/pwned/README.md

Demonstrates how to import and configure the zxcvbn-ts core and the pwned matcher. This setup is asynchronous and requires a fetch implementation.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import { matcherPwnedFactory } from '@zxcvbn-ts/matcher-pwned'

const config = {
  url: 'https://api.pwnedpasswords.com/range/'
}
const matcherPwned = matcherPwnedFactory(fetch, config)
const customMatcher = {
  pwned: matcherPwned
}

const zxcvbn = new ZxcvbnFactory(options, customMatcher)

const password = 'somePassword'
// @zxcvbn-ts/matcher-pwned is async so zxcvbn will return a promise
zxcvbn.checkAsync(password).then((result) => {
  
})
```

--------------------------------

### Install zxcvbn-ts with npm

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/getting-started/README.md

Install the core library and English language support using npm.

```shell
npm install @zxcvbn-ts/core @zxcvbn-ts/language-common @zxcvbn-ts/language-en
```

--------------------------------

### Install zxcvbn-ts with npm

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/libraries/main/README.md

Install the core library and common language dictionaries using npm.

```bash
npm install @zxcvbn-ts/core @zxcvbn-ts/language-common --save
```

--------------------------------

### Install zxcvbn-ts with yarn

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/libraries/main/README.md

Install the core library and common language dictionaries using yarn.

```bash
yarn add @zxcvbn-ts/core @zxcvbn-ts/language-common
```

--------------------------------

### Migrate Custom Matcher Setup (3.x.x to 4.x.x)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

Custom matcher setup has changed. In 4.x.x, custom matchers are passed directly to the `ZxcvbnFactory` constructor. The `pwned` matcher example shows how to configure and integrate custom matchers.

```typescript
zxcvbnOptions.setOptions(options)

const pwnedOptions = {
  url: '...',
  networkErrorHandler: () => {}
}
const matcherPwned = matcherPwnedFactory(crossFetch, pwnedOptions)
zxcvbnOptions.addMatcher('pwned', matcherPwned)

zxcvbn(password)
```

```typescript
const pwnedConfig = {
  url: '...',
  networkErrorHandler: () => {}
}
const customMatcher = {
  pwned: matcherPwnedFactory(fetch, pwnedConfig),
}

const zxcvbn = new ZxcvbnFactory(options, customMatcher)
await zxcvbn.checkAsync(password)
```

--------------------------------

### Install zxcvbn-ts with pnpm

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/getting-started/README.md

Install the core library and English language support using pnpm.

```shell
pnpm add @zxcvbn-ts/core @zxcvbn-ts/language-common @zxcvbn-ts/language-en
```

--------------------------------

### Setup Turkish Language Package for zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/tr/README.md

Demonstrates how to install and set up the Turkish language package with zxcvbn-ts. This includes importing necessary modules and configuring the options for the zxcvbn instance.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnTrPackage from '@zxcvbn-ts/language-tr'

const password = 'somePassword'
const options = {
  translations: zxcvbnTrPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnTrPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Install zxcvbn-ts with yarn

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/getting-started/README.md

Install the core library and English language support using yarn.

```shell
yarn add @zxcvbn-ts/core @zxcvbn-ts/language-common @zxcvbn-ts/language-en
```

--------------------------------

### Example Implementation with Best Practices

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/best-practices/README.md

This example demonstrates how to load common, English, and German language packages, combine dictionaries, enable Levenshtein distance, and configure the Pwned Matcher for comprehensive password scoring. It also shows how to add custom user inputs to the dictionary and perform an asynchronous password check.

```typescript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import { matcherPwnedFactory } from '@zxcvbn-ts/matcher-pwned'

const loadOptions = async () => {
  // common has some dictionaries which are not bound the any real language like a password list
  const zxcvbnCommonPackage = await import(
    /* webpackChunkName: "zxcvbnCommonPackage" */ '@zxcvbn-ts/language-common'
    )
  // As english is the language of the world it should always be included
  const zxcvbnEnPackage = await import(
    /* webpackChunkName: "zxcvbnEnPackage" */ '@zxcvbn-ts/language-en'
    )
  // The primary language of your website should align with the language predominantly used by your user base.
  const zxcvbnDePackage = await import(
    /* webpackChunkName: "zxcvbnDePackage" */ '@zxcvbn-ts/language-de'
    )

  return {
    translations: zxcvbnePackage.translations,
    graphs: zxcvbnCommonPackage.adjacencyGraphs,
    dictionary: {
      ...zxcvbnCommonPackage.dictionary,
      ...zxcvbnEnPackage.dictionary,
      ...zxcvbnDePackage.dictionary
      // Enhance the dictionary search by adding custom-defined keywords to a personalized dictionary, enabling seamless and consistent searches for application-wide terms.
      userInputs: ['MrWook', 'zxcvbn-ts', 'vuepress', 'npm', 'github', 'typescript']
    },
    useLevenshtein: true,
  }
}

const customMatcher = {
  pwned: matcherPwnedFactory(fetch)
}
const options = await loadOptions()
const zxcvbn = new ZxcvbnFactory(options, customMatcher)

zxcvbn.checkAsync('thePasswordInUse', ['username', 'user email', 'other dynamic user content'])
```

--------------------------------

### Install English Language Package

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/en/README.md

Install the English language package using npm or yarn.

```bash
npm install @zxcvbn-ts/language-en --save
```

```bash
yarn add @zxcvbn-ts/language-en
```

--------------------------------

### Setup Kurdish Language Package

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/ku/README.md

Import and configure the Kurdish language package with zxcvbn-ts. Ensure you have installed the necessary packages.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnKuPackage from '@zxcvbn-ts/language-ku'

const password = 'somePassword'
const options = {
  translations: zxcvbnEnPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnKuPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup Polish Language Package

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/pl/README.md

Import and configure the Polish language package with common dictionaries and translations for password strength estimation.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnPlPackage from '@zxcvbn-ts/language-pl'

const password = 'somePassword'
const options = {
  translations: zxcvbnPlPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnPlPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup Thai Language Package for zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/th/README.md

Import and configure the Thai language package along with common dictionaries and translations for password strength checking. Ensure all necessary packages are installed before use.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnThPackage from '@zxcvbn-ts/language-th'

const password = 'somePassword'
const options = {
  translations: zxcvbnThPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnThPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup Arabic Language Package in zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/ar/README.md

Import necessary modules and configure zxcvbn-ts with the Arabic language package for password checking. This setup includes translations, adjacency graphs, and a combined dictionary.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnArPackage from '@zxcvbn-ts/language-ar'

const password = 'somePassword'
const options = {
  translations: zxcvbnArPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnArPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup Czech Language Package for zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/cs/README.md

Import necessary modules and configure zxcvbn with the Czech language dictionary and translations. This setup is required before checking passwords with Czech language support.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnCsPackage from '@zxcvbn-ts/language-cs'

const password = 'somePassword'
const options = {
  translations: zxcvbnCsPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnCsPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup Indonesia Language Package

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/id/README.md

Import necessary modules and configure zxcvbn-ts with the Indonesia language package for password checking. Ensure you have installed the package via npm or yarn.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnIdPackage from '@zxcvbn-ts/language-id'

const password = 'somePassword'
const options = {
  translations: zxcvbnIdPackage.translations,
  graphs: zxcvbnCommonPackage.adjacidcyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnIdPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup zxcvbn-ts with English Language Package

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/en/README.md

Configure zxcvbn-ts to use the English language package by importing necessary modules and merging dictionaries.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en'

const password = 'somePassword'
const options = {
  translations: zxcvbnEnPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnEnPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup Finnish Language Package for zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/fi/README.md

Import necessary modules and configure zxcvbn with the Finnish language options, including translations, adjacency graphs, and a combined dictionary. This setup is required before checking password strength with Finnish language support.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnFiPackage from '@zxcvbn-ts/language-fi'

const password = 'somePassword'
const options = {
  translations: zxcvbnFiPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnFiPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup Croatian Language Package for zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/hr/README.md

Demonstrates how to import and configure the Croatian language package with the zxcvbn-ts core library. This setup includes loading Croatian translations, adjacency graphs, and merging Croatian dictionaries with common dictionaries.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnHrPackage from '@zxcvbn-ts/language-hr'

const password = 'somePassword'
const options = {
  translations: zxcvbnHrPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnHrPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Setup and Use zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/libraries/main/README.md

Initialize the zxcvbn estimator with common and English language dictionaries, then check a password's strength.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en'

const options = {
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnEnPackage.dictionary,
  },
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  translations: zxcvbnEnPackage.translations,
}
const zxcvbn = new ZxcvbnFactory(options)

const password = 'somePassword'
zxcvbn.check(password)
```

--------------------------------

### Setup European Spanish Language Package

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/es-es/README.md

Import and configure the European Spanish language package with the zxcvbn-ts core library. This setup is necessary to enable password strength checking with Spanish-specific dictionaries and translations.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnEsEsPackage from '@zxcvbn-ts/language-es-es'

const password = 'somePassword'
const options = {
  translations: zxcvbnEsEsPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnEsEsPackage.dictionary,
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Example of Simple Word List for Data Generation

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/languages/README.md

This format is used for common words where each word is on a new line. It's a basic input for the data generation script.

```txt
John
Debra
Billy
```

--------------------------------

### Example of Word List with Occurrences

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/languages/README.md

This format includes words and their occurrence counts, separated by a space. It's suitable for the default data generation script.

```txt
you 23123
i 12345
the 234
```

--------------------------------

### Setup Persian Language Package

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/packages/languages/fa/README.md

Import necessary modules and configure zxcvbn-ts to use the Persian language package for password strength checking. This includes loading Persian translations and dictionaries.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnFaPackage from '@zxcvbn-ts/language-fa'

const password = 'somePassword'
const options = {
  translations: zxcvbnFaPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnFaPackage.dictionary,
  },
}

const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Using Language Packs for Translations

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/languages/README.md

Integrate zxcvbn-ts with your translation system or use predefined language packs by importing translation data. This example shows how to use the English language pack.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import { translations } from '@zxcvbn-ts/language-en'

const password = 'somePassword'
const options = {
  translations,
}

const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Integrating Common and English Dictionaries

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/languages/README.md

Enhance password strength estimation by including common and English dictionaries. This example merges dictionaries from '@zxcvbn-ts/language-common' and '@zxcvbn-ts/language-en'.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en'

const password = 'somePassword'
const options = {
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnEnPackage.dictionary,
  },
}

const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Using Common Keyboard Patterns

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/languages/README.md

Improve password analysis by incorporating common keyboard patterns. This example uses adjacency graphs from the '@zxcvbn-ts/language-common' package.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'

const password = 'somePassword'
const options = {
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
}

const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Debounce with Immediate Execution

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/examples/README.md

This example demonstrates debouncing a function with an immediate execution option. The function is called on the first invocation within the debounce period, and subsequent calls within that period are ignored. This is useful when you want to react to the initial event quickly.

```javascript
import {
    zxcvbnAsync,
    debounce,
} from '@zxcvbn-ts/core'

let result
const someCallableFunction = () => {
// ...do your magic for example get the value from an input field or somewhere else
    const value = getInputValue()
    result = zxcvbnAsync(value)
}

const debouncedZxcvbn = debounce(someCallableFunction, 200, true)


// then you can call debouncedZxcvbn and if it is in the timeframe of 200ms the someCallableFunction will only be called once by the first call
debouncedZxcvbn()
debouncedZxcvbn()
debouncedZxcvbn()
debouncedZxcvbn()
```

--------------------------------

### Running Wikipedia Extractor

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/languages/README.md

This command extracts text content from Wikipedia dumps. Ensure you have wikiextractor installed and replace 'XX' with your language code.

```sh
wikiextractor --no-templates -o data-scripts/wikiExtractor/extracts XXwiki-latest-pages-articles.xml.bz2
```

--------------------------------

### New Word Sequence Matching Example

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

Version 4.x.x introduces a new matcher for word sequences, improving passphrase estimation. This matcher is included in the dictionaries by default. To use it, import the dictionary and spread it into the `options` object.

```typescript
import { dictionary } from '@zxcvbn-ts/language-en'

const options = {
  // ...
  dictionary: {
    ...dictionary
  }
}
```

--------------------------------

### Custom Pluralization for Time Estimation

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/languages/README.md

Customize time estimation translations using string placeholders or functions for complex pluralization rules. This example defines custom rules for seconds.

```javascript
const translations = {
  warnings: {
    // ...
  },
  suggestions: {
    // ...
  },
  timeEstimation: {
    ltSecond: 'less than a second',
    second: '{base} second',
    seconds: (value) => {
      if (value === 2) return 'exactly two seconds'
      return `${value} seconds`
    },
    // ...
  },
}
```

--------------------------------

### Create Custom Minimum Length Matcher

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/matcher/README.md

Example of creating a custom matcher to enforce a minimum password length. The `Matcher` interface requires `Matching`, `feedback`, and `scoring` functions. The `Matching` function returns an array of `MatchExtended` objects, each with mandatory `pattern`, `token`, `i`, and `j` properties. The `scoring` function calculates the guess count, and `feedback` provides user warnings and suggestions.

```typescript
import {
  ZxcvbnFactory
} from '@zxcvbn-ts/core'
import {
  MatchEstimated,
  MatchExtended,
  Matcher,
} from '@zxcvbn-ts/core'

const minLengthMatcher: Matcher = {
  Matching: class MatchMinLength {
    minLength = 10

    match({ password }: { password: string }) {
      const matches: MatchExtended[] = []
      if (password.length <= this.minLength) {
        matches.push({
          pattern: 'minLength',
          token: password,
          i: 0,
          j: password.length - 1,
        })
      }
      return matches
    }
  },
  feedback(match: MatchEstimated, isSoleMatch: boolean) {
    return {
      warning: 'Your password is not long enough',
      suggestions: [],
    }
  },
  scoring(match: MatchExtended) {
    // The length of the password is multiplied by 10 to create a higher score the more characters are added.
    return match.token.length * 10
  },
}

const options = {
  // your options
}

new ZxcvbnFactory(options, {
  'minLength': minLengthMatcher
})
```

--------------------------------

### Nuxt 3 Component for Password Input

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/framework-examples/README.md

A Vue component for Nuxt 3 that utilizes zxcvbn for password strength checking. It uses the Composition API with `setup` script and debounces the password check for performance.

```vue
<template>
  <div class="example">
    <label>
      Password
      <input v-model="password" type="text" />
    </label>
    <template v-if="result">
      <div>The password score is {{ result.score }}/4</div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { debounce, ZxcvbnResult } from '@zxcvbn-ts/core'
import { Ref, watch } from '@vue/runtime-core'

let password = ref()
let result: Ref<ZxcvbnResult | null> = ref(null)

const useZxcvbn = async () => {
  if (password) {
    result.value = await this.$zxcvbn.checkAsync(password.value)
  } else {
    result.value = null
  }
}

const zxcvbnDebounce = debounce(useZxcvbn, 200, false)

watch(password, zxcvbnDebounce)
</script>
```

--------------------------------

### Initialize ZxcvbnFactory with Options

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/options/README.md

Demonstrates how to pass custom options to the ZxcvbnFactory constructor.

```javascript
const options = {
  // your options
}
const zxcvbn = new ZxcvbnFactory(options)
```

--------------------------------

### Initializing zxcvbn-ts (4.x.x)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

Create an instance of ZxcvbnFactory with your desired configuration, including translations, graphs, and dictionaries.

```typescript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import { adjacencyGraphs, dictionary } from '@zxcvbn-ts/language-common'
import { dictionary as enDictionary, translations } from '@zxcvbn-ts/language-en'

const options = {
  translations,
  graphs: adjacencyGraphs,
  dictionary: {
    ...dictionary,
    ...enDictionary,
  },
}

const zxcvbn = new ZxcvbnFactory(options)
const result = zxcvbn.check('password')
```

--------------------------------

### Initialize Zxcvbn with Lazy Loaded Options

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/lazy-loading/README.md

After loading options asynchronously, initialize Zxcvbn with the combined dictionaries and graphs. This snippet demonstrates how to use the loaded options to create a zxcvbn instance and check a password.

```js
//
// [your other code]
//
const run = async () => {
  const password = 'asdnlja978o'
  const options = await loadOptions()

  const zxcvbn = new ZxcvbnFactory(options)
  const results = zxcvbn.check(password)
  console.log(results)
}
```

--------------------------------

### Configuring Options and Dictionaries (0.3.x to 1.x.x)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

Keyboard layouts are now optional. Configure options and include dictionaries and graphs via `setOptions` to maintain scoring accuracy.

```javascript
import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en'

const options = {
  translations: zxcvbnEnPackage.translations,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnEnPackage.dictionary,
  },
  // Recommended to get accurate scoring for keyboard patterns
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
}

zxcvbnOptions.setOptions(options)
zxcvbn(password)
```

--------------------------------

### Import ZxcvbnFactory

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/lazy-loading/README.md

Import the ZxcvbnFactory class from the core library. This is a prerequisite for initializing zxcvbn.

```js
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
```

--------------------------------

### Migrate from Singleton Options to Class-Based Approach (3.x.x to 4.x.x)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

In version 4.x.x, the singleton options pattern (`zxcvbnOptions.setOptions`) is replaced by a class-based approach using `ZxcvbnFactory`. The top-level `zxcvbn` and `zxcvbnAsync` functions are removed. Use `ZxcvbnFactory` for creating instances and `check` or `checkAsync` for password validation.

```typescript
zxcvbnOptions.setOptions(options)

zxcvbn(password)
```

```typescript
const zxcvbn = new ZxcvbnFactory(options, customMatcher)

// Synchronous check
const result = zxcvbn.check(password)

// Asynchronous check (required if using async matchers like pwned)
const asyncResult = await zxcvbn.checkAsync(password)
```

--------------------------------

### Handling User Inputs in zxcvbn-ts (Factory Creation)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

In zxcvbn-ts, user inputs can be included in the options during the factory creation. This sets up the dictionary for subsequent checks.

```ts
// Option A: During factory creation
const options = {
  dictionary: {
    ...baseDictionaries,
    userInputs: ['user', 'inputs']
  }
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check('password')
```

--------------------------------

### Handling User Inputs in zxcvbn-ts (On-the-fly)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

Alternatively, user inputs can be provided directly to the check method for on-the-fly processing without modifying the factory options.

```ts
// Option B: During check (on the fly)
zxcvbn.check('password', ['user', 'inputs'])
```

--------------------------------

### Nuxt Configuration for zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/framework-examples/README.md

This configuration file sets up the Nuxt project to use the zxcvbn plugin on the client side. It also includes a build configuration to transpile the @zxcvbn-ts/matcher-pwned package if necessary.

```typescript
export default defineNuxtConfig({
  // add plugin for client only to load the options on the client side
  plugins: [{ src: '~/plugins/zxcvbn.ts', mode: 'client' }],
  build: {
    // add if needed for your setup
    transpile: ['@zxcvbn-ts/matcher-pwned'],
  },
})
```

--------------------------------

### Basic Usage of zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/getting-started/README.md

Import necessary modules and initialize zxcvbn to check password strength. Supports both synchronous and asynchronous matching.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en'

const password = 'somePassword'
const options = {
  translations: zxcvbnEnPackage.translations,
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnEnPackage.dictionary,
  },
}

const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
// or for async matchers
await zxcvbn.checkAsync(password)
```

--------------------------------

### Adding User Inputs to Zxcvbn-ts Dictionary

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/filtering-custom-words/README.md

Initialize Zxcvbn-ts with custom user inputs in the dictionary options. This helps identify passwords that might contain sensitive user-specific information.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'

const password = 'somePassword'
const options = {
  dictionary: {
    userInputs: ['someEmail@email.de', 'someUsername'],
  },
}
const zxcvbn = new ZxcvbnFactory(options)
zxcvbn.check(password)
```

--------------------------------

### Importing Pwned Matcher (3.x.x)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

The pwned matcher in version 3.x.x no longer has a default export. Use named imports for the factory function.

```typescript
import { matcherPwnedFactory } from '@zxcvbn-ts/matcher-pwned'
```

--------------------------------

### Dynamically Providing User Inputs to Zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/filtering-custom-words/README.md

Pass user inputs as a second argument to the check method for dynamic validation. This is useful during registration when user-provided data should not be part of a strong password.

```javascript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'

const password = 'somePassword'

const zxcvbn = new ZxcvbnFactory()
zxcvbn.check(password, ['someEmail@email.de', 'someUsername'])
```

--------------------------------

### Fetch Dictionaries via HTTP

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/lazy-loading/README.md

Load language dictionaries by fetching JSON files from a specified URL. This method is suitable for environments without a bundler like Webpack, allowing dictionaries to be loaded from a CDN or hosted service.

```js
const packages = [
  'https://yourWebsite/zxcvbn-ts-language-common/passwords.json',
  'https://yourWebsite/zxcvbn-ts-language-en/commonWords.json',
  'https://yourWebsite/zxcvbn-ts-language-en/firstnames.json',
  'https://yourWebsite/zxcvbn-ts-language-en/lastnames.json',
]

const loadDictionaries = async () => {
  const promises = packages.map(async (url) => {
    const response = await fetch(url)

    return response.json()
  })

  return Promise.all(promises)
}
```

--------------------------------

### Handling User Inputs in zxcvbn 4.4.2

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

In older versions of zxcvbn, user inputs were passed as a second argument to the main zxcvbn function.

```ts
zxcvbn('password', ['user', 'inputs'])
```

--------------------------------

### Fastify API for Password Strength

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/framework-examples/README.md

Sets up a Fastify server endpoint to receive passwords and return their strength scores using zxcvbn-ts. Handles basic request validation for the password body.

```ts
import Fastify from 'fastify'
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en'

const fastify = Fastify()

const options = {
  // recommended
  dictionary: {
    ...zxcvbnCommonPackage.dictionary,
    ...zxcvbnEnPackage.dictionary,
  },
  // recommended
  graphs: zxcvbnCommonPackage.adjacencyGraphs,
  // recommended
  useLevenshteinDistance: true,
  // optional
  translations: zxcvbnEnPackage.translations,
}

const zxcvbn = new ZxcvbnFactory(options)

fastify.post<{Body: string}>('/password-strength', async (request, reply) => {
  if (request.body) {
    return zxcvbn.check(request.body)
  }
  return reply.status(400).send({ error: 'Password is required' })
})

const start = async () => {
  try {
    await fastify.listen({ port: 3000 })
  } catch (err) {
    fastify.log.error(err)
    process.exit(1)
  }
}
start()

```

--------------------------------

### Scoring Thresholds Naming Change in Output (3.x.x to 4.x.x)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

The output structure for crack times has been unified and renamed in version 4.x.x. The `crackTimesSeconds` and `crackTimesDisplay` objects are replaced by a single `crackTimes` object containing more detailed breakdown including online and offline scenarios.

```json
{
  "crackTimesSeconds": {
    "offlineFastHashing1e10PerSecond": 0.1,
    "offlineSlowHashing1e4PerSecond": 100
    // ...
  },
  "crackTimesDisplay": {
    "offlineFastHashing1e10PerSecond": "less than a second",
    "offlineSlowHashing1e4PerSecond": "1 minute"
    // ...
  }
}
```

```json
{
  "crackTimes": {
    "onlineThrottlingXPerHour": {
      "base": null,
      "seconds": 3600,
      "display": "1 hour"
    },
    "onlineNoThrottlingXPerSecond": {
      "base": null,
      "seconds": 1,
      "display": "1 second"
    },
    "offlineSlowHashingXPerSecond": {
      "base": null,
      "seconds": 100,
      "display": "1 minute"
    },
    "offlineFastHashingXPerSecond": {
      "base": null,
      "seconds": 0.1,
      "display": "less than a second"
    }
  }
}
```

--------------------------------

### Lazy Load Webpack Chunks

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/lazy-loading/README.md

Dynamically import language dictionaries using Webpack's dynamic import syntax. This allows dictionaries to be loaded on demand, reducing initial bundle size.

```js
const loadOptions = async () => {
  const { dictionary: commonDict, adjacencyGraphs } = await import(
    /* webpackChunkName: "zxcvbnCommonPackage" */ '@zxcvbn-ts/language-common'
  )
  const { dictionary: enDict, translations } = await import(
    /* webpackChunkName: "zxcvbnEnPackage" */ '@zxcvbn-ts/language-en'
  )

  return {
    dictionary: {
      ...commonDict,
      ...enDict,
    },
    graphs: adjacencyGraphs,
    translations: translations,
  }
}
```

--------------------------------

### Vue Plugin for zxcvbn-ts

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/framework-examples/README.md

This plugin integrates zxcvbn-ts into a Vue application, providing a convenient way to check password strength. It configures the ZxcvbnFactory with common and language-specific dictionaries and adjacency graphs, and optionally includes a Pwned password matcher.

```typescript
import { ZxcvbnFactory } from '@zxcvbn-ts/core'
import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en'
import * as zxcvbnDePackage from '@zxcvbn-ts/language-de'
import { matcherPwnedFactory } from '@zxcvbn-ts/matcher-pwned'

const myPlugin = {
  install(Vue) {
    // optional
    const matcherPwned = matcherPwnedFactory(fetch)
    const customMatcher = {
      pwned: matcherPwned
    }

    const options = {
      // recommended
      dictionary: {
        ...zxcvbnCommonPackage.dictionary,
        ...zxcvbnEnPackage.dictionary,
        // recommended the language of the country that the user will be in
        ...zxcvbnDePackage.dictionary,
      },
      // recommended
      graphs: zxcvbnCommonPackage.adjacencyGraphs,
      // recommended
      useLevenshteinDistance: true,
      // optional
      translations: zxcvbnEnPackage.translations,
    }

    Vue.prototype.$zxcvbn = new ZxcvbnFactory(options, customMatcher)
  },
}
```

--------------------------------

### Importing Language Packages (3.x.x)

Source: https://github.com/zxcvbn-ts/zxcvbn/blob/master/docs/guide/migration/README.md

In version 3.x.x, language packages no longer have a default export. Use named imports for dictionaries and translations.

```typescript
import { dictionary, translations } from '@zxcvbn-ts/language-en'
// or
import * as enPackage from '@zxcvbn-ts/language-en'
```