Can Firebase provide native per-user Firestore rate limits without replacing realtime listeners?
I am building an app around Firestore's direct client SDK, realtime listeners and offline cache. I want to keep that architecture, but I cannot find a supported native way to cap an otherwise authorised user's billable reads/writes across devices and concurrent connections.
The existing feature request dates from April 2023 and currently has 73 votes:
firebase.uservoice.com
There are concrete adoption concerns in its comments: Al3life reports moving to Supabase for this feature, capTarget archery says it may rule Firebase out for future projects, and Anatole Couasnon describes adding an API despite choosing Firebase for direct access. These are individual reports, not a survey, but they match the concern blocking my confidence in launching.
I am not asking for authentication or permissions to be replaced. Rules limit what a user can access, but a query-size limit does not limit how often an allowed query runs. App Check attests clients; it is not a configurable allowance for each UID. Budget alerts do not stop usage. Cloud Armor in front of my own API does not control the Google-managed Firestore endpoint the SDK calls.
A custom API/SSE/WebSocket gateway could control traffic routed through it, but rebuilding native listener synchronisation, reconnect handling, cache behaviour and authorisation adds infrastructure, cost and complexity. That is not a viable equivalent for this application. An after-read trigger alone would also be too late to stop the triggering charge or a concurrent burst.
What I would like Firebase to provide is a simple console or rules-level policy, enforced by the service: per-UID rolling/burst allowances shared across devices, plus a database/project backstop. It needs to address document/query volume, writes, initial listener snapshots, subsequent billable updates and reconnects, with clear charging and quota-exceeded semantics. I appreciate that the implementation may be more complex than the setting exposed to developers.
I submitted a detailed feature request yesterday and have asked our Google Cloud contacts to escalate it. Is there a Firestore product owner who can give this an explicit status or link it to the right backend tracker? If a supported solution now preserves direct SDK listeners and actually enforces the allowance, I would welcome a documentation link. Otherwise, please treat this as an adoption and cost-abuse concern that needs an owned response.
Related history: firebase-js-sdk#647
Official App Check limitations: firebase.google.com
Budget guidance: firebase.google.com
4 points · 4 comments
Live text search with Firestore pipelines and React in Firebase: Web Architecture & Implementation Guide
Original: codingcat.dev
Live text search with Firestore pipelines and Reactmarks an important milestone for full-stack web and AI engineers building on Firebase and Google Cloud. Following the official announcement by Jeff Huleatt on theFirebase Blog(2026-05-28), this hands-on CodingCat.dev implementation guide breaks down how to adopt these capabilities in modern TypeScript, Next.js, SvelteKit, React, and Angular applications. Firestore Enterprise edition now has support for text search built-in! Here are a couple of ways to implement search in a React web app. First, I created a text index for the recipes collection. Firestore Enterprise databases don’t require indexes for most features, but they do require it for text search.
Why Live text search with Firestore pipelines and React Matters for Full-Stack Web Developers
When evaluating every new Firebase release for our production web apps and Google Developer Expert (GDE) architecture reviews, the first question is always how it improves developer velocity, runtime security, and end-user latency in the browser and on the server.Firestore Enterprise edition now has support for text search built-in! Here are a couple of ways to implement search in a React web app.
Searching a collection
First, Icreated a text indexfor therecipescollection. Firestore Enterprise databasesdon’t require indexesfor most features, but they do require it for text search.
The index includes multiple fields to give a better chance of returning a relevant result.
Now, I can use the.search()pipelineto search my indexed collection. Here’s an example in plain TypeScript, before I move on to adding it to a React app.
import
import
import
import
const
const
let
.
.
.
query:
sort:
})
.
const
console.
ThedocumentMatchesexpression in thesearchstage searches across all of the indexed fields in the “Recipe search” index created above.
To create a React component that can search a Firestore collection, it helps to use a query library that’s optimized for the React component lifecycle likeTanstack QueryorSWR. In this case, I’m using Tanstack Query’suseSuspenseQuery, which integrates with ReactSuspenseto make loading states to automatically show fallback content while a query is loading:
import
import
import
import
import
const
export
const
queryKey: [
queryFn
let
.
.
if
console.
pipeline
query:
// show the most relevant items first
sort:
});
}
pipeline
const
return
},
});
return
<>
<
{data.
const
return
})}
</
{searchTerm.length
{data.length} results for "{searchTerm}"
</
</>
);
}
searchTermis passed in as a prop from a parent component. I’m only addingsearchto the pipeline if thesearchTermis not empty. If thesearchTermis empty, I return ten items from the collection, thanks to thelimitstage.
Notice that there is no loading state management in my code.useSuspenseQuerylets me offload that onto the parent components that wrap this component, which makes thisSearchResultscomponent reusable.
I’m callinginitializeAppandinitializeFirestoreon every query, mostly for clarity’s sake in this sample. That’s no problem because these functions areidempotent, but in a real React app you’d probably initialize them once elsewhere in your app and import them into components that need them.
React patterns for search
Now that we have a component that can search Firestore, let’s look at a basic search, and then upgrade that to a live search that updates as the user types. Both of these components use the SearchResults component above.
In thisSearchcomponent, a new search starts when the user submits a search form.
export
const
return
<>
<
<
<
<
</
<
<
</
</
</>
);
}
I’m maintainingsearchTermwithuseStateand passing it as a prop to theSearchResultscomponent. I’ve wrappedSearchResultsin aSuspensecomponent that will automatically render thefallbackwhile we wait for the search to complete.
To set thesearchTerm, I have aninputof typesearchwithin a form. In the form’saction propI have a handler that gets the search query fromformDataand updatessearchTerm. That in turn causes theSearchcomponent to re-render, passing a new search term toSearchResults.
In theLiveSearchcomponent, I’ve implemented the same form as above, but with an enhancement. Now, searches also happen as the user types. The input isdebouncedto avoid performing unnecessary searches.
export
const
const
// Keep track of the currently typed search query,
// and use it to start a search after a delay
const
useEffect
const
setSearchTerm
},
return
clearTimeout
};
}, [liveSearchTerm]);
return
<>
<
<
<
name=
type=
placeholder=
value=
onChange=
/>
<
</
<
<
</
</
</>
);
}
The search input updates theliveSearchTermstate variable whenever it changes. Since I’ve includedliveSearchTermin the dependency array ofuseEffect, the debouncing function re-runs every timeliveSearchTermchanges, callingsetSearchTermon a 300ms delay.
Live search would work if I stopped there. However, there would be an annoying flash of loading state every timesearchTermupdates, asSearchResultsre-queries the Firestore collection:
To prevent that, I’ve introduced another variable,deferredSearchTerm, that is synced withsearchTermviauseDeferredValuetoshow stale content while fresh content is loading. Now, instead of a flash of loading state every timesearchTermchanges, React knows to just keep the results of the last search on the screen until the new search completes.
It might seem like the debouncinguseEffecthook anduseDeferredValueare redundant, but they’re solving two different problems. Debouncing cuts the number of searches against the database, reducing cost, whileuseDeferredValueprevents loading state jank.
Summary
Live search is a great way to let users find things quickly in your app, and with Firestore pipelines and modern React APIs, it doesn’t take much code to implement.
To make this even better, here are ideas for some other potential enhancements:
- Store the search term in the URL query string so that a search can be bookmarked, or even executed in aServer Component.
- Right now,searchis performed if the query is at least 1 character long. Based on what you’re searching through, it might make sense to restrict search even more, to a minimum of 3 or 4 characters.
- Include the search score of each item by usingaddFieldsin the search stage.
- Use other pipeline features to allow more advanced filtering of data, like in theFriendlyMeals-web sample.
If you’re inspired to try this out, let us know how it went onXorLinkedIn!
Production Web Architecture & Security Checklist
Whether you are deploying onFirebase App Hosting, Cloudflare Workers, or Vercel, shipping React features to production requires defense-in-depth across three layers:
- Enforce Firebase App Check & Attestation:Protect your web endpoints, Cloud Functions, Data Connect GraphQL resolvers, and Firebase AI Logic calls against unauthorized replay or billing abuse usingFirebase App Check with reCAPTCHA Enterprise.
- Validate Locally with the Firebase Emulator Suite:Run deterministic integration tests against local Firestore, Auth, Functions, and Data Connect PostgreSQL emulators before promoting schema or rule changes to production.
- Keep Server & Client Boundaries Type-Safe:Use the modular Firebase Web SDK and generated TypeScript bindings so SSR frameworks like Next.js, SvelteKit, and Angular serialize state cleanly without hydration flickers.
Watch Our Related Firebase Video Tutorial on YouTube
Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev sessionBuilding a web application with Next.js and Firebase - Firebase Summit 2021below, and make sure toSubscribe to CodingCat.dev on YouTubefor weekly full-stack web and AI deep dives:
{% youtube kHrIyTLVerg %}
Resources, Official Docs & Related CodingCat.dev Guides
- Primary Release Source:Live text search with Firestore pipelines and React on the Official Firebase Blog(published 2026-05-28 by Jeff Huleatt)
- Official Firebase Documentation:Firebase Developer Docs & Web SDK Reference
- Related on CodingCat.dev:What’s new from Firebase at Google I/O 2026
- Related on CodingCat.dev:Building a cooking assistant with Firebase AI Logic
- Related on CodingCat.dev:Firebase SQL with Data Connect
- Related on CodingCat.dev:Build a Custom No-Code App in 90 Minutes
Frequently Asked Questions (FAQ)
What are the key capabilities introduced in Live text search with Firestore pipelines and React?
Live text search with Firestore pipelines and React (announced 2026-05-28) enhances the Firebase platform for Firebase, Google Cloud, Web Dev, React, TypeScript workloads. Firestore Enterprise edition now has support for text search built-in! Here are a couple of ways to implement search in a React web app. Developers can review the official release notes on theFirebase Blogalongside the implementation patterns in this guide.
How do web developers use Live text search with Firestore pipelines and React with Next.js, SvelteKit, React, or Angular?
Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, andFirebase App Hosting. Always pair client-side SDK initialization with Firebase App Check and strict Security Rules, and test locally with the Firebase Local Emulator Suite before deploying.
Where can I watch video tutorials on Firebase Web and AI development?
You can watch our hands-on Firebase video walkthroughs on theCodingCat.dev YouTube Channel, includingBuilding a web application with Next.js and Firebase - Firebase Summit 2021, and browse our complete Firebase tutorial archive on CodingCat.dev.
1 comment
Mentions
Can Firebase provide native per-user Firestore rate limits without replacing realtime listeners? I am building an app around Firestore's direct client SDK, realtime listeners and offline cache. I want to keep that architecture, but I cannot find a supported native way to cap an otherwise authorised user's billable reads/writes across devices and concurrent connections. The existing feature request dates from April 2023 and currently has 73 votes: firebase.uservoice.com There are concrete adoption concerns in its comments: Al3life reports moving to Supabase for this feature, capTarget archery says it may rule Firebase out for future projects, and Anatole Couasnon describes adding an API despite choosing Firebase for direct access. These are individual reports, not a survey, but they match the concern blocking my confidence in launching. I am not asking for authentication or permissions to be replaced. Rules limit what a user can access, but a query-size limit does not limit how often an allowed query runs. App Check attests clients; it is not a configurable allowance for each UID. Budget alerts do not stop usage. Cloud Armor in front of my own API does not control the Google-managed Firestore endpoint the SDK calls. A custom API/SSE/WebSocket gateway could control traffic routed through it, but rebuilding native listener synchronisation, reconnect handling, cache behaviour and authorisation adds infrastructure, cost and complexity. That is not a viable equivalent for this application. An after-read trigger alone would also be too late to stop the triggering charge or a concurrent burst. What I would like Firebase to provide is a simple console or rules-level policy, enforced by the service: per-UID rolling/burst allowances shared across devices, plus a database/project backstop. It needs to address document/query volume, writes, initial listener snapshots, subsequent billable updates and reconnects, with clear charging and quota-exceeded semantics. I appreciate that the implementation may be more complex than the setting exposed to developers. I submitted a detailed feature request yesterday and have asked our Google Cloud contacts to escalate it. Is there a Firestore product owner who can give this an explicit status or link it to the right backend tracker? If a supported solution now preserves direct SDK listeners and actually enforces the allowance, I would welcome a documentation link. Otherwise, please treat this as an adoption and cost-abuse concern that needs an owned response. Related history: firebase-js-sdk#647 Official App Check limitations: firebase.google.com Budget guidance: firebase.google.com
Live text search with Firestore pipelines and React in Firebase: Web Architecture & Implementation Guide Original: codingcat.dev Live text search with Firestore pipelines and Reactmarks an important milestone for full-stack web and AI engineers building on Firebase and Google Cloud. Following the official announcement by Jeff Huleatt on theFirebase Blog(2026-05-28), this hands-on CodingCat.dev implementation guide breaks down how to adopt these capabilities in modern TypeScript, Next.js, SvelteKit, React, and Angular applications. Firestore Enterprise edition now has support for text search built-in! Here are a couple of ways to implement search in a React web app. First, I created a text index for the recipes collection. Firestore Enterprise databases don’t require indexes for most features, but they do require it for text search. Why Live text search with Firestore pipelines and React Matters for Full-Stack Web Developers When evaluating every new Firebase release for our production web apps and Google Developer Expert (GDE) architecture reviews, the first question is always how it improves developer velocity, runtime security, and end-user latency in the browser and on the server.Firestore Enterprise edition now has support for text search built-in! Here are a couple of ways to implement search in a React web app. Searching a collection First, Icreated a text indexfor therecipescollection. Firestore Enterprise databasesdon’t require indexesfor most features, but they do require it for text search. The index includes multiple fields to give a better chance of returning a relevant result. Now, I can use the.search()pipelineto search my indexed collection. Here’s an example in plain TypeScript, before I move on to adding it to a React app. import import import import const const let . . . query: sort: }) . const console. ThedocumentMatchesexpression in thesearchstage searches across all of the indexed fields in the “Recipe search” index created above. To create a React component that can search a Firestore collection, it helps to use a query library that’s optimized for the React component lifecycle likeTanstack QueryorSWR. In this case, I’m using Tanstack Query’suseSuspenseQuery, which integrates with ReactSuspenseto make loading states to automatically show fallback content while a query is loading: import import import import import const export const queryKey: [ queryFn let . . if console. pipeline query: // show the most relevant items first sort: }); } pipeline const return }, }); return <> < {data. const return })} </ {searchTerm.length {data.length} results for "{searchTerm}" </ </> ); } searchTermis passed in as a prop from a parent component. I’m only addingsearchto the pipeline if thesearchTermis not empty. If thesearchTermis empty, I return ten items from the collection, thanks to thelimitstage. Notice that there is no loading state management in my code.useSuspenseQuerylets me offload that onto the parent components that wrap this component, which makes thisSearchResultscomponent reusable. I’m callinginitializeAppandinitializeFirestoreon every query, mostly for clarity’s sake in this sample. That’s no problem because these functions areidempotent, but in a real React app you’d probably initialize them once elsewhere in your app and import them into components that need them. React patterns for search Now that we have a component that can search Firestore, let’s look at a basic search, and then upgrade that to a live search that updates as the user types. Both of these components use the SearchResults component above. In thisSearchcomponent, a new search starts when the user submits a search form. export const return <> < < < < </ < < </ </ </> ); } I’m maintainingsearchTermwithuseStateand passing it as a prop to theSearchResultscomponent. I’ve wrappedSearchResultsin aSuspensecomponent that will automatically render thefallbackwhile we wait for the search to complete. To set thesearchTerm, I have aninputof typesearchwithin a form. In the form’saction propI have a handler that gets the search query fromformDataand updatessearchTerm. That in turn causes theSearchcomponent to re-render, passing a new search term toSearchResults. In theLiveSearchcomponent, I’ve implemented the same form as above, but with an enhancement. Now, searches also happen as the user types. The input isdebouncedto avoid performing unnecessary searches. export const const // Keep track of the currently typed search query, // and use it to start a search after a delay const useEffect const setSearchTerm }, return clearTimeout }; }, [liveSearchTerm]); return <> < < < name= type= placeholder= value= onChange= /> < </ < < </ </ </> ); } The search input updates theliveSearchTermstate variable whenever it changes. Since I’ve includedliveSearchTermin the dependency array ofuseEffect, the debouncing function re-runs every timeliveSearchTermchanges, callingsetSearchTermon a 300ms delay. Live search would work if I stopped there. However, there would be an annoying flash of loading state every timesearchTermupdates, asSearchResultsre-queries the Firestore collection: To prevent that, I’ve introduced another variable,deferredSearchTerm, that is synced withsearchTermviauseDeferredValuetoshow stale content while fresh content is loading. Now, instead of a flash of loading state every timesearchTermchanges, React knows to just keep the results of the last search on the screen until the new search completes. It might seem like the debouncinguseEffecthook anduseDeferredValueare redundant, but they’re solving two different problems. Debouncing cuts the number of searches against the database, reducing cost, whileuseDeferredValueprevents loading state jank. Summary Live search is a great way to let users find things quickly in your app, and with Firestore pipelines and modern React APIs, it doesn’t take much code to implement. To make this even better, here are ideas for some other potential enhancements: - Store the search term in the URL query string so that a search can be bookmarked, or even executed in aServer Component. - Right now,searchis performed if the query is at least 1 character long. Based on what you’re searching through, it might make sense to restrict search even more, to a minimum of 3 or 4 characters. - Include the search score of each item by usingaddFieldsin the search stage. - Use other pipeline features to allow more advanced filtering of data, like in theFriendlyMeals-web sample. If you’re inspired to try this out, let us know how it went onXorLinkedIn! Production Web Architecture & Security Checklist Whether you are deploying onFirebase App Hosting, Cloudflare Workers, or Vercel, shipping React features to production requires defense-in-depth across three layers: - Enforce Firebase App Check & Attestation:Protect your web endpoints, Cloud Functions, Data Connect GraphQL resolvers, and Firebase AI Logic calls against unauthorized replay or billing abuse usingFirebase App Check with reCAPTCHA Enterprise. - Validate Locally with the Firebase Emulator Suite:Run deterministic integration tests against local Firestore, Auth, Functions, and Data Connect PostgreSQL emulators before promoting schema or rule changes to production. - Keep Server & Client Boundaries Type-Safe:Use the modular Firebase Web SDK and generated TypeScript bindings so SSR frameworks like Next.js, SvelteKit, and Angular serialize state cleanly without hydration flickers. Watch Our Related Firebase Video Tutorial on YouTube Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev sessionBuilding a web application with Next.js and Firebase - Firebase Summit 2021below, and make sure toSubscribe to CodingCat.dev on YouTubefor weekly full-stack web and AI deep dives: {% youtube kHrIyTLVerg %} Resources, Official Docs & Related CodingCat.dev Guides - Primary Release Source:Live text search with Firestore pipelines and React on the Official Firebase Blog(published 2026-05-28 by Jeff Huleatt) - Official Firebase Documentation:Firebase Developer Docs & Web SDK Reference - Related on CodingCat.dev:What’s new from Firebase at Google I/O 2026 - Related on CodingCat.dev:Building a cooking assistant with Firebase AI Logic - Related on CodingCat.dev:Firebase SQL with Data Connect - Related on CodingCat.dev:Build a Custom No-Code App in 90 Minutes Frequently Asked Questions (FAQ) What are the key capabilities introduced in Live text search with Firestore pipelines and React? Live text search with Firestore pipelines and React (announced 2026-05-28) enhances the Firebase platform for Firebase, Google Cloud, Web Dev, React, TypeScript workloads. Firestore Enterprise edition now has support for text search built-in! Here are a couple of ways to implement search in a React web app. Developers can review the official release notes on theFirebase Blogalongside the implementation patterns in this guide. How do web developers use Live text search with Firestore pipelines and React with Next.js, SvelteKit, React, or Angular? Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, andFirebase App Hosting. Always pair client-side SDK initialization with Firebase App Check and strict Security Rules, and test locally with the Firebase Local Emulator Suite before deploying. Where can I watch video tutorials on Firebase Web and AI development? You can watch our hands-on Firebase video walkthroughs on theCodingCat.dev YouTube Channel, includingBuilding a web application with Next.js and Firebase - Firebase Summit 2021, and browse our complete Firebase tutorial archive on CodingCat.dev.