I came across your query regarding implementing client-side encryption with WebAuthn as a second factor in a PWA project. It resonates well with a recent article I wrote about integrating biometric authentication using the WebAuthn API.

In your case, you’re looking to encrypt a randomly generated key while ensuring that the server remains oblivious to client details. One potential approach is to leverage the public key generated during the WebAuthn registration process to encrypt your symmetric key. Although you noted that the public key changes with each login attempt, you can store the initial public key during the registration phase and use that for encryption, as it is unique to the user and the authenticator.

Here’s a simplified outline of how you could structure the encryption process:

Registration Phase:

Generate a key pair for WebAuthn (public and private). Store the public key securely in your database along with any user identifier. Encryption Phase:

When you need to encrypt your database key, use the stored public key to perform asymmetric encryption. Store the encrypted symmetric key on the server, while keeping the decryption private key on the client side. Authentication Phase:

Upon user authentication, retrieve the corresponding public key and use it for decryption. This approach ensures that the server doesn't have access to the private key, keeping your encryption strategy client-side.

For further details, you can refer to my article on Medium about WebAuthn, where I provide code snippets and practical steps for implementing biometric authentication. It may offer additional insights into working with WebAuthn effectively. Implementing Biometric Authentication in PWA

If you have any specific questions or need help with the implementation details, feel free to ask!

Best, soroush alipasand