Passphrase Generator Generate memorable yet secure passphrases using random word combinations that are easy to remember.

The tool uses the Web Cryptography API's crypto.getRandomValues() function to generate cryptographically secure random numbers, which are then used to select words from a curated list of 64 words. This list is stored in the WORD_LIST array and contains a mix of nouns, verbs, and adjectives. The entropy of the generated passphrase is calculated using the formula log2(wordlist_size) * word_count, where wordlist_size is the number of words in the list and word_count is the number of words selected for the passphrase. For example, with 64 words, selecting 4 words results in approximately 32 bits of entropy, while selecting 5 words results in around 40 bits.

The tool also applies transformations to the selected words, including capitalizing the first letter of each word using JavaScript's string manipulation methods. Additionally, users can choose to append a random number between 0 and 999 to the end of the passphrase, which increases the entropy by approximately 10 bits. The separator used to join the words can be configured using a range of options, including hyphens, dots, underscores, and spaces, which are stored as strings in an array and selected using JavaScript's array indexing methods.

When generating passphrases, the tool uses React's useState hook to store the state of the application, including the word count, separator, capitalization option, and generated passphrases. The generate function is wrapped in a useCallback hook to memoize it and prevent unnecessary re-renders. This function iterates over a loop 5 times, each time selecting a new set of words and applying the chosen transformations. The resulting passphrases are stored in an array and displayed to the user, along with an estimate of their entropy calculated using the formula mentioned earlier.

The navigator.clipboard.writeText() method is used to copy the generated passphrase to the user's clipboard when they click the "Copy" button. This method is part of the Clipboard API and allows web applications to interact with the user's system clipboard. The setTimeout function is used to reset the copied state after 2 seconds, which triggers a re-render of the component and updates the display.