title: How to hide API keys in React?
body: <p>Is it true that keeping confidential API keys in a .env file doesn't completely hide the key in React because you are still able to see this key in the browser?</p>
  <p>So what's the right way to store API keys in React? Do I need to retrieve them from the server?</p>
  <p>For example:</p>
  <pre><code>const [key, setKey] = useState('');
  
  const getApiKey = async () =&gt; {
      await axios.get(&quot;https://example.com/getApiKey&quot;).then((res) =&gt; { setKey(res) });
  }
  
  useEffect(() =&gt; {
      getApiKey();
  }, []);
  </code></pre>
  <p>Do I put it in the state then use it like this?</p>
  <pre><code>&lt;StaticGoogleMap
      className=&quot;google-map&quot;
      size=&quot;300x300&quot;
      apiKey={key}
  /&gt;
  </code></pre>
  <p>I thought this way the API key would be still visible to the users in the browser.</p>
  <p>I would really appreciate it if someone could explain the right way of securely storing API keys on the frontend. Thanks!</p>