अगर आपने Claude या Cursor के साथ vibe-coded ऐप बनाया है और अब इसे किसी paying client को देने वाले हैं, तो रुकिए। AI-generated code के साथ predictable security holes आते हैं — exposed API keys, missing input validation, default database permissions जो किसी भी user को सभी का डेटा देख सकते हैं। ये edge cases नहीं हैं। लगभग हर पहली बार AI-generated codebase में ये होते हैं।

यह guide एक pre-launch security checklist है। किसी भी real user के ऐप को touch करने से पहले इसे step by step follow करें। यह सबसे common vibe coding stack के लिए लिखा गया है (Next.js + Supabase + Vercel), लेकिन ये principles आपके किसी भी tools के लिए apply होते हैं।

Quick Facts
पूरा करने का समय
एक typical app के लिए 2–4 घंटे
आवश्यक कौशल
security background की जरूरत नहीं — step-by-step checklist
Stack माना गया
Next.js + Supabase + Vercel (adaptable)
आप क्या ठीक करेंगे
Auth, data isolation, API keys, validation, rate limits, env vars
यह कब करें
किसी भी real user या client के ऐप को access करने से पहले
अंतिम सत्यापन
April 2026

AI-Generated Code में Security समस्याएं क्यों होती हैं

AI models "क्या यह काम करता है?" के लिए optimize करते हैं, "क्या यह सुरक्षित है?" के लिए नहीं। जब आप Claude को कहते हैं "मुझे user accounts वाला task manager बना दो," तो यह code generate करेगा जो users बनाता है, tasks store करता है, और उन्हें display करता है। लेकिन जो यह शायद automatically नहीं करेगा: ensure करना कि User A, User B के tasks नहीं देख सकता, validate करना कि input fields malicious scripts accept नहीं कर सकते, अपने API keys को browser के developer tools से छुपाना, या API endpoints को hammer करने से रोकने के लिए rate limiting add करना।

ये AI की failures नहीं हैं — ये prompt में gaps हैं। AI वही generate करता है जो आपने ask किया। आपने शायद security के लिए नहीं पूछा क्योंकि आप features पर focused थे। अब समय है वापस जाकर इसे add करने का।

Step 1: अपने Environment Variables को Audit करें

यह vibe-coded apps में सबसे common और सबसे dangerous गलती है। अपने project के हर file को hardcoded API keys, database URLs, या secrets के लिए check करें।

क्या देखना है: अपने codebase में sk-, eyJ, sbp_, supabase, postgres://, या किसी भी long random-looking strings के लिए search करें। इन files को specifically check करें: आपके /app या /pages directory में कोई भी file, कोई भी component file, आपका next.config.js, और कोई भी utility files।

यह fix करें: हर secret को environment variables में move करें। Next.js में, केवल NEXT_PUBLIC_ से prefixed variables browser को expose होते हैं। आपका database URL, service role key, और API secrets के पास यह prefix कभी नहीं होना चाहिए।

.env.local
# .env.local (यह file कभी commit न करें)
SUPABASE_SERVICE_ROLE_KEY=your-secret-key
DATABASE_URL=postgres://...

# ये browser को expose होने के लिए ठीक हैं:
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Verify करें: अपनी .gitignore file को check करें कि इसमें .env.local शामिल है। अगर आपने पहले से ही Git में secrets commit कर दिए हैं, तो वे आपके history में हैं चाहे deletion के बाद भी — हर exposed key को तुरंत rotate (regenerate) करें।

Step 2: Supabase में Row-Level Security Enable करें

अगर आप Supabase use कर रहे हैं तो यह सबसे critical step है। By default, Supabase tables के पास कोई access restrictions नहीं हैं — कोई भी आपकी anon key के साथ हर table के हर row को read और write कर सकता है। इसका मतलब है User A, एक simple API call के साथ User B के data को देख सकता है।

यह fix करें: हर table पर Row-Level Security (RLS) enable करें, फिर policies बनाएं जो access को restrict करें।

अपने Supabase dashboard पर जाएं → Table Editor → हर table select करें → "RLS Disabled" को click करके enable करें। फिर policies add करें:

एक typical app के लिए जहां users केवल अपना ही data देख सकें, एक SELECT policy create करें: auth.uid() = user_id। INSERT, UPDATE, और DELETE के लिए similar policies बनाएं।

