Pitfalls & Tips

Top 5 Security Vulnerabilities

AI-generated code may work but not be secure. Always check these 5 issues.

1. Hardcoded API Keys / Secrets

AI often puts API keys directly in example code.

// Dangerous
const supabase = createClient(
  "https://abc.supabase.co",
  "eyJhbGciOiJIUzI1NiIs..."
);
 
// Safe
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

Never hardcode API keys, secrets, or passwords in code.
Always use environment variables (.env.local).

2. SQL Injection

AI sometimes builds SQL through string concatenation.

// Dangerous: string concatenation
const query = `SELECT * FROM users WHERE name LIKE '%${userInput}%'`;
 
// Safe: parameterized queries
const { data } = await supabase
  .from('users')
  .ilike('name', `%${userInput}%`);

3. XSS (Cross-Site Scripting)

Rendering user input directly as HTML is dangerous.

// Dangerous
<div dangerouslySetInnerHTML={{ __html: userComment }} />
 
// Safe: React's default escaping
<div>{userComment}</div>
 
// When HTML needed: use sanitize library
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userComment) }} />

4. Excessive Permissions

// Dangerous: allow all origins
const corsHeaders = { "Access-Control-Allow-Origin": "*" };
 
// Safe: specific domain only
const corsHeaders = {
  "Access-Control-Allow-Origin": "https://myapp.vercel.app"
};

5. Unvalidated User Input

// Dangerous: no validation
export async function POST(req: Request) {
  const { email, amount } = await req.json();
  await chargeUser(email, amount);  // What if amount is negative?
}
 
// Safe: Zod validation
import { z } from 'zod';
const schema = z.object({
  email: z.string().email(),
  amount: z.number().positive().max(1000000),
});
 
export async function POST(req: Request) {
  const body = schema.parse(await req.json());
  await chargeUser(body.email, body.amount);
}

Code Quality Issues

The "It Works So It's Fine" Trap

The biggest vibe coding trap is "it works, let's move on". AI-generated code that works isn't necessarily good code.

Use this prompt periodically:

"Review all the code written so far.
Find code duplication, unnecessary dependencies, performance issues, and structural problems."

Missing Tests

When you ask AI for features, it often doesn't write tests. You must explicitly ask.

> "Build a login API. Write unit tests too:
   - Successful login case
   - Wrong password case
   - Non-existent email case"

Copy-Paste Code

AI tends to generate repetitive patterns. If you see 100 lines of similar code across 5 files, abstraction is needed.

> "Extract common patterns from these 5 files into reusable utility functions"

Debugging Strategies

3-Step Approach When AI Code Doesn't Work

Step 1: Pass the Error Message Directly

> "I'm getting this error:
  [Full error message copy]
  Fix it."

This solves 80% of problems.

Step 2: Have AI Read Related Files

If the error message alone isn't enough:

> "Read lib/auth.ts and app/api/login/route.ts,
   and analyze why authentication is failing."

Step 3: Request a Different Approach

If the same approach keeps failing:

> "This approach keeps failing. Implement it with a completely different approach.
   Delete the previous code and start from scratch."

When AI Repeats the Same Mistake

If AI keeps making the same fix without solving the problem:

1. Reset the conversation (/clear or new session)
2. Explain the problem from scratch (without previous context)
3. Add constraints ("Previously tried [Method A] which failed because [reason]. Try [Method B]")

Dependencies and Licensing

Verifying AI-Recommended Packages

When AI recommends a library, verify before installing:

Limitations of Vibe Coding

When Manual Coding is Better

The Long-term Cost of "Code You Don't Understand"

If you don't understand vibe-coded output:

• Can't debug: Unable to fix errors without AI
• Hard to extend: Afraid to add features when structure is unknown
• Tech debt: "Scary to touch" code grows over time

"Explain the authentication logic you just built in beginner-friendly terms.
What each function does and how data flows through it."

Pre-Deployment Checklist

Check these before deploying your project:

• .env file is included in .gitignore
• No API keys hardcoded in source code
• User input validation is implemented
• CORS settings are appropriate
• Error handling is in place
• Unnecessary console.log removed
• Sensitive data not exposed to client
• External libraries exist and are maintained