I'm making a web application on the MERN stack which stores sensitive user data, in the form of a big block of text.
The encryption method I am using is that when a user registers, a random key is generated (generated key), and using another key that is derived from the user's password using PBKDF2 (derived key), I use the derived key to encrypt the generated key and store that new key (encrypted key) in the database.
The sensitive data will be encrypted/decrypted by pulling the encrypted key from the database, decrypting it using the derived key (remember, the derived key is a hashed version of the user's password, not stored in the DB) which results in the originally generated key which we can finally use to encrypt and decrypt the data.
The issue I'm running into now is, this is only secure if the user has to log in every time they open or refresh the page; since we need to prompt them for their password in order to get the derived key.
I'd like to add some convenience here, and instead of making them log in every session I want to persist this derived key somewhere on the browser.
I know localStorage is prone to xss, and cookies are prone to csrf. I'm leaning towards keeping the derived key in a httpOnly, strict sameSite cookie which I think may be the best I could hope for in terms of security.
Is this line of reasoning correct, or am I about to create some big vulnerability? If so, are there any recommendations or do I just need to log them in every time they refresh the page?