Use only a provider-designated public key in React, and treat every request from the browser as untrusted. The API or data layer must authenticate users and enforce what each user can read or change. Keep elevated credentials and private third-party keys on a trusted server, where each operation can be checked and limited.
Understand the security boundary
A React app runs on a user’s device. Anything included in its JavaScript bundle, source maps, browser storage, or outgoing requests can be inspected and copied. Obfuscation and hidden UI controls do not turn a browser-held credential into a secret.
Separate the system into three responsibilities:
- Browser: presents the interface and makes requests using a provider-designated public or publishable project key. Treat input and client-side state as user-controlled.
- API and data layer: verifies identity and decides whether the caller may perform a particular operation on a particular record or field.
- Trusted backend, when needed: holds elevated or private credentials and performs privileged work only after authenticating the caller and checking permission.
An application key identifies or enables access to a project; it is not proof that a particular user is entitled to data. Providers implement these concepts differently, so follow the security model for the API you actually use.
Decide whether the React app can call the API directly
Direct browser access can be appropriate when the provider explicitly supports a public client key and can enforce robust user- and object-level access rules. A server layer is needed for operations involving a secret credential, a private upstream API, or custom business authorization the provider cannot safely enforce for the client request.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
| Decision question | Direct browser access may fit when… | Use a trusted backend for the operation when… |
|---|---|---|
| Can access be scoped per user and object? | The provider can enforce and test those rules at the API or data layer. | The required checks cannot be reliably enforced by the provider’s client-facing policy system. |
| Does the operation need a secret? | No elevated or private third-party credential is needed. | It needs an elevated provider credential or private upstream API key. |
| Is custom authorization required? | The provider’s rules express the complete permission decision. | Business rules require trusted logic, such as verifying eligibility or a workflow state. |
| Can requests and costs be bounded? | Provider controls can limit the exposed operations adequately. | Extra per-user checks or controls are required; the backend must add them rather than blindly proxying. |
A backend is not automatically safer: a proxy that accepts arbitrary client requests and forwards them with a powerful credential simply relocates the risk.
Use public keys in the browser and protect secrets
Use only a key the provider explicitly designates for browser, mobile, or other shipped client code. Keep service credentials, secret keys, and private third-party keys in a controlled backend environment; never put them in a React environment variable on the assumption that the variable name makes it private.
Supabase illustrates the distinction: its guidance assigns publishable keys to shipped code and secret keys to controlled backend components, and warns, “A leaked secret key exposes all of your project’s data” (Supabase API keys documentation). Supabase says secret keys bypass row-level security. This is an example of Supabase’s model, not a universal description of hosted API keys.
If an elevated key has reached a frontend build, source map, browser request, or client storage, remove it from the client and rotate it. Removing it from the latest source does not invalidate copies already downloaded or captured.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteAuthenticate users and authorize every operation
When data is user-specific, establish user identity with the provider’s authentication mechanism or another trusted identity system. Then enforce authorization at the API or data layer for each operation and each object identifier. Do not rely on hidden buttons, client-supplied owner IDs, or possession of the public project key.
For Supabase-style database APIs
Supabase’s React quickstart shows a JavaScript client using the project URL and key, while its security guidance describes frontend access governed by security policies and authenticated JWTs (Supabase React quickstart; Securing your data). In this model, grants and row-level security (RLS) work together: grants determine what roles may access, and policies constrain which rows those roles may see or change. Supabase’s GraphQL documentation likewise describes API-key access, user JWTs, roles, grants, and RLS as parts of its access model (Supabase GraphQL documentation).
Rank #4
- 【Premium Material】High-quality magnet material in black ABS house, durable and never rusts.
- 【Easy to Install】Super easy to install, no drill needed.
- 【Wide Application】You could use them to display your items, and press the paper on the whiteboard, keep two doors closed, and little gadget to attract wrenches, keys, etc.
- 【Package Item】There are 3 combinations for you, 1 set, 2 set, 4 set, just choose according to your need.
- 【Satisfaction Guarantee】Your satisfaction is our top aim, if encounter any problems, please feel free to contact us.
- Enable the relevant policy mechanism for every exposed table, and check all roles the endpoint can use.
- Write policies for reads and writes separately where their permissions differ; test inserts, updates, and deletes as well as queries.
- Test anonymous access, a signed-in user’s own records, another user’s records, and privileged backend access.
- If an access check fails, inspect both the provider’s grants and its row policies; a policy does not necessarily override a missing grant.
For other providers
Do not assume a public key or RLS has the same meaning everywhere. For example, Firebase describes its client API keys as project or app identifiers, with authorization handled through IAM, Firebase Security Rules, and App Check (Firebase API key guidance). Apply the provider’s documented authorization controls rather than transplanting Supabase configuration concepts.
Put privileged work behind a checked server boundary
For admin actions, secret-backed integrations, or custom permission logic, have React call a server endpoint or function. That component should validate the caller’s session or token, independently check permission for the requested action and target object, validate inputs, and use the least-privileged credential that can perform the work.
Recommended Free Tools
Pass identity through a validated token or session, not a client-supplied user ID that the server trusts without verification. Restrict which operations the server exposes; do not accept an arbitrary URL, query, or command and execute it with backend privileges.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Restrict origins, transport, and exposed behavior
Use HTTPS/TLS for API traffic. Configure CORS for only the browser origins the application needs, and allow only necessary methods and headers. CORS is enforced by browsers; it does not stop curl, scripts, mobile clients, or a modified app from making requests. Authorization must therefore be enforced by the API itself, not inferred from an allowed origin. OWASP covers these controls in its REST Security Cheat Sheet and API8:2023 Security Misconfiguration.
- Allow only the HTTP methods the application needs and reject unsupported methods safely.
- Do not put passwords, tokens, or API keys in query strings; URLs can end up in logs and other records.
- Return useful but non-sensitive errors. Avoid stack traces, internal paths, or configuration details in responses.
- Review writable properties as carefully as readable fields: a caller may be allowed to edit one field but not another.
- Inventory deployed endpoints and API versions, remove unused routes, and review relevant security and cache headers.
Limit request volume and cost
Validate query parameters and request bodies on the server or provider. Set maximum page sizes, payload sizes, batch counts, and limits on expensive operations. Rate-limit sensitive or costly actions; per-user or per-key limits can complement IP-based controls. Configure provider spending limits or billing alerts where available. OWASP identifies unbounded paging, batching, request volume, and provider costs as resource-consumption risks (API4:2023 Unrestricted Resource Consumption).
Apply the controls in a release sequence
- Map the surface: list the data involved, its sensitivity, the API endpoints, and the operations the React app genuinely needs.
- Locate credentials: identify what runs in the browser and what runs on the server. Remove elevated credentials from frontend variables, source maps, build artifacts, browser storage, and client requests; rotate any exposed secret.
- Set identity and permissions: configure user sign-in where needed, then define authorization per operation and object rather than trusting client state.
- Test access boundaries: exercise anonymous, signed-in, cross-user, and privileged cases. For database APIs with row policies, test both the provider’s grants and row-level rules.
- Move privileged operations: route secret-backed or custom-authorized work through a server or function that authenticates and checks permission independently.
- Constrain traffic: narrow CORS, use TLS, allow necessary methods and headers, validate inputs, cap request sizes and results, and configure rate and spending controls.
- Review what remains exposed: inspect response fields, writable properties, errors, logs, versions, headers, and unused endpoints before release and as the API changes.
Use a threat checklist, not a single-key checklist
OWASP’s 2023 API risk categories include Broken Object Level Authorization, Broken Authentication, Broken Object Property Level Authorization, Unrestricted Resource Consumption, Broken Function Level Authorization, Unrestricted Access to Sensitive Business Flows, Server Side Request Forgery, Security Misconfiguration, Improper Inventory Management, and Unsafe Consumption of APIs (OWASP API Top 10 – 2023). For a React client, these categories point to a practical question: can a caller change the object, field, action, volume, or upstream destination and gain access or cause cost the intended interface would not permit?
The exact controls depend on the provider, API protocol, identity system, hosting setup, data sensitivity, and threat model. Supabase’s API-key documentation says legacy anon and service_role keys are being deprecated by the end of 2026; consult its live migration guidance for current timing and implementation details rather than assuming all providers or projects use the same key names.
Quick Recap
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.
