reactjs - How to Secure tokens when storing on the Client side?

Question

We have a system that connects our user to 2-3 third party applications. So, we usually store the tokens to be used for these applications for the user in the client side. When we make an API call to our server (our server is maintained by us), we also send the tokens to the backend, where it will be used to make API calls to these applications. Now, We're not using a Database, so We cannot store these tokens on the server side and hold a session token.

1. What are the best possible ways to hold the token on the client side? Is it safe to hold them as they are in the Cookies?
2. Keeping them open did not look fairly safe to us, so we're planing to add AES encryption to them, and whenever they are sent to the server, they are decrypted and used for API calls.
3. Is this the best approach we can continue while keeping our tokens secure? Or is there another better way to approach this issue?

question from:https://stackoverflow.com/questions/66060133/how-to-secure-tokens-when-storing-on-the-client-side

Answer 1

If the client does not need to use that token and is only expected to forward it to the server for authentication with the 3rd party I think it is definitely a good idea to encrypt it. This way, an eventually compromised encrypted token cannot be used to make requests to the 3rd party.

Cookies should be a safe place to store these tokens as long as you make sure you enable the Secure and HttpOnly attributes on them (more about restricting access to cookies). In a nutshell, you prevent cookies from traveling through unencrypted channels (reducing the risk to suffer man-in-the-middle attacks) and from being accessed from the Javascript (which prevents your cookie from being accessible by an XSS attack on your client).