Should I Put an API Key in Frontend Code?
Updated · Tech checked
No. Keys, passwords and other people's data never enter prompts or browser code. Synthetic examples, browser-server boundary, lab A03.
The direct answer
Never. An API key in frontend code or in a prompt is public the moment it leaves your machine: published pages expose it, chat logs store it. Use the synthetic placeholders from the labs; real keys live on servers you control, which this course never requires.
The boundary
Browser: structure, style, visible behavior, sample data. Server: secrets, shared data, real charges. This course stays on the browser side by design; M05L20 explains when a backend becomes necessary (shared accounts, secret keys), without requiring one.
Worked example
Lab A03 shows a synthetic screen with marked fields: password, key, customer email. The safe task text replaces each with SAMPLE placeholders before any AI tool sees it.
Method and mistakes
Search files for key, password, token before sharing or publishing; keep a separate private note for real credentials, never in the project folder. The failure is demo data swapped for real data at the last minute.
Frequently asked questions
The AI asked for my key to help faster? Decline. Describe the shape (where it goes, what format) without pasting the value.
I already pasted one; what now? Revoke and replace it at the provider immediately; pasted text cannot be un-sent.
Sources and review
- Lessons M01L04, M05L20 and lab A03 (this site). Last review: 2026-10-04.