How I Would Fix exposed API keys and missing auth in a Framer or Webflow internal admin app Using Launch Ready.
The symptom is usually obvious: someone opens the page source, DevTools, or a network request and finds an API key sitting in the browser, while the admin...
How I Would Fix exposed API keys and missing auth in a Framer or Webflow internal admin app Using Launch Ready
The symptom is usually obvious: someone opens the page source, DevTools, or a network request and finds an API key sitting in the browser, while the admin area has no real login gate. In business terms, that means anyone who finds the URL can read data, change records, trigger automations, or burn through your API bill.
The most likely root cause is that the app was built like a public marketing site instead of a protected internal tool. The first thing I would inspect is where the data access actually happens: client-side scripts, embedded forms, custom code blocks, third-party automations, and whether any sensitive endpoint can be called without server-side auth.
Triage in the First Hour
1. Open the live app in an incognito window. 2. Check whether any admin screen loads without login, invite, or session validation. 3. Inspect page source and DevTools for:
- API keys
- bearer tokens
- webhook URLs
- Firebase/Supabase/public keys
- third-party automation secrets
4. Review browser network calls for direct requests to private APIs. 5. Check whether the app uses Framer custom code embeds or Webflow custom code headers/footers to store secrets. 6. Audit connected accounts:
- Google Cloud
- Supabase
- Airtable
- Make/Zapier
- OpenAI
- Stripe
7. Review deployment history for recent changes that may have exposed secrets. 8. Confirm if any logs already show unauthorized access attempts. 9. Verify DNS and domain setup if the admin area is on a subdomain like `admin.` or `internal.`. 10. Rotate anything exposed before doing deeper debugging.
If I suspect active exposure, I treat it as a production incident, not a UI bug.
## quick secret scan on exported files or repo grep -RInE "sk-|pk_|api[_-]?key|secret|bearer|token" .
Root Causes
1. Secrets were placed in client-side code.
- Confirm by viewing page source, bundled JS, or embedded scripts.
- If the key appears in browser-visible code, it is already public.
2. The app relies on "security by hidden URL."
- Confirm by opening the admin route directly in incognito.
- If there is no auth wall, anyone with the link can enter.
3. The backend trusts requests from the frontend without verification.
- Confirm by replaying a normal request from DevTools.
- If requests succeed without a valid session or role check, authorization is missing.
4. A third-party automation tool stores secrets in plain sight.
- Confirm inside Zapier, Make, Airtable scripts, or Webflow custom embeds.
- Many founders forget those tools are part of the attack surface.
5. Environment variables were copied into build-time fields instead of server-side storage.
- Confirm in Framer project settings, Webflow custom code areas, or deployment configs.
- If variables are injected into public bundles, they are not secrets anymore.
6. Old builds or cached pages still expose retired credentials.
- Confirm via CDN cache headers and old deployment artifacts.
- A rotated key is useless if an old script is still being served from cache.
The Fix Plan
My goal is to stop exposure fast without breaking the workflow your team depends on.
1. Freeze changes for 30 to 60 minutes.
- I do not want more edits landing while I am tracing access paths.
- This avoids creating a second incident during cleanup.
2. Revoke exposed keys immediately.
- Rotate every credential that appeared in client-visible code.
- That includes API keys, webhook secrets, service account tokens, and automation tokens.
3. Move all sensitive calls behind a server-side layer.
- For Framer or Webflow, I would not let the browser talk directly to private services if auth matters.
- I would move privileged actions to:
- serverless functions
- edge functions
- a lightweight backend proxy
- authenticated middleware
4. Add real authentication before any admin content loads.
- Use one of these patterns:
- passwordless email login for small teams
- SSO for internal operations teams
- basic auth only as a temporary emergency shield
- signed session cookies with role checks for proper control
5. Enforce authorization on every sensitive action.
- Login alone is not enough.
- Each endpoint should verify role and permission before reading or changing data.
6. Remove all secrets from public-facing code and CMS fields.
- No API keys in embeds.
- No private endpoints in visible form actions.
- No credentials inside CMS collections unless they are non-sensitive display values.
7. Put Cloudflare in front of the app if it is not already there.
- I would use it for:
- SSL termination
- caching where safe
- DDoS protection
- rate limiting on login and admin routes
- WAF rules for obvious abuse patterns
8. Lock down email and domain trust signals at the same time.
- Set SPF, DKIM, and DMARC so alerts and invites do not land in spam or get spoofed.
9. Add monitoring before redeploying publicly.
- Uptime checks on login and critical admin routes
- alerting for 401/403 spikes
- alerting for unusual outbound API usage
- audit logs for privileged actions
10. Deploy through a clean handover checklist.
- Validate DNS records
- confirm redirects and subdomains
| verify SSL | | check cache behavior | | test auth flows | | confirm rollback path |
Here is the decision path I would follow:
For an internal admin app, I prefer one clean fix over three partial ones: put sensitive logic behind authenticated server-side endpoints and keep Framer or Webflow as the presentation layer only.
Regression Tests Before Redeploy
I would not ship this until these checks pass:
1. Anonymous access test:
- Open every admin route in incognito.
- Expected: redirect to login or deny access.
2. Role-based access test: - Expected: non-admin users cannot see admin controls or data they do not own.
3. Secret exposure test: - Expected: no API keys appear in page source, network responses, console logs, or CMS exports.
4. Token rotation test: - Expected: old credentials fail after rotation within minutes.
5. Functional smoke test: - Expected: create, edit, delete, export, and sync actions still work for authorized users.
6. Error handling test: - Expected: failed auth shows a clear message with no stack trace or leaked config details.
7. Rate limit test: - Expected: repeated login attempts slow down or block after threshold.
8. Cache validation: - Expected: private pages are never cached publicly by browser or CDN.
9. Monitoring test: - Expected: uptime alerts fire when auth routes go down and logs capture denied access attempts.
10. Acceptance criteria: - No exposed credentials remain visible to unauthenticated users. - All sensitive actions require authenticated sessions plus role checks. - Admin pages return correct 401 or 403 responses when blocked. - Zero critical security findings remain before launch.
I would also run one manual exploratory pass from mobile because broken auth flows often show up first on smaller screens where custom overlays misbehave.
Prevention
The long-term fix is process plus architecture.
- Keep secrets server-side only.
Public frontend code should never contain anything that can be reused by an attacker or competitor.
- Use least privilege everywhere.
Give each integration only the permissions it needs to do one job.
- Add code review rules for security-sensitive changes.
Any change touching auth, webhooks, environment variables, redirects, cookies, or API calls should get explicit review before merge.
- Log important events without leaking data.
Capture who did what and when, but never log full tokens or private payloads.
- Set up alerts on abnormal behavior.
Watch for spikes in failed logins, new IPs hitting admin routes, repeated token errors, and sudden increases in outbound API usage.
- Harden UX so users do not bypass controls out of frustration.
Clear loading states help prevent duplicate submits; explicit permission messages reduce support tickets; visible session expiry reduces confusion.
- Keep performance sane while adding security.
Heavy auth middleware should not wreck conversion-critical load times on legitimate pages; aim for under 2 seconds LCP on public-facing entry points and keep protected admin screens responsive with p95 under 300 ms where possible after caching and indexing are tuned upstream.
- Document emergency rotation steps now,
not during an incident at midnight with your team guessing which key belongs to which tool.
When to Use Launch Ready
Launch Ready fits when you need this fixed fast without turning it into a month-long rebuild.
I would use it if you have:
- a working Framer or Webflow internal admin app,
- exposed credentials,
- missing auth,
- broken deployment hygiene,
- no clear rollback plan,
- or you need to stabilize before showing investors,, clients,, ops staff,.
What you should prepare before I start: 1. Access to Framer or Webflow project settings.. 2.. Access to DNS registrar.. 3.. Cloudflare account access.. 4.. Any backend service accounts used by the app.. 5.. A list of all integrations.. 6.. Current live URLs.. 7.. One person who can approve key rotations quickly..
My recommendation: do not try to patch this piecemeal over Slack while continuing feature work.. Freeze it,. fix it once,. then add guardrails so you do not repeat the same mistake during your next launch..
References
- https://roadmap.sh/api-security-best-practices
- https://roadmap.sh/cyber-security
- https://roadmap.sh/code-review-best-practices
- https://developers.cloudflare.com/
- https://www.webflow.com/help/custom-code-in-webflow-sites
---
Take the next step
If this is a problem in your product right now, here is what to do next:
- [Use the free Cyprian tools](/tools) - estimate cost, score app risk, check launch readiness, or pick the right service sprint.
- [Book a discovery call](/contact) - I will tell you honestly whether you need a sprint or if you can DIY the next step.
*Written by Cyprian Tinashe Aarons - senior full-stack and AI engineer helping founders rescue, launch, automate, and scale AI-built products.*
Cyprian Tinashe Aarons — Senior Full Stack & AI Engineer
Cyprian helps founders rescue, secure, deploy, and automate AI-built apps with production-grade engineering, launch systems, and AI integration.