Leaked Google Maps API Key Fix: Secure Your Vibe-Coded App

Quick answer

To fix a leaked Google Maps API key in a vibe-coded app, immediately revoke the compromised key in the Google Cloud Console, restrict the new key by HTTP referrer or IP, and rotate any environment variables or client-side code containing the old key. Then scan your entire codebase—especially files generated by AI tools like Cursor or Bolt.new—for hardcoded keys and remove them.

What to check first

Before you panic, run through this checklist to assess the damage:

Step-by-step fix

1. Revoke the leaked key immediately

2. Create a new restricted key

- Application restrictions: Choose HTTP referrers (websites) and add your domain (e.g., *.yourdomain.com/*). For server-side usage, use IP addresses.

- API restrictions: Select Maps JavaScript API, Geocoding API, Places API, etc. Only enable what you actually use.

3. Update your app’s configuration

If you hardcoded the key in a component (common in vibe-coded apps), move it to an environment variable. Example for Next.js:

// .env.local (never commit this file!)
NEXT_PUBLIC_GOOGLE_MAPS_KEY=AIzaSyNewKey...

Update your component:

// components/Map.jsx
const Map = () => {
  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY;
  // ... use apiKey in script tag
};

For a plain HTML/JS app, if the key must be client-side (Maps JS API requires it), restrict it by referrer. But consider proxying requests through a serverless function to avoid exposing the key entirely.

4. Scan your entire codebase for old keys

Run a recursive search and replace the old key with a placeholder:

grep -rl "AIzaSyOldKey" . --include="*.{js,jsx,ts,tsx,html,json,env}"

Then replace in each file manually or use sed (but be careful):

sed -i '' 's/AIzaSyOldKey/process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY/g' file.js

5. Re-deploy and verify

Push your changes, re-deploy, and confirm the map loads correctly. Check the browser console for any Google Maps errors.

Common mistakes

Vibe-coded apps often make these errors:

For continuous protection, consider using a continuous security monitoring tool that alerts you to new leaks in your codebase.

FAQ

How do I find leaked Google Maps API keys in my code?

Use grep -r "AIzaSy" . in your terminal, or scan your GitHub repo with a secret leak scanner. Also check your deployed site’s JavaScript files via DevTools.

Can I just restrict the key instead of revoking it?

You can restrict a key by referrer or IP without revoking, but if the key is already public, revoking is safer. Restriction prevents new abuse but the key remains usable by anyone who already has it.

Will revoking the key break my app immediately?

Yes, until you update the app with a new key. Follow the step-by-step fix to minimize downtime: create the new key first, update your app, then revoke the old one.

---

For a full audit of your vibe-coded app’s security, try the free AI app security scanner from OverMCP.