zxcvbn-ts

Languages

zxcvbn-ts is available for multiple languages. If your language is not supported you can set the options by yourself.

Current supported languages:

  • German
  • English
  • Spain (Spain)
  • Finnish
  • French
  • Indonesia
  • Italian
  • Japanese
  • Dutch (Belgium)
  • Polish
  • Portuguese (Brazilian)

Feedback

By default, zxcvbn-ts uses keys as feedback. This way you can integrate zxcvbn-ts into your own translation system. If you don't have an own translation system or want to use predefined translation you can use one of the language packs. Each language pack has its own translation file that you can use like this:

import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core'
import { translations } from '@zxcvbn-ts/language-en'

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

zxcvbnOptions.setOptions(options)

zxcvbn(password)

Dictionary

By default, zxcvbn-ts doesn't use any dictionaries to let the developer decide how much of the library will be used. This makes the library tiny but inefficient compared to the original library. It is recommended to use at least the common and english language package.

import { zxcvbn, zxcvbnOptions } 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,
  },
}

zxcvbnOptions.setOptions(options)

zxcvbn(password)

Keyboard patterns

By default, zxcvbn-ts don't use any keyboard patterns to let the developer decided how much of the library will be used. It is recommended to use at least the common keyboard patterns.

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

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

zxcvbnOptions.setOptions(options)

zxcvbn(password)

Add a new language package

To add a missing language package you need to do the following things:

  • Clone the repo.
  • Install dependencies with yarn install.
  • Create a new language package inside the packages/languages directory. You need following file structure:
- src
  - translations.ts
- package.json
- README.md
- tsconfig.json

  • Fill src/translations.ts with translations for your language.

  • Adjust README.md file as appropriate.

  • Find some reliable sources for some dictionaries. As a minimum, you need to have a source for firstname, lastname and commonWords. For common words you can check out https://github.com/hermitdave/FrequencyWordsopen in new window - there are a lot of languages available.

  • Add your language and sources to the generator list in ./data-scripts/lists.ts.

    There is a default generator that takes simple lists that have only single words per line and can have occurrences of that word with a space separator. For example something like this:

    John
Debra
Billy

    or:

    you 23123
i 12345
the 234

    If your list is more complex you need to write your own generator like the password generator or the keyboard generator

  • Run yarn generate:languageData. This will generate the JSON files and index.ts.

  • During debugging, it might be easy to only generate the language files for one language, use yarn generate:languageData nl-be for example.

  • Create a pull request to the master branch.

  • (Optional) Use the Wikipedia extractor; one of the maintainers can do this but this will increase the time until it is merged.