इसे test करें: User A के रूप में login करें, API के through User B के data को access करने की कोशिश करें। अगर आप इसे देख सकते हैं, तो आपकी policies गलत हैं। Supabase के पास एक SQL editor है जहां आप directly policies को test कर सकते हैं।

Common AI mistake: Claude अक्सर service_role key (जो RLS को bypass करता है) का use करके Supabase queries generate करता है बजाय anon key के with proper RLS policies के। Check करें कि आपका client-side code केवल anon key को use करता है। Service role key केवल server-side code (API routes, server actions) में होना चाहिए और कभी browser को expose नहीं होना चाहिए।

Step 3: Authentication को सही तरीके से Add करें

AI-generated auth code अक्सर काम करता है लेकिन shortcuts लेता है। इन specific issues को check करें:

Session management: सुनिश्चित करें कि sessions expire होते हैं। Check करें कि आपकी auth setup एक reasonable session timeout को include करता है (Supabase defaults आमतौर पर ठीक हैं, लेकिन verify करें)। सुनिश्चित करें कि logging out actually session को invalidate करता है, केवल local cookie को clear नहीं करता।

Password requirements: अगर आपके पास email/password auth है, तो minimum password length (8+ characters) को enforce करें। Supabase यह आपकी project settings → Authentication → Password Requirements में handle करता है।

Protected routes: हर page जो user-specific data show करता है, को authentication middleware की जरूरत है। Next.js App Router में, एक middleware बनाएं जो valid session को check करता है और unauthenticated users को login page पर redirect करता है। केवल client-side checks पर rely न करें — एक user इसे directly API को hit करके bypass कर सकता है।

Email verification: Supabase Auth settings में email confirmation को enable करें। यह people को fake email addresses के साथ accounts बनाने से रोकता है और account validity का एक basic layer add करता है।

इससे value मिल रहा है? हम हर हफ्ते AI tools, workflows, और practical guides पर एक deep-dive publish करते हैं। उन readers से join करें जो इसे पहले प्राप्त करते हैं →

Step 4: सभी Inputs को Validate करें

AI-generated forms में usually basic validation होती है (required fields, email format) लेकिन शायद ही malicious input से protect करते हैं।

क्या add करें:

हर API endpoint पर server-side validation। कभी भी केवल client-side validation पर trust न करें — इसे directly API को requests भेजकर bypass किया जा सकता है। Zod (TypeScript के लिए) जैसी validation library का use करें हर piece के लिए schemas define करने के लिए जो आपका ऐप accept करता है।

किसी भी user-generated content को sanitize करें जो browser में render होता है। अगर आपके ऐप में comments, descriptions, या कोई भी text field है जो browser में render होता है, तो DOMPurify जैसी library use करें dangerous scripts को strip करने के लिए। इसके बिना, कोई जावास्क्रिप्ट inject कर सकता है जो दूसरे users के sessions को चोरी करता है (cross-site scripting / XSS)।

अगर आपका ऐप file uploads accept करता है तो file upload size और types को limit करें। AI-generated upload handlers के पास अक्सर कोई limits नहीं होती हैं, मतलब कोई 2GB file या executable upload कर सकता है। Size limits add करें (most apps के लिए 5MB reasonable है) और file types को restrict करें उसे जो आपको actually need है (images, PDFs, आदि)।

Step 5: अपने API Routes को Secure करें

अपने ऐप में हर API route या server action को इन issues के लिए check करें:

हर endpoint पर authentication। हर API route जो user data return या modify करता है, को पहले user के session को verify करना चाहिए। AI अक्सर API routes generate करता है जो किसी से भी requests accept करते हैं।

Authentication से beyond authorization। Confirm करने के बाद कि एक user logged in है, verify करें कि वे specific resource को access करने के लिए allowed हैं जो वे request कर रहे हैं। "User A logged in है" का मतलब नहीं "User A, User B की profile को edit कर सकता है।" हर data access पर ownership को check करें।

Rate limiting। Rate limiting के बिना, कोई आपके API को प्रति सेकंड हजारों requests भेज सकता है, या तो data scrape करने के लिए या अपने server को overwhelm करने के लिए। rate-limiter-flexible जैसी library use करके या Vercel की built-in rate limiting use करके Edge Functions पर basic rate limiting add करें।

HTTP methods। सुनिश्चित करें कि आपके API routes केवल HTTP methods को respond करते हैं जो उन्हें चाहिए। एक route जो POST requests को handle करता है, को भी DELETE requests को respond नहीं करना चाहिए जब तक आपने explicitly इसे design न किया हो।

