[{"data":1,"prerenderedAt":244},["ShallowReactive",2],{"blog-blueprints/bolt-react-firebase":3},{"id":4,"title":5,"body":6,"category":223,"date":224,"dateModified":225,"description":226,"draft":227,"extension":228,"faq":229,"featured":227,"headerVariant":230,"image":229,"keywords":229,"meta":231,"navigation":232,"ogDescription":233,"ogTitle":229,"path":234,"readTime":235,"schemaOrg":236,"schemaType":237,"seo":238,"sitemap":239,"stem":240,"tags":241,"twitterCard":242,"__hash__":243},"blog/blog/blueprints/bolt-react-firebase.md","Bolt.new + React + Firebase Security Blueprint",{"type":7,"value":8,"toc":212},"minimark",[9,20,24,30,35,38,94,98,113,117,126,135,139,144,147,150,153,156,159,162,176,186,200],[10,11,12],"blueprint-summary",{},[13,14,15,19],"p",{},[16,17,18],"strong",{},"To secure a Bolt.new + React + Firebase stack,"," you need to: (1) replace test-mode Firestore rules with production rules that verify authentication, (2) implement proper AuthContext with onAuthStateChanged for session persistence, (3) create protected route components to guard authenticated pages, and (4) ensure Firestore rules back up any UI-level restrictions since client-side protection alone is insufficient. This blueprint covers multi-layer security across the React and Firebase stack.",[21,22],"blueprint-meta",{"time":23},"2-3 hours",[25,26,27],"tldr",{},[13,28,29],{},"Bolt generates React + Firebase apps with common security gaps: test-mode Firestore rules, inconsistent auth state handling, and unprotected routes. After export: replace permissive security rules, implement proper auth context with onAuthStateChanged, add protected route components, and verify that UI-level protection is backed by Firestore rules.",[31,32,34],"h2",{"id":33},"react-firebase-security-layers","React + Firebase Security Layers",[13,36,37],{},"This stack requires security at multiple levels:",[39,40,41,57],"table",{},[42,43,44],"thead",{},[45,46,47,51,54],"tr",{},[48,49,50],"th",{},"Layer",[48,52,53],{},"Purpose",[48,55,56],{},"Bolt Issues",[58,59,60,72,83],"tbody",{},[45,61,62,66,69],{},[63,64,65],"td",{},"Firestore Rules",[63,67,68],{},"Data access control",[63,70,71],{},"Often test mode or missing",[45,73,74,77,80],{},[63,75,76],{},"React Auth Context",[63,78,79],{},"App-wide auth state",[63,81,82],{},"May not persist properly",[45,84,85,88,91],{},[63,86,87],{},"Protected Routes",[63,89,90],{},"UX-level access control",[63,92,93],{},"Sometimes incomplete",[31,95,97],{"id":96},"part-1-firestore-security-rules","Part 1: Firestore Security Rules",[99,100,102],"code-block",{"label":101},"Replace test mode with secure rules",[103,104,109],"pre",{"className":105,"code":107,"language":108},[106],"language-text","rules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\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    match /items/{itemId} {\n      allow read, update, delete: if request.auth != null\n        && resource.data.userId == request.auth.uid;\n      allow create: if request.auth != null\n        && request.resource.data.userId == request.auth.uid;\n    }\n  }\n}\n","text",[110,111,107],"code",{"__ignoreMap":112},"",[31,114,116],{"id":115},"part-2-react-auth-context","Part 2: React Auth Context",[99,118,120],{"label":119},"src/contexts/AuthContext.tsx",[103,121,124],{"className":122,"code":123,"language":108},[106],"import { createContext, useContext, useEffect, useState } from 'react';\nimport { onAuthStateChanged, User } from 'firebase/auth';\nimport { auth } from '../lib/firebase';\n\nconst AuthContext = createContext\u003C{ user: User | null; loading: boolean }>({\n  user: null,\n  loading: true,\n});\n\nexport function AuthProvider({ children }) {\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",[110,125,123],{"__ignoreMap":112},[127,128,129],"warning-box",{},[13,130,131,134],{},[16,132,133],{},"Remember:"," Protected routes are for UX only. Your Firestore rules are the real security layer.",[31,136,138],{"id":137},"security-checklist","Security Checklist",[140,141,143],"h4",{"id":142},"post-export-checklist-for-bolt-react-firebase","Post-Export Checklist for Bolt + React + Firebase",[13,145,146],{},"Firestore rules replaced from test mode",[13,148,149],{},"Storage rules configured (if using)",[13,151,152],{},"AuthContext implemented with onAuthStateChanged",[13,154,155],{},"Protected routes wrap authenticated pages",[13,157,158],{},"Data queries scoped to current user",[13,160,161],{},"Firebase config in environment variables",[163,164,165,170],"stack-comparison",{},[166,167,169],"h3",{"id":168},"alternative-stacks-to-consider","Alternative Stacks to Consider",[103,171,174],{"className":172,"code":173,"language":108},[106],"      **Bolt.new + Firebase**\n      General Firebase security guide\n\n\n      **Bolt.new + Next.js + Supabase**\n      Server-side rendering alternative\n\n\n      **Bolt.new + Convex**\n      Real-time TypeScript alternative\n",[110,175,173],{"__ignoreMap":112},[177,178,179],"faq-section",{},[180,181,183],"faq-item",{"question":182},"My protected routes work but data still leaks. Why?",[13,184,185],{},"React route protection only affects the UI. If your Firestore rules allow access, anyone can query your database directly. Always secure data at the Firestore rules level.",[187,188,189,195],"related-articles",{},[190,191],"related-card",{"description":192,"href":193,"title":194},"Similar stack with Cursor","/blog/blueprints/cursor-react-firebase","Cursor + React + Firebase",[190,196],{"description":197,"href":198,"title":199},"General Firebase guide","/blog/blueprints/bolt-firebase","Bolt + Firebase",[201,202,205,209],"cta-box",{"href":203,"label":204},"/","Start Free Scan",[31,206,208],{"id":207},"building-react-firebase-with-bolt","Building React + Firebase with Bolt?",[13,210,211],{},"Scan for rule misconfigurations and auth gaps.",{"title":112,"searchDepth":213,"depth":213,"links":214},2,[215,216,217,218,222],{"id":33,"depth":213,"text":34},{"id":96,"depth":213,"text":97},{"id":115,"depth":213,"text":116},{"id":137,"depth":213,"text":138,"children":219},[220],{"id":168,"depth":221,"text":169},3,{"id":207,"depth":213,"text":208},"blueprints","2026-01-28","2026-02-19","Security guide for Bolt.new + React + Firebase stack. Configure Firestore rules, secure React components, handle auth state, and protect your Bolt-generated React app.",false,"md",null,"purple",{},true,"Complete security configuration for React + Firebase apps built with Bolt.new.","/blog/blueprints/bolt-react-firebase","10 min read","[object Object]","Article",{"title":5,"description":226},{"loc":234},"blog/blueprints/bolt-react-firebase",[],"summary_large_image","pMgqE-WZtb88tiMt0_Kw3N70RLm_sj3zHy_hH0kLJXE",1775843932897]