Client-side React apps run entirely in the browser, and build-time variables such as VITE_ and REACT_APP_ are inlined into the bundle. Keep secret API keys out of React code entirely and fetch private data through a server or edge proxy.
Public by design. Use only for publishable values.
Belong in a proxy, never in component code.
Aggregated responses reduce request waterfalls and keep secrets out of components.
JSX escapes strings automatically. Sanitize before any raw HTML rendering.
They become plain strings in the shipped JavaScript.
Unsanitized HTML from CMS or user content enables XSS.
Call a RealComposer edge URL from React with a client token. The pipeline injects vault secrets and returns slim JSON shaped for your components.
You cannot hide it in client code. Move the call to a server or edge proxy that injects the key.
To use OpenAI in a client-side React app without leaking your secret key, never include OPENAI_API_KEY or REACT_APP_OPENAI_API_KEY in frontend .env files. Instead, route your fetch calls through a RealComposer edge endpoint that injects your secret key server-side on Cloudflare Workers and enforces CORS origin whitelisting.
SendGrid API keys must never be exposed client-side. RealComposer acts as an edge gateway that validates the incoming message, injects your SendGrid Bearer token server-side, and prevents unauthorized outbound email spam.
You should not store Salesforce credentials in React client code. Vault-inject OAuth or integration tokens at the edge; React calls one public client token URL. RealComposer Secret Vault injects headers on Cloudflare Workers so only your edge URL is public.
You should not store Paddle credentials in React client code. Proxy Paddle Billing API with restricted client tokens and vault-held API keys. RealComposer Secret Vault injects headers on Cloudflare Workers so only your edge URL is public.
You should not store Intercom credentials in React client code. Intercom contacts and events via edge proxy with server-side Bearer token. RealComposer Secret Vault injects headers on Cloudflare Workers so only your edge URL is public.
To stitch firebase firestore with algolia search index, use one RealComposer pipeline with parallel steps. Firestore document fetch and Algolia query in one search-as-you-type call. Your React app makes one request instead of several sequential upstream calls.
Credential leakage is the unintended exposure of secrets such as API keys, tokens, and passwords. Common sources include JavaScript bundles, decompiled mobile apps, public Git repositories, browser network logs, and low-code platform configurations visible to users.
Network Request WaterfallA network request waterfall is a chain of HTTP requests that must happen one after another because each depends on data from the previous response. Each step adds a full round trip, so total load time grows with the length of the chain.
Edge Secret InjectionEdge Secret Injection is a security pattern where sensitive upstream API credentials (e.g. Stripe Secret Keys, OpenAI Tokens) are stored in an encrypted vault and injected into HTTP request headers exclusively at the edge runtime, ensuring client browsers and mobile apps never see or store the keys.