Step 6: अपनी Deployment Configuration को Check करें

आपके deployment platform के पास security settings हैं जो AI configure नहीं करता।

Vercel settings को check करें: "Deployment Protection" को enable करें (preview deployments को view करने के लिए auth require करता है — clients को accidentally preview URLs share करने से रोकता है जो in-progress work को expose करते हैं)। spending limits को set up करें अगर आपके ऐप को traffic spikes मिलते हैं तो unexpected charges को prevent करने के लिए। अपने CORS headers में allowed domains को configure करें।

Custom domain और SSL: अगर आप इसे एक client को deliver कर रहे हैं, तो उनके custom domain को HTTPS के साथ set up करें। Vercel और Netlify SSL को automatically handle करते हैं। कभी भी एक client ऐप को .vercel.app subdomain पर deliver न करें — यह unprofessional दिखता है और client इसे आसानी से transfer नहीं कर सकता।

Headers: Security headers को अपने next.config.js या vercel.json में add करें: X-Content-Type-Options: nosniff, X-Frame-Options: DENY (आपकी site को iframes में embed होने से prevent करता है clickjacking के लिए), Strict-Transport-Security (HTTPS को force करता है)। ये one-time additions हैं जो attacks के entire classes को prevent करते हैं।

Step 7: एक Final Security Scan चलाएं

किसी भी चीज को client को देने से पहले, इन free checks को run करें:

npm audit: अपनी project directory में npm audit run करें। यह आपकी dependencies में known vulnerabilities को flag करता है। Critical और high-severity issues को fix करें। जहां available हों वहां automatic fixes के लिए npm audit fix run करें।

Lighthouse: अपनी deployed site को Chrome में खोलें, DevTools खोलें, एक Lighthouse audit run करें। "Best Practices" score को check करें — यह common security issues को catch करता है जैसे missing HTTPS, vulnerable libraries, और insecure headers।

Manual testing: एक user के रूप में login करें, दूसरे user के data को URLs या API calls को modify करके access करने की कोशिश करें। empty forms, oversized inputs, और special characters (जैसे encoded XSS payloads) को submit करने की कोशिश करें। अगर कोई भी ये काम करता है, तो आपके पास issues हैं जिन्हें fix करने की जरूरत है।

Pre-Launch Checklist

यह print करें और live होने से पहले हर item को check करें:

  • सभी secrets environment variables में हैं (hardcoded keys नहीं)
  • .env.local, .gitignore में है (और कोई secrets Git history में नहीं हैं)
  • Supabase RLS हर table पर enabled है
  • RLS policies tested हैं (User A, User B के data को नहीं देख सकता)
  • Client-side code केवल anon key को use करता है (service role key केवल server-side है)
  • हर API route पर authentication है
  • Authorization checks (ownership verification) data access पर हैं
  • हर form पर input validation है (server-side, केवल client-side नहीं)
  • File upload limits (size और type) अगर applicable है
  • API endpoints पर rate limiting है
  • Security headers configured हैं
  • npm audit run किया गया है और critical issues fixed हैं
  • Custom domain with SSL configured है
  • Preview deployments protected हैं
  • Manual cross-user data access test pass किया गया है

The Bottom Line

एक vibe-coded ऐप को secure करना security expert बनने के बारे में नहीं है। यह एक checklist को run करने के बारे में है जो AI के predictable gaps को catch करता है। ऊपर के steps 2–4 घंटे लेते हैं और सबसे common vulnerabilities को prevent करते हैं। एक client-facing ऐप के लिए, यह optional नहीं है — यह professional work और एक liability के बीच का अंतर है।

अगर आप अपना पहला vibe-coded ऐप बना रहे हैं, तो हमारे complete guide to vibe coding से शुरू करें। अगर आप Claude या Cursor के साथ use करने वाले prompts को improve करना चाहते हैं, तो हमारे free prompt optimizer को try करें। और best coding tools के breakdown के लिए, Claude Code vs Codex को देखें।

यह है जो हम हर हफ्ते करते हैं। AI tools, workflows, और honest takes पर एक deep-dive — कोई hype नहीं, कोई filler नहीं। हमसे join करें →

Disclosure: इस article में कुछ links affiliate links हैं। हम केवल उन tools को recommend करते हैं जिन्हें हमने personally test किया है और regularly use करते हैं। हमारी full disclosure policy को देखें।