How to securely store the Mapbox API token with the Leaflet.js map input plugin.

for anyone who uses the Leaflet.js map input plugin with mapbox, how do you store the the mapbox api token securely? If you are like me and check in all your studio config, the leaflet.js plugin creates a

leaflet-input.json

file for you to interact and configure the plugin with. One of the fields is 'accessToken', and im not sure how to both check in this file, all while giving leaflet access to my token (its just a json file, its not a .js file, so i cant access env vars or import the token from some keystore)

Sanity team recommended using something like this: https://www.npmjs.com/package/sanity-secrets

thanks, this is great. Any idea where you store the provided example config? It seems this provides a means to input your secrets from studio? And where would i add this component if so, deskStructure.js?

It looks like

accessToken

lives in the JSON file and you use URL restrictions on the Mapbox side to secure it—similar to Simeon’s suggestion for Google Maps .

interesting, i didnt know about this! So its a unique access token than i can checkin without fear of others using it that only i can use, makes sense

Yes, that’s the way I understand it.

so essentially, this URL would be my custom sanity studio domain?

Correct. You would lock it down to your production studio domain. This page recommends using multiple tokens to handle different environments (e.g., to open up localhost in development).

great article, and makes sense, a key for each env

so they seem safe to checkin then

If you want to be absolutely sure and can wait until tomorrow, I can double-check, but yes, I am fairly confident these are not just safe but required to be checked in.

thanks geoff!

Got confirmation: Lock the key to the same domain as the studio and make sure your repo is private, and you should be golden.

thank you again, hmm my repo is public, do you think that should be a big deal given these are locked to the domain?