When you use Mapbox in your React app, you need to authenticate with Mapbox servers using an access token. Mapbox provides two types of tokens: public tokens and secret tokens. Understanding the difference between these is essential to keeping your app secure.

A public token is designed to be shared in client-side code. It is safe to expose publicly, such as in your React app's source code, because it has limited permissions. Public tokens are restricted to specific scopes, like loading maps or styles, and cannot modify your Mapbox account or access sensitive data. You should always use a public token when including Mapbox in your frontend code.

A secret token has broader permissions and can perform sensitive operations, such as creating or deleting resources in your Mapbox account. Secret tokens should never be included in your client-side code or exposed in any way to users. They are intended only for secure server-side use, such as in backend APIs or deployment scripts.

To keep your tokens safe in a client-side React app, always follow these strategies:

• Use only public tokens in your frontend code;
• Never hard-code secret tokens in source files that will be bundled and shipped to the browser;
• Store tokens in environment variables during development, and inject them into your build process securely;
• Restrict your public tokens to only the required scopes and specific URLs using the Mapbox dashboard;
• Rotate your tokens regularly and revoke any that may have been exposed.

Before deploying your app, use this checklist to review your token usage:

• Confirm that only public tokens are present in your client-side code;
• Double-check that no secret tokens are committed to your version control system;
• Verify that your public tokens have the minimum required scopes;
• Ensure that your tokens are restricted to your app's domain or URLs in the Mapbox dashboard;
• Remove any unused or old tokens from your Mapbox account.