Mockly

examples

Server secret imported into a client component

A server-only helper was imported into a client component, leaking secrets through the bundle. This example breaks down what shipped, what caused it, the fix that worked, and how to apply the takeaways to your own schema.

Scenario: Server secret imported into a client component (what happened)

A shared helper for supabaseAdminClient ends up imported by a client component, directly or through another module.

What went wrong in Server secret imported into a client component (root cause)

The dependency graph touched a client file, so the secret-bearing module was bundled and shipped.

What fixed Server secret imported into a client component (actionable change)

Enforce server-only module boundaries, refactor client code to call backend endpoints, and rotate any leaked secrets.

Why the fix works for Server secret imported into a client component

Clear module boundaries keep secrets on the server and backend endpoints provide a reviewable interface for privileged work.

Takeaways you can apply

  • Client/server boundaries break easily.
  • Secrets can leak via indirect imports.
  • Prefer backend endpoints over client-side admin helpers.
  • Add build checks to prevent regressions.

How to map Server secret imported into a client component to your own schema (make it concrete)

An example becomes actionable when you can point to the exact resource in your project.

  1. Write down the resource under test (table name, bucket name, function name).
  2. Write down the intended boundary in one sentence (who should be able to do what, and via which server path).
  3. List the client code paths that currently reach the resource (direct SDK calls, REST calls, Storage downloads, RPC calls).
  4. Pick one path and reproduce the risky behavior once (so you’re not guessing).
  5. Apply the smallest fix that enforces the boundary, then re-test the same path until it fails reliably.

This prevents the common failure mode where a fix works for one UI flow but the underlying API is still reachable directly.

How to reproduce Server secret imported into a client component safely (so you can verify the fix)

  1. Identify the exact resource involved (table name, bucket name, function name).
  2. Attempt direct access using the same client credentials your app ships (anon/authenticated).
  3. Record what succeeds (status code, rows returned, file downloaded) so you can repeat the same test after fixing.
  4. If the example involves policies: confirm whether RLS is enabled and forced on the table.
  5. If the example involves Storage: test both object fetch and listing behavior (enumeration often matters).

Signals that confirm the Server secret imported into a client component root cause

  • You can access the resource without going through your UI or backend endpoint.
  • Access is possible with anon/authenticated credentials even though the app implies it shouldn’t be.
  • Policies/grants are broader than intended or not enforced (RLS disabled/not forced).
  • The fix requires changing both configuration (grants/policies/bucket settings) and application call paths.

Verification checklist after fixing Server secret imported into a client component

  1. Repeat the exact same direct access test you used for reproduction and confirm it fails (401/403).
  2. Confirm the app still works via backend endpoints for authorized users.
  3. Re-run a scan or checklist queries and confirm the exposure signal is gone.
  4. Check other environments (staging/prod) — drift is a common cause of “fixed in dev” failures.

Variations and edge cases for Server secret imported into a client component

  • The UI may hide a list view, but the REST endpoint can still be called directly.
  • IDs and filenames are often enumerable; security should not rely on “hard to guess.”
  • A fix that blocks SELECT may still leave INSERT/UPDATE exposed (or vice versa).
  • Storage links can be shared or cached; signed URL TTL and bucket privacy both matter.
  • RPC can bypass table policies if functions run with elevated privileges.

How to prevent Server secret imported into a client component from coming back (drift guard)

  • Add a release checklist item or CI query that flags new public grants/policies/buckets/functions.
  • Keep a short runbook: what to test directly when this surface changes.
  • Re-scan after migrations and after any change to auth, policies, Storage, or RPC.

What to change in your codebase after fixing Server secret imported into a client component

Most exposure fixes fail because teams change config but keep the same client call paths.

A safer pattern is to make the authorized path explicit in server code:

  • Create a backend endpoint for the operation (read/write/download/export).
  • Enforce authorization in the endpoint (ownership, membership, tenancy).
  • Return only the minimum necessary data (avoid overfetch).
  • Update the frontend to call the backend endpoint instead of calling Supabase directly.

This turns the fix into an architectural boundary you can test and monitor.

Step-by-step remediation plan for Server secret imported into a client component (practical)

Use this as a practical sequence you can follow without guessing:

  1. Identify every client code path that touches the resource (table/bucket/function).
  2. Implement a backend endpoint that performs the operation with explicit authorization.
  3. Deploy the backend endpoint first and validate it works for authorized users.
  4. Switch the frontend to call the backend endpoint (feature flag if needed).
  5. Revoke direct client access (grants, bucket settings, EXECUTE grants, broad policies).
  6. Run the verification checklist: direct access must fail; backend must succeed.
  7. Re-scan and confirm the exposure signal is gone.
  8. Add a drift guard so the next migration can’t silently reintroduce it.

Post-fix monitoring for Server secret imported into a client component

  • Watch for spikes in denied access after tightening permissions (it reveals missed app paths).
  • Monitor Storage downloads and RPC calls for unusual patterns (automation and scraping often look different than real users).
  • Re-run drift checks after migrations and environment changes so the issue doesn’t silently return.

Post-fix evidence checklist for Server secret imported into a client component

Keep these small artifacts so a teammate can validate the boundary quickly after a migration:

  • A saved pre-fix direct access request (the one that succeeded).
  • The same request after the fix (must be denied).
  • A note describing the authorized backend endpoint path and the authorization rule it enforces.
  • A drift guard item you can run after future migrations (scan, checklist query, or release step).

This reduces the chance of silent regressions and makes incident response faster.

Related links

  • Topic: NEXT_PUBLIC Secret Leakage/examples/next-public-secret-leakage
  • Glossary: NEXT_PUBLIC Secret Leakage/glossary/next-public-secret-leakage

FAQ

How do I know if this example matches my project?

Compare your configuration to the scenario, then attempt direct API access using client credentials. If you can reproduce the behavior, the example is a strong match.

What’s the safest fix if I’m unsure?

Backend-only access is the safest default: revoke direct client privileges and route operations through server endpoints with explicit authorization.

What should I do after applying the fix?

Verify direct client access fails, confirm the app still works via backend endpoints, and re-run a scan to ensure the finding is resolved.

Next step

If you want to see whether your app has similar exposure, run a Mockly scan and compare findings to the examples here.

Explore related pages

parent

NEXT_PUBLIC Secret Leakage examples

/examples/next-public-secret-leakage

sibling

NEXT_PUBLIC env exposes a secret

/examples/next-public-secret-leakage/next-public-env-exposes-secret

sibling

Admin Panel Client-Only Auth: direct API bypass

/examples/admin-panel-client-auth-only/direct-api-bypass-admin-panel-client-auth-only

cross

NEXT_PUBLIC Secret Leakage

/glossary/next-public-secret-leakage

cross

SQL Audit Checklist profile

/profiles/sql-audit-checklist

cross

Pricing

/pricing