How to Hide Your API Keys (The Right Way)

API keys are the passwords your app uses to talk to services like Stripe, OpenAI, and Supabase. When they're exposed in your code, attackers can use them to rack up charges on your account or steal your data.

This guide walks through the correct way to handle API keys, step by step. It takes about 10 minutes to set up properly and saves you from potentially expensive mistakes.

Why This Matters

Before we get into the how, let's be clear about the stakes:

• OpenAI key exposed: Attackers run up thousands in API charges
• Stripe secret key exposed: Access to customer payment data
• AWS credentials exposed: Crypto mining on your account ($10K+ bills)
• Supabase service key exposed: Complete database access bypassing all security

These aren't hypothetical. They happen every day to founders who didn't know any better.

# .env
OPENAI_API_KEY=sk-proj-abc123xyz789...
STRIPE_SECRET_KEY=sk_live_abc123...
SUPABASE_SERVICE_ROLE_KEY=eyJhbG...
DATABASE_URL=postgresql://user:pass@host/db

# .gitignore
.env
.env.local
.env.*.local
.env.production

// app/api/chat/route.js (Server-side API route)
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

export async function POST(request) {
  // This runs on the server, key is safe
  const completion = await openai.chat.completions.create({
    model: "gpt-4",
    messages: [...]
  });
  return Response.json(completion);
}

// server.js
require('dotenv').config();

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

app.post('/create-payment', async (req, res) => {
  // Server-side, key is safe
  const session = await stripe.checkout.sessions.create({...});
  res.json({ url: session.url });
});

Common Mistakes to Avoid

Mistake 1: Using NEXT_PUBLIC_ for Secret Keys

In Next.js, variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Never use this prefix for secret keys:

# BAD - This is visible to anyone
NEXT_PUBLIC_OPENAI_KEY=sk-proj-abc123...

# GOOD - This stays server-side
OPENAI_API_KEY=sk-proj-abc123...

Mistake 2: Calling Secret APIs from the Frontend

You cannot safely use secret keys in React components, even with environment variables:

// BAD - This runs in the browser
function ChatComponent() {
  const response = await fetch('https://api.openai.com/v1/chat', {
    headers: {
      'Authorization': `Bearer ${process.env.OPENAI_KEY}`
    }
  });
}

// GOOD - Call your own API route instead
function ChatComponent() {
  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ message })
  });
}

Mistake 3: Hardcoding Keys "Just for Testing"

It's tempting to hardcode a key to test quickly. Don't. Set up environment variables from the start:

// BAD - "I'll remove it later" (you won't)
const apiKey = "sk-proj-abc123...";

// GOOD - Always use environment variables
const apiKey = process.env.OPENAI_API_KEY;

How to Verify Your Keys Are Hidden

1. Deploy your app to production
2. Open browser dev tools (F12)
3. Go to the Network tab and look at request headers
4. Search in the Sources tab for your key value
5. Run a security scan to catch what you might miss

If you can find your secret keys through any of these methods, they're exposed and need to be fixed.

API Key Security Checklist

• Created .env file for local development
• Added .env to .gitignore
• Secret keys accessed only from server-side code
• No NEXT_PUBLIC_ prefix on secret keys
• Production keys added to hosting platform
• No hardcoded keys anywhere in codebase
• Verified keys not visible in browser dev tools