0

If a user logs in with user and password, he gets an new api key, so react can access the Rest Api with his user account. How do you save this api key? And what happend if the user clicks 'refresh page'?

Of course I can initalize the Rest App every time with

<script>
    window.REP_LOG_API_KEY = '19e8317a38b24af82da056f6ed36e831ea6b8f9bfcad996aaa56ec773f9f2e1d';
</script>
<script src="build/reactapp.js"></script>

but dont look very secure (but I like the idea of changing this key every page request, if you have no single page application and react is only used here and there).

To store the Api Key in a cookie would be also possible (secure but not httponly, normally I only use safe cookies). Is this the only way?

I'm still not quite sure how to use react with a rest api with individual api keys. Thany you.

Improve this question

3 Answers 3

Reset to default
3

The API key you are talking about is probably cookies/authentication token. If it is cookies, you need to enable httpOnly to prevent attacks. For authentication token, the most common way to store is in localStorage or sessionStorage. However, it is insecure, even with HTTPS and short expiry dates (and you do HAVE to use them). Putting it in Redux store is the same as putting it in a global js object where everyone can see.

What will protect your app is to check standard headers to verify the request is same origin (source and target origins check) and CSRF token. Also a common pattern is to verify the token signature before storing and using it. You can check out Auth0 blog on where to store it here: https://auth0.com/docs/security/store-tokens

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

There are several ways to do this. If you are using a state management library like Redux, MobX, Flux etc, then you can put it there.

Another place to store them is in the browser local storage. This will keep the token saved even if the user refreshes the page or open a new tab etc. Yet I am not 100% sure whether it's a safe thing to do.

Or you can attach it to the Rest Client itself. IMO, this is the best way to do it. I will summarize the steps to do that in brief.

  1. Create a Rest Client by wrapping a solution like fetch-api or axios.
  2. Add a module state, where you can store any data
  3. Whenever making a call, check if there is a token, if a token is not there in the state, then authenticate first.
  4. If the token is there, use it to make the api call. If the request fails with a 403(or may be 401. It depends) error, that means the token has possibly expired. So authenticate again and update the token.

Something like this,

class ApiClient {
  constructor() {
     this.token = null;
  }

  login(username, password) {
     // make the call to login
     // set this.token with the response
  }

  request() {
     // Make the API call using the token
  }
}

What will happen with a refresh? Then since the token is not there, the authentication will need to happen again. This will not be a problem if you use cookies to manage sessions.

Improve this answer

1 Comment

thank you. yes, I think I need a cookie. Or I initalize the react api in html with an api key and regenerate the new api key right after react starts. When the User reload, the same game again, without a new login. So the api key is never stored permanently in React.
0

You can put it in Redux store. I think it is the best implementation.

Improve this answer

1 Comment

Wow, seriously?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.