How to store OAuth2 access tokens in a React application?

Question

I'm new to React and want to securely store the OAuth2 access token to invoke APIs. I have found following options,

1. Keep it in the local-store/session-store (This can be vulnerable to XSS attacks)
2. Having a back-end for the React application and store access token in back-end session and keep a session cookie to identify browser session. Then make all the API calls through back-end to add Bearer header.
3. Encrypt the access token and store it as a cookie. API access will be haven through the back-end where encrypted cookie will be decrypted and added as a Bearer header.

What will be the best solution for this?

Answer 1

I would go for third option

Encrypt the access token and store it as a cookie. API access will be haven through the back-end where encrypted cookie will be decrypted and added as a Bearer header.

Everything related to token we have to store in the client side there is no way around but can make it secure by adding encryption to it to make it more secure but this approach will make developer has to setup encrypt and decrypt algorithim to handle to token

Answer 2

Your second option is best. We also doing this. Having a back-end for the React application and store access token in back-end session and keep a session cookie to identify browser session. Then make all the API calls through back-end to add Bearer header.