How to securely store Mapbox API token in Leaflet.js plugin config for Sanity?

Great question! This is a common concern when working with the Leaflet.js map input plugin and Mapbox. The good news is that Mapbox access tokens are actually designed to be checked into your codebase when properly secured.

The Recommended Approach: URL Restrictions

Instead of treating your Mapbox token like a traditional secret, you should secure it using Mapbox's URL restrictions feature. Here's how it works:

1. Lock the token to your Studio domain: In your Mapbox account settings, configure URL restrictions for your access token. This means the token will only work when requests come from your specific Sanity Studio domain (e.g., your-studio.sanity.studio).

2. Use multiple tokens for different environments: Create separate tokens for:

   • Production (locked to your production Studio URL)
   • Development (locked to localhost:3333 or your local dev URL)
   • Staging (if applicable)

3. Check the config file into your repo: Once the token is URL-restricted, you can safely commit your config/leaflet-input.json file with the accessToken field. The token becomes useless to anyone who doesn't have access to your specific Studio domain.

Additional Security Considerations

According to the Sanity team's guidance, you should:

• Keep your repository private if possible (though URL restrictions provide the primary security)
• The URL restrictions make the token effectively useless outside your Studio environment

Alternative (Less Recommended): Sanity Secrets

If you absolutely need to avoid checking in the token, you could use the sanity-secrets plugin, but this adds complexity and isn't the standard approach for Mapbox tokens since they're designed to work with URL restrictions.

The URL restriction approach is actually the intended security model for client-side Mapbox tokens - similar to how you'd secure a Google Maps API key. It's not a workaround, it's the proper solution!