title: React - Storing Token received from server
body: <p>This is something more likely as conception question. I am doing the Front-End of website and there is already created Back-end from another person. One of his endpoints is &quot;Login endpoint&quot; which sends me in reply several stuff:</p>
  <ol>
  <li>Token (JWT)</li>
  <li>UserId</li>
  <li>Name</li>
  <li>Address</li>
  <li>Company</li>
  </ol>
  <p>(and some others)</p>
  <p>I receive all of them directly after login as response. So I am wondering which is the best way to save them? As we can assume it will not be a problem to save everything except Token in localStorage or in cookie with <strong>js-cookies</strong> package but how to store a token? It is unsafe to be stored both in local/session storage and in cookie. Currently I have Auth context which stores all of this:</p>
  <pre><code>import React from &quot;react&quot;;
  
  export default React.createContext({
    token: null,
    userId: null,
    address: null,
    firstName: null,
    lastName: null,
    email: null,
    company: null,
    subscription: null,
    login: (token, guid) =&gt; {},
    logout: () =&gt; {},
  });
  </code></pre>
  <p>After login I pass it in</p>
  <pre><code>&lt;AuthApi.Provider
          value={{
            token,
            guid,
            login,
            logout,
            address,
            firstName,
            lastName,
            email,
            company,
            subscription,
          }}
        &gt;
  </code></pre>
  <p>In the App.js so they are accessible from all components inside the project with <strong>useContext</strong>.</p>
  <p>As you know, when browser is refreshed we lost all the values. So basically here I don't store the values and Token also in cookie or local/session storage but I loose it after refresh. What is the best solution here if I cannot make changes in the back-end?</p>