'Will my .env variable value be exposed to clients?

I am using .env to store all my private Api_key value, which is to call third party API key like google map.

I was told that, with react js, the javascipt is actually excuted in client side.

Does it mean that actually, my .env variables are accessible by clients too in which they can actually see my API key?

For example, in my component code, I have this

<Geocoder
  mapRef={mapRef}
  mapboxApiAccessToken={process.env.NEXT_PUBLIC_mapbox_key}
  position="top-left"
  placeholder="Set your position"
/>

In my .env

NEXT_PUBLIC_mapbox_key=<KEY>

If yes, how do I keep it safe while providing the key to the third party components



Solution 1:[1]

Yes, users will be available to see your API key in network inspection, even if you will keep it in the .env file which is excluded from git.

It's better to make a separate route on your backend side and keep your API key on the backend - if it is possible.

Some useful links:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ivan Stelmakh