Storing encryptions keys in frontend technologies like Angular, VueJs, ReactJs, etc

You must have come across a task where you want data from/to an API need to be encrypted, the only challenge you will experience is storing your privates keys securely in you code.

In frontend technologies like Angular, VueJs, ReactJs, etc there is risk of exposing your encryptions private key over internet, This can be secured easily by using asymmetric cryptography using private and public keys

Asymmetric cryptography, also known as public key cryptography, uses public and private keys to encrypt and decrypt data. The keys are simply large numbers that have been paired together but are not identical (asymmetric). One key in the pair can be shared with everyone; it is called the public key. The other key in the pair is kept secret; it is called the private key. Either of the keys can be used to encrypt a message; the opposite key from the one used to encrypt the message is used for decryption.

So to secure your keys follow below steps

1. Encrypt your data with public key (Node-RSA npm)
2. You don’t need Private key to encrypt (in frontend)
3. Sever side we will use private key to decrypt the content
4. This will secure you keys and achieve data encryptions in API data transfer

Thanks