CODEWITHSUNDEEP
javascriptreactjsecmascript-6oauth-2.0
Thanuja
Thanuja

Reputation: 433

How to store OAuth2 access tokens in a React application?

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?

Upvotes: 3

Views: 2181

Answers (3)

Thanuja
Thanuja

Reputation: 433

One of the best solution I found recently is oauth2-worker, here it stores tokens in variables inside a worker so that it won't be accessible from the js running on the applications. Also it works as a proxy and we need to make API calls through the worker so that it adds the Authorization header.

Upvotes: 1

Sourabh Dubey
Sourabh Dubey

Reputation: 406

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.

Upvotes: 1

Tony
Tony

Reputation: 20092

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

Upvotes: 1

Related Questions