Counter-Based OTP Generator Generate HMAC-based one-time passwords (HOTP) with counter tracking.

The tool works under the hood by first decoding a Base32 secret using the b32Dec function, which replaces whitespace and equals signs with an empty string, converts to uppercase, and then maps each character to its corresponding 5-bit value based on the Base32 alphabet defined in the constant A. This process results in a binary string that is then converted to a Uint8Array, which represents the decoded secret key.

The genHOTP function generates the HOTP code by creating an 8-byte big-endian counter using the DataView API and setting the counter value at offset 4. It then imports the decoded secret key as a raw key using the Web Crypto API's subtle.importKey method with the HMAC algorithm and SHA-1 hash, and signs the counter buffer using the subtle.sign method to produce an HMAC-SHA1 signature.

The tool applies dynamic truncation to the last byte of the signature by taking the offset from the last nibble, extracting 4 bytes starting at that offset, applying a mask to extract the lower 31 bits, and then reducing the result modulo 10 raised to the power of the desired number of digits. The counter is incremented after each successful code generation, ensuring that client and server stay in sync.

The b32Enc function is used to generate random Base32 secrets by creating a Uint8Array filled with random values using crypto.getRandomValues, converting each byte to its corresponding 5-bit value, padding to the nearest multiple of 5 bits if necessary, mapping these values back to characters based on the Base32 alphabet defined in A, and finally constructing the encoded string.

The Web Crypto API's subtle.importKey method allows importing the decoded secret key as a raw key for HMAC-SHA1 signing. In addition to generating HOTP codes, it also tracks code generation history by storing counter-code pairs in an array of objects when each new code is generated, allowing users to view previously generated codes and their corresponding counters.

The copyToClipboard function uses the navigator.clipboard API to copy the generated HOTP code directly into the user's system clipboard. The tool's UI components are built using React with hooks like useState for managing state changes, useCallback for memoizing functions that generate secrets or compute HOTP codes, ensuring efficient updates and minimizing unnecessary recalculations.

Each component is wrapped in a glass-card container to provide visual separation between sections of the interface, including input fields, buttons, history display.