Here's what a React Leaflet TileLayer component that requires an access token looks like:

<TileLayer
  url='/{z}/{x}/{y}{r}.png?access-token=1234567890'
  attribution='<a href="; title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href=";>OpenStreetMap</a> contributors'
/>

But even if I use an environment variable from a .env file like

const jawgAccessToken = import.meta.env.VITE_JAWG_TOKEN

<TileLayer
  url=`/{z}/{x}/{y}{r}.png?access-token=${jawgAccessToken}`
  attribution='<a href="; title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href=";>OpenStreetMap</a> contributors'
/>

instead of hardcoding it, that would be still be exposed because my React components are on the frontend. How do I get access to this tilelayer without exposing my secret token?

I was thinking of doing a relay from my frontend to my backend, like replacing the url in the TileLayer component with a url for my backend, where I'd handle a GET request by making a GET request to the Jawg url and then returning that to the frontend. But I doubt that's sufficient and this seems like a common enough problem (surely other people have needed to use tilelayer access tokens without exposing them?) that I was hoping someone would have the best practice answer to this problem.

Thank you!

Here's what a React Leaflet TileLayer component that requires an access token looks like:

<TileLayer
  url='https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=1234567890'
  attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap./copyright">OpenStreetMap</a> contributors'
/>

But even if I use an environment variable from a .env file like

const jawgAccessToken = import.meta.env.VITE_JAWG_TOKEN

<TileLayer
  url=`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=${jawgAccessToken}`
  attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap./copyright">OpenStreetMap</a> contributors'
/>

instead of hardcoding it, that would be still be exposed because my React components are on the frontend. How do I get access to this tilelayer without exposing my secret token?

I was thinking of doing a relay from my frontend to my backend, like replacing the url in the TileLayer component with a url for my backend, where I'd handle a GET request by making a GET request to the Jawg url and then returning that to the frontend. But I doubt that's sufficient and this seems like a common enough problem (surely other people have needed to use tilelayer access tokens without exposing them?) that I was hoping someone would have the best practice answer to this problem.

Thank you!

• reactjs
• leaflet
• react-leaflet

1 Answer 1

looks like the "best practices" answer is to add a URL restriction when creating the access token