[{"data":1,"prerenderedAt":175},["ShallowReactive",2],{"blog-blueprints/react-firebase":3},{"id":4,"title":5,"body":6,"category":154,"date":155,"dateModified":156,"description":157,"draft":158,"extension":159,"faq":160,"featured":158,"headerVariant":161,"image":160,"keywords":160,"meta":162,"navigation":163,"ogDescription":164,"ogTitle":160,"path":165,"readTime":166,"schemaOrg":167,"schemaType":168,"seo":169,"sitemap":170,"stem":171,"tags":172,"twitterCard":173,"__hash__":174},"blog/blog/blueprints/react-firebase.md","React + Firebase Security Blueprint",{"type":7,"value":8,"toc":145},"minimark",[9,20,23,29,34,49,58,62,67,70,73,76,79,82,96,133],[10,11,12],"blueprint-summary",{},[13,14,15,19],"p",{},[16,17,18],"strong",{},"To secure a React + Firebase SPA,"," you need to: (1) replace test-mode Firestore rules with production security rules, (2) configure Storage rules for secure file uploads, (3) implement proper Firebase Auth state management, (4) add production domains to Firebase Auth authorized domains, and (5) test rules thoroughly with the Firebase Emulator. This blueprint covers client-only Firebase security patterns.",[21,22],"blueprint-meta",{},[24,25,26],"tldr",{},[13,27,28],{},"React SPAs with Firebase depend on Firestore Security Rules for protection. Key tasks: replace test-mode rules with production rules, configure Storage rules, use Firebase Auth with proper state management, and remember that client-side route protection is UX-only-rules are your security.",[30,31,33],"h2",{"id":32},"firestore-rules-firebase","Firestore Rules Firebase",[35,36,38],"code-block",{"label":37},"firestore.rules",[39,40,45],"pre",{"className":41,"code":43,"language":44},[42],"language-text","rules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\n    match /users/{userId} {\n      allow read, update: if request.auth != null\n        && request.auth.uid == userId;\n    }\n    match /posts/{postId} {\n      allow read: if true;\n      allow write: if request.auth != null\n        && request.resource.data.authorId == request.auth.uid;\n    }\n  }\n}\n","text",[46,47,43],"code",{"__ignoreMap":48},"",[50,51,52],"warning-box",{},[13,53,54,57],{},[16,55,56],{},"Rules are your security."," In an SPA, there's no server. Your Firestore rules are the only thing preventing unauthorized access.",[30,59,61],{"id":60},"security-checklist","Security Checklist",[63,64,66],"h4",{"id":65},"pre-launch-checklist","Pre-Launch Checklist",[13,68,69],{},"Firestore rules updated from test mode",[13,71,72],{},"Storage rules configured",[13,74,75],{},"Auth state properly managed",[13,77,78],{},"Auth domains include production URL",[13,80,81],{},"Rules tested with emulator",[83,84,85,91],"related-articles",{},[86,87],"related-card",{"description":88,"href":89,"title":90},"With AI tooling","/blog/blueprints/cursor-react-firebase","Cursor + React + Firebase",[86,92],{"description":93,"href":94,"title":95},"Deep dive","/blog/guides/firebase","Firebase Security Guide",[97,98,99,104,107],"stack-comparison",{},[100,101,103],"h3",{"id":102},"alternative-stacks","Alternative Stacks",[13,105,106],{},"Consider these related blueprints:",[108,109,110,119,126],"ul",{},[111,112,113,118],"li",{},[114,115,117],"a",{"href":116},"/blog/blueprints/nextjs-firebase","Next.js + Firebase"," - With server-side rendering",[111,120,121,125],{},[114,122,124],{"href":123},"/blog/blueprints/react-supabase","React + Supabase"," - Supabase/PostgreSQL alternative",[111,127,128,132],{},[114,129,131],{"href":130},"/blog/blueprints/vue-firebase","Vue + Firebase"," - Vue framework alternative",[134,135,138,142],"cta-box",{"href":136,"label":137},"/","Start Free Scan",[30,139,141],{"id":140},"building-with-this-stack","Building with this stack?",[13,143,144],{},"Scan for rule issues.",{"title":48,"searchDepth":146,"depth":146,"links":147},2,[148,149,153],{"id":32,"depth":146,"text":33},{"id":60,"depth":146,"text":61,"children":150},[151],{"id":102,"depth":152,"text":103},3,{"id":140,"depth":146,"text":141},"blueprints","2026-02-09","2026-03-02","Security guide for React + Firebase stack. Configure Firestore rules, handle authentication, protect client-side data, and secure your React SPA.",false,"md",null,"purple",{"noindex":163},true,"Complete security configuration for React apps with Firebase.","/blog/blueprints/react-firebase","9 min read","[object Object]","Article",{"title":5,"description":157},{"loc":165},"blog/blueprints/react-firebase",[],"summary_large_image","_KsxnA4HUSwKWBVQ3Kd67VxB7OW8TerS8STglUdEMWo",1775843920245]