Hardware FixRecommendedDevice not working? Your driver may be the problemCheck updates for common hardware issues.Fix DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan Now×
Skip to content
World desk5 min

How to Protect a Translation API Key in Flutter and React Apps

A private translation API key cannot be kept secret in a Flutter package or React browser bundle. Keep it server-side, or use a deliberately public key only when the provider supports effective restrictions.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Do not put a private, billable translation API key in a Flutter app or React frontend. Both are client applications: mobile app packages can be inspected, and web code is delivered to users’ browsers. A React .env value can select build configuration, but once included in a public bundle it is not secret. Keep private provider credentials on a backend or serverless function, and have the app call that service instead.

Why Flutter and React clients cannot keep a private key secret

A credential embedded in a client is available to someone who can inspect that client. Flutter apps are distributed to users; React apps send JavaScript and related assets to browsers. Obfuscation, minification, and build-time environment variables do not change where the credential ends up.

As an Amazon Associate I earn from qualifying purchases.

Google Cloud’s guidance is explicit: “Don’t include API keys in client code or commit them to code repositories.” Google Cloud: Best practices for managing API keys. This applies to the security boundary, not to a particular framework: moving a key from a source file to a build setting does not make a client-held private credential secret.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Choose between a public restricted key and a private server key

The right design depends on the translation provider’s credential model. First confirm whether it explicitly supports a public key for client applications and what restrictions it can enforce. If it does not, keep the provider credential server-side.

Pattern When it fits Security boundary Trade-off
Direct client call with a deliberately public, restricted key The provider explicitly supports client-side keys and provides useful restrictions for the target app. Assume the key can be extracted. Limit its scope with the provider’s available application and API restrictions, and monitor usage. Less backend work, but restrictions and usage controls must carry the risk. Exact controls depend on the provider.
Backend or serverless proxy holding a private key The translation credential is private, billable, or not intended for distribution to clients. The provider key remains on the server. The service must authenticate and authorize callers, validate requests, and control usage. Requires backend implementation and hosting; adds a service hop, but provides a place to enforce policy and observe requests.

Application restrictions are useful defense in depth, but they do not hide a key embedded in a general-purpose client. Compare the provider’s supported authentication method, available restrictions, development and hosting effort, latency, abuse controls, and monitoring before choosing.

Build a proxy that is not an open relay

The client should call an endpoint you control. Your service checks the caller and request before attaching its server-side translation credential and contacting the provider. Google describes this pattern for its APIs: “The client should pass requests to the server, which can add the credential and issue the request.” Google Cloud: Best practices for managing API keys. Use the translation provider’s own documented request and credential format; Google’s method is not automatically applicable to another vendor.

  1. Keep the provider credential on the server. Store it in server-side configuration or an appropriate secrets store, not in the app bundle, browser code, or a repository.
  2. Authenticate callers and authorize the operation. Require a valid app user or account where appropriate, then check that the caller may use translation through your service. Do not treat possession of a public client identifier as sufficient authorization.
  3. Validate and constrain each request. Accept only the translation operations your app needs, validate fields and language values, and cap request size. Do not expose an endpoint that blindly forwards arbitrary provider requests.
  4. Apply usage controls. Enforce per-user or per-account quotas and rate limits. OWASP recommends HTTP 429 for requests that arrive too quickly and revoking keys when clients violate usage agreements. OWASP REST Security Cheat Sheet
  5. Keep credentials out of logs. Log operational details needed to diagnose failures without recording the provider key or other sensitive credentials.
  6. Prepare to rotate credentials. Know how to revoke a compromised key, issue a replacement, and update the server configuration.

OWASP warns: “Do not rely exclusively on API keys to protect sensitive, critical or high-value resources.” OWASP REST Security Cheat Sheet. A proxy still needs authentication, authorization, quotas, and input controls; it should not merely relocate an exposed key.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Restrict keys and use the provider’s documented transport

When a provider supports restrictions, scope a credential to only the APIs or services it needs, and apply the narrowest relevant application restriction. Google Cloud recommends both API restrictions and application restrictions; its documented application restriction types include website referrers, server IP addresses, Android applications, and iOS applications. Separate keys may be appropriate for different client types. The actual options and their value vary by provider, so follow the selected translation vendor’s current documentation.

For Google APIs, Google advises against putting a key in a URL query parameter because URLs can be exposed through scans; it recommends the x-goog-api-key header or a client library. For another translation provider, use that provider’s documented header or credential mechanism rather than assuming the Google header applies. Google Cloud: Best practices for managing API keys

Google Cloud says, “Unrestricted API keys are insecure.” Google Cloud: Manage API keys. For most Google Cloud APIs, its guidance recommends planning toward IAM policies and short-lived service-account credentials with least privilege rather than production authorization keys. Google documents a Gemini API exception; this is Google-specific guidance, not a general credential recommendation for other translation services. Google Cloud: Best practices for managing API keys

React environment variables are configuration, not secret storage

A React app’s build process can read environment variables to choose a development or production endpoint or other public configuration. But if a value is compiled into code sent to a browser, a user can inspect it. Do not put a private translation key in a frontend .env file and assume the filename, build system, or variable name protects it. Keep the private key in the backend environment instead.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Flutter build configuration does not protect a distributed secret

Build-time configuration can help select an API base URL or other non-secret setting for a Flutter app, but it does not make an embedded provider credential private. Treat any key shipped in the app as extractable. If the provider only offers a private credential, send translation requests through your backend rather than calling the provider directly from the app.

Firebase API keys are a narrow exception, not a translation-key precedent

Firebase documents that its API key is not the security boundary for Realtime Database, Cloud Firestore, or Cloud Storage data. Firebase Security Rules and App Check provide the relevant protections for those services, and under Firebase’s documented configuration, keys restricted to Firebase services do not need to be treated as secrets. This exception is specific to Firebase’s model; it does not make a private translation-provider key safe to ship in Flutter or React. Firebase: Learn about and manage API keys for Firebase

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.