Can I use API keys in React or Next.js frontend?

No. Any key in client-side JavaScript can be extracted. Use a backend API route or serverless function to hold the key and proxy requests from your frontend.

What is the safest way to call OpenAI from a frontend?

Create a backend endpoint that receives the user's prompt, calls OpenAI with your server-held key, and returns the response. The frontend never touches the key.

How do I secure API keys in Next.js?

Never use NEXT_PUBLIC_ for secrets. Use env vars without that prefix—they're only available server-side. Put API calls in API routes or server components.

How to Secure API Keys in JavaScript Frontend | StackRail

What this problem means

Any JavaScript that runs in the browser can be inspected, decompiled, or scraped. If you put an API key—OpenAI, AWS, Stripe, or any third-party—in your frontend bundle, it's visible to anyone. Bots scan for these keys within hours of deployment.

Why this is dangerous

- Cost explosion: Leaked keys can generate thousands in bills overnight.

- Data access: Keys with read permissions expose customer or internal data.

- Reputation: Breaches and unexpected bills damage trust with users and investors.

Real-world example

A startup built a React app that called OpenAI directly from the client. The API key was in an environment variable—but Next.js exposed it because it was prefixed with `NEXT_PUBLIC_`. A scraper found the key and racked up $12,000 in API charges before the team noticed.

How to fix it

1. Backend proxy: Create an API route (e.g., `/api/chat`) that calls OpenAI from your server. The frontend calls your API; your server holds the key.

2. Server-side only: Never use `NEXT_PUBLIC_` or any client-exposed env for secrets. Use `process.env.OPENAI_API_KEY` only in server code.

3. Per-user auth: If you need external API calls, use OAuth or session tokens. The backend validates the user and makes the call.

4. Rotate immediately: If a key was ever in frontend code, rotate it now.

Tools and configurations

- Next.js API routes: Server-side handlers that hold secrets.

- Vercel Edge: Serverless functions for API proxying.

- AWS Secrets Manager: Store keys server-side, inject at runtime.

- Environment variables: Only on the server, never in client bundles.

Common mistakes

- Using `NEXT_PUBLIC_` for API keys.

- Assuming "obfuscation" or "minification" hides keys.

- Relying on "restricted" API keys—they can still be abused.

Quick checklist

- [ ] Move all external API calls to a backend proxy

- [ ] Remove any keys from client code and git history

- [ ] Use server-only environment variables

- [ ] Rotate any key that was ever exposed

- [ ] Set up billing alerts and rate limits

Need help with production readiness? Get a free 30-minute audit.

Book Free 30-Min Production Audit

View our DevSecOps services

Check if your system has this risk

Take the 60-second production readiness assessment to identify gaps in your infrastructure.

Start Assessment

Frequently asked questions

Can I use API keys in React or Next.js frontend?: No. Any key in client-side JavaScript can be extracted. Use a backend API route or serverless function to hold the key and proxy requests from your frontend.
What is the safest way to call OpenAI from a frontend?: Create a backend endpoint that receives the user's prompt, calls OpenAI with your server-held key, and returns the response. The frontend never touches the key.
How do I secure API keys in Next.js?: Never use NEXT_PUBLIC_ for secrets. Use env vars without that prefix—they're only available server-side. Put API calls in API routes or server components.