[{"data":1,"prerenderedAt":357},["ShallowReactive",2],{"blog-blueprints/cursor-react-firebase":3},{"id":4,"title":5,"body":6,"category":337,"date":338,"dateModified":338,"description":339,"draft":340,"extension":341,"faq":342,"featured":340,"headerVariant":343,"image":342,"keywords":342,"meta":344,"navigation":345,"ogDescription":346,"ogTitle":342,"path":347,"readTime":348,"schemaOrg":349,"schemaType":350,"seo":351,"sitemap":352,"stem":353,"tags":354,"twitterCard":355,"__hash__":356},"blog/blog/blueprints/cursor-react-firebase.md","Cursor + React + Firebase Security Blueprint",{"type":7,"value":8,"toc":316},"minimark",[9,20,24,30,35,46,51,54,110,114,118,121,131,135,144,148,152,155,164,168,177,186,190,194,203,212,216,221,224,227,230,233,236,239,242,245,263,285,304],[10,11,12],"blueprint-summary",{},[13,14,15,19],"p",{},[16,17,18],"strong",{},"To secure a Cursor + React + Firebase stack,"," you need to: (1) replace test-mode Firestore rules with production rules that check authentication and ownership, (2) configure Firebase Storage rules to restrict file access, (3) use React Context to manage auth state consistently across components, (4) understand that client-side route protection is for UX only - Firestore rules are the real security, and (5) create a .cursorignore file to prevent AI from accessing environment files. This blueprint covers Firestore rules, React auth patterns, and the security boundary between client and server.",[21,22],"blueprint-meta",{"time":23},"2-3 hours",[25,26,27],"tldr",{},[13,28,29],{},"React + Firebase is a popular stack for rapid prototyping, but AI-generated code often ships with insecure defaults. Key issues: test-mode Firestore rules that allow public access, Firebase config exposed without proper security rules, and missing auth state checks in protected components. Always configure security rules before deploying, use React Context for auth state, and never trust client-side route protection alone.",[31,32,34],"h3",{"id":33},"platform-guides-checklists","Platform Guides & Checklists",[36,37,42],"pre",{"className":38,"code":40,"language":41},[39],"language-text","      Cursor Security Guide\n\n\n\n      React Security Guide\n\n\n\n      Firebase Security Guide\n\n\n\n      Pre-Launch Checklist\n","text",[43,44,40],"code",{"__ignoreMap":45},"",[47,48,50],"h2",{"id":49},"stack-security-overview","Stack Security Overview",[13,52,53],{},"This stack relies heavily on client-side code, which means security rules in Firebase are your primary defense:",[55,56,57,73],"table",{},[58,59,60],"thead",{},[61,62,63,67,70],"tr",{},[64,65,66],"th",{},"Component",[64,68,69],{},"Security Role",[64,71,72],{},"Common AI Mistakes",[74,75,76,88,99],"tbody",{},[61,77,78,82,85],{},[79,80,81],"td",{},"Cursor",[79,83,84],{},"Code generation",[79,86,87],{},"Generates permissive rules, skips auth checks",[61,89,90,93,96],{},[79,91,92],{},"React",[79,94,95],{},"UI layer",[79,97,98],{},"Client-only route guards, exposed state",[61,100,101,104,107],{},[79,102,103],{},"Firebase",[79,105,106],{},"Backend + Auth",[79,108,109],{},"Test mode rules, missing validation",[47,111,113],{"id":112},"part-1-firestore-security-rules-firebase","Part 1: Firestore Security Rules Firebase",[31,115,117],{"id":116},"the-ai-generated-problem-cursor-firebase","The AI-Generated Problem Cursor Firebase",[13,119,120],{},"Cursor often generates code that works with test-mode rules:",[122,123,125],"code-block",{"label":124},"DANGEROUS: Default test mode rules",[36,126,129],{"className":127,"code":128,"language":41},[39],"rules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\n    match /{document=**} {\n      allow read, write: if true;  // Anyone can do anything!\n    }\n  }\n}\n",[43,130,128],{"__ignoreMap":45},[31,132,134],{"id":133},"secure-rules-pattern-firebase","Secure Rules Pattern Firebase",[122,136,138],{"label":137},"firestore.rules - Secure configuration",[36,139,142],{"className":140,"code":141,"language":41},[39],"rules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\n    // User profiles - only owner can read/write\n    match /users/{userId} {\n      allow read, update, delete: if request.auth != null\n        && request.auth.uid == userId;\n      allow create: if request.auth != null;\n    }\n\n    // Posts - public read, authenticated create, owner modify\n    match /posts/{postId} {\n      allow read: if true;\n      allow create: if request.auth != null\n        && request.resource.data.authorId == request.auth.uid;\n      allow update, delete: if request.auth != null\n        && resource.data.authorId == request.auth.uid;\n    }\n\n    // Private collections - strict user isolation\n    match /private/{userId}/{document=**} {\n      allow read, write: if request.auth != null\n        && request.auth.uid == userId;\n    }\n  }\n}\n",[43,143,141],{"__ignoreMap":45},[47,145,147],{"id":146},"part-2-react-auth-context-react-firebase","Part 2: React Auth Context React Firebase",[31,149,151],{"id":150},"proper-auth-state-management-react","Proper Auth State Management React",[13,153,154],{},"AI-generated React code often checks auth inconsistently. Use a centralized context:",[122,156,158],{"label":157},"src/contexts/AuthContext.tsx",[36,159,162],{"className":160,"code":161,"language":41},[39],"import { createContext, useContext, useEffect, useState } from 'react';\nimport { onAuthStateChanged, User } from 'firebase/auth';\nimport { auth } from '../lib/firebase';\n\ninterface AuthContextType {\n  user: User | null;\n  loading: boolean;\n}\n\nconst AuthContext = createContext\u003CAuthContextType>({\n  user: null,\n  loading: true\n});\n\nexport function AuthProvider({ children }: { children: React.ReactNode }) {\n  const [user, setUser] = useState\u003CUser | null>(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    const unsubscribe = onAuthStateChanged(auth, (user) => {\n      setUser(user);\n      setLoading(false);\n    });\n    return unsubscribe;\n  }, []);\n\n  return (\n    \u003CAuthContext.Provider value={{ user, loading }}>\n      {children}\n    \u003C/AuthContext.Provider>\n  );\n}\n\nexport const useAuth = () => useContext(AuthContext);\n",[43,163,161],{"__ignoreMap":45},[31,165,167],{"id":166},"protected-route-component-react","Protected Route Component React",[122,169,171],{"label":170},"src/components/ProtectedRoute.tsx",[36,172,175],{"className":173,"code":174,"language":41},[39],"import { Navigate } from 'react-router-dom';\nimport { useAuth } from '../contexts/AuthContext';\n\nexport function ProtectedRoute({ children }: { children: React.ReactNode }) {\n  const { user, loading } = useAuth();\n\n  if (loading) {\n    return \u003Cdiv>Loading...\u003C/div>;\n  }\n\n  if (!user) {\n    return \u003CNavigate to=\"/login\" replace />;\n  }\n\n  return \u003C>{children}\u003C/>;\n}\n",[43,176,174],{"__ignoreMap":45},[178,179,180],"warning-box",{},[13,181,182,185],{},[16,183,184],{},"Remember:"," Client-side route protection is for UX only. Your Firestore security rules are the actual security barrier. Even with protected routes, malicious users can call Firebase directly.",[47,187,189],{"id":188},"part-3-firebase-configuration-firebase","Part 3: Firebase Configuration Firebase",[31,191,193],{"id":192},"environment-variables-react","Environment Variables React",[122,195,197],{"label":196},".env (Create React App)",[36,198,201],{"className":199,"code":200,"language":41},[39],"# These are safe to expose (security comes from rules)\nREACT_APP_FIREBASE_API_KEY=AIza...\nREACT_APP_FIREBASE_AUTH_DOMAIN=yourapp.firebaseapp.com\nREACT_APP_FIREBASE_PROJECT_ID=yourapp\nREACT_APP_FIREBASE_STORAGE_BUCKET=yourapp.appspot.com\nREACT_APP_FIREBASE_MESSAGING_SENDER_ID=123456789\nREACT_APP_FIREBASE_APP_ID=1:123456789:web:abc123\n",[43,202,200],{"__ignoreMap":45},[122,204,206],{"label":205},"src/lib/firebase.ts",[36,207,210],{"className":208,"code":209,"language":41},[39],"import { initializeApp } from 'firebase/app';\nimport { getAuth } from 'firebase/auth';\nimport { getFirestore } from 'firebase/firestore';\n\nconst firebaseConfig = {\n  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,\n  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,\n  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,\n  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,\n  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,\n  appId: process.env.REACT_APP_FIREBASE_APP_ID,\n};\n\nconst app = initializeApp(firebaseConfig);\nexport const auth = getAuth(app);\nexport const db = getFirestore(app);\n",[43,211,209],{"__ignoreMap":45},[47,213,215],{"id":214},"security-checklist","Security Checklist",[217,218,220],"h4",{"id":219},"pre-launch-checklist-for-cursor-react-firebase","Pre-Launch Checklist for Cursor + React + Firebase",[13,222,223],{},"Firestore rules updated from test mode",[13,225,226],{},"Storage rules configured (if using)",[13,228,229],{},"Auth context provides consistent state",[13,231,232],{},"Protected routes use auth context",[13,234,235],{},"Firebase config uses environment variables",[13,237,238],{},".cursorignore excludes .env files",[13,240,241],{},"Rules tested with Firebase Emulator",[13,243,244],{},"Auth domain configured for production URL",[246,247,248,252],"stack-comparison",{},[31,249,251],{"id":250},"alternative-stack-configurations","Alternative Stack Configurations",[246,253,254,257],{},[13,255,256],{},"Cursor + Firebase + Vercel\nSame Firebase security with Vercel hosting. Adds server-side capabilities with API routes.",[36,258,261],{"className":259,"code":260,"language":41},[39],"      Cursor + Supabase + Vercel\n      Swap Firebase for Supabase. Different security model with PostgreSQL RLS instead of Firestore rules.\n\n\n      Bolt.new + React + Firebase\n      Same React + Firebase stack with Bolt.new. Different AI code generation approach.\n",[43,262,260],{"__ignoreMap":45},[264,265,266,273,279],"faq-section",{},[267,268,270],"faq-item",{"question":269},"Is it safe to expose Firebase config in React?",[13,271,272],{},"Yes, the Firebase client config (apiKey, authDomain, etc.) is designed for public exposure. Your security comes from Firestore and Storage rules, not from hiding these values. The apiKey identifies your project but doesn't grant access.",[267,274,276],{"question":275},"Why do I need both route protection and Firestore rules?",[13,277,278],{},"Route protection improves UX by redirecting unauthenticated users. But React runs on the client, so users can bypass it. Firestore rules run on Firebase's servers and are the actual security enforcement.",[267,280,282],{"question":281},"How do I test my security rules?",[13,283,284],{},"Use the Firebase Emulator Suite locally or the Rules Playground in Firebase Console. Write test cases for authenticated users, unauthenticated users, and users trying to access other users' data.",[286,287,288,294,299],"related-articles",{},[289,290],"related-card",{"description":291,"href":292,"title":293},"With Vercel deployment","/blog/blueprints/cursor-firebase-vercel","Cursor + Firebase + Vercel",[289,295],{"description":296,"href":297,"title":298},"Deep dive into Firebase","/blog/guides/firebase","Firebase Security Guide",[289,300],{"description":301,"href":302,"title":303},"Same stack with Bolt.new","/blog/blueprints/bolt-react-firebase","Bolt + React + Firebase",[305,306,309,313],"cta-box",{"href":307,"label":308},"/","Start Free Scan",[47,310,312],{"id":311},"building-react-firebase-with-cursor","Building React + Firebase with Cursor?",[13,314,315],{},"Scan your app for security rule issues and auth problems.",{"title":45,"searchDepth":317,"depth":317,"links":318},2,[319,321,322,326,330,333,336],{"id":33,"depth":320,"text":34},3,{"id":49,"depth":317,"text":50},{"id":112,"depth":317,"text":113,"children":323},[324,325],{"id":116,"depth":320,"text":117},{"id":133,"depth":320,"text":134},{"id":146,"depth":317,"text":147,"children":327},[328,329],{"id":150,"depth":320,"text":151},{"id":166,"depth":320,"text":167},{"id":188,"depth":317,"text":189,"children":331},[332],{"id":192,"depth":320,"text":193},{"id":214,"depth":317,"text":215,"children":334},[335],{"id":250,"depth":320,"text":251},{"id":311,"depth":317,"text":312},"blueprints","2026-02-04","Security guide for Cursor + React + Firebase stack. Configure Firestore rules, secure React components, protect Firebase credentials, and handle client-side auth properly.",false,"md",null,"purple",{},true,"Complete security configuration for React apps with Firebase built in Cursor.","/blog/blueprints/cursor-react-firebase","10 min read","[object Object]","Article",{"title":5,"description":339},{"loc":347},"blog/blueprints/cursor-react-firebase",[],"summary_large_image","uwM2eWed-crB6vxCJSvzn-v6jORatvNvwCNPtgJ7SCc",1775843932291]