API key in client code
An AI assistant generated this React/Next.js component to call your analytics API. It compiles and the dashboard loads. What should you immediately flag, and why is this worse than a normal hardcoded-secret mistake?
Implement
scan_client_secret_exposure(lines: list[str]) → list[str]Examples
in
[["export default function Dashboard() {"," const API_KEY = \"sk_live_4eC39HqLyjWDarjtT1zdp7dc\";"," useEffect(() => {"," fetch(`https://api.metrics.io/v1/data?key=${API_KEY}`).then(r => r.json());"," }, []);","}"]]out["2:browser:sk_live_"]in
[["const stripe = require('stripe');","const key = \"sk_live_9zQ2mNbVcXs1\";","module.exports = stripe(key);"]]out["2:server:sk_live_"]in
[["\"use client\";","const PUBLISHABLE = \"pk_live_51H8xVisibleOnPurpose\";","const token = process.env.NEXT_PUBLIC_TOKEN;"]]out[]What a strong answer looks like
Treat the AI’s output as a draft to verify, not an answer to trust. Name the specific flaw and the input that triggers it, say how you’d catch it (tests, edge cases, reading critically), and how you’d re-prompt or decompose to get it right.
0:00 of about 10 min
Vibe & agentic: describe the solution in plain language (or narrate it) and the coach grades your approach.
Which questions mattered is sealed until you submit. Telling you now would just be handing over the edge cases.
Run or narrate your approach, then ask the coach.