Firebase realtime auth
My personal collection of custom AI Agent Skills for Claude Code. Contains production-grade architectural patterns and workflows for React, Firebase, Tailwind CSS, and Zustand.
npx -y skills add Chagai33/my-agent-skills --skill firebase-realtime-authAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Trigger this skill when adding new Realtime DB listeners, modifying data safely (transactions), or integrating anonymous user authentication.
SKILL.md
3.1 KB, as published. Nobody here has run it
Firebase Realtime DB & Anonymous Auth Flow
This project uses Firebase Realtime Database with a Flat Model architecture and Anonymous Authentication. This approach ensures low latency, minimal bandwidth usage via granular subscriptions, and a frictionless onboarding experience.
When to use this skill
- Adding new real-time listeners (
onValue) for a collection. - Performing complex atomic updates or limits checks (
runTransaction). - Handling user identity where users aren't explicitly registered (frictionless join).
❌ What NOT to do
- Strictly No 'any' Types: Do not declare callbacks or models using
any(e.g.,callback: (details: any)). You must use TypeScript Generics (e.g.,static subscribeToDetails<T>) to enforce type safety in our abstract service methods. - No Client-Side Backend Wipes: If deleting an item requires nested operations (like cleaning up child nodes in the Realtime Database), do NOT perform this cascading delete from the client. Use a Firebase Cloud Function (e.g.,
onDeletetrigger) so it handles the wipe securely and reliably on the server. - Do not listen to the entire root or event object (
/events/eventId). Always use Granular Subscriptions (e.g.,/events/eventId/details,/events/eventId/menuItems). - Do not forget to clean up listeners. Always return the
off()function inuseEffect. - Do not force a login screen. The app relies on "Anonymous Auth First". Always call
signInAnonymously(auth)in the background. - Do not query data linearly before an update if it relies on strict rules (like item limits). Use
runTransactionto read and write atomically.
Golden Examples
1. Granular Subscriptions & Atomic Transactions
Instead of constantly fetching heavy JSON objects, we split listeners. Instead of get followed by set, we use runTransaction for concurrency safety.
See the complete example of how to implement optimized Firebase Services: templates/firebaseService.ts
2. Anonymous Auth "Frictionless" Flow
Users are authenticated in the background immediately. We only ask for their name right before they perform an action (like joining an event or claiming an item).
See the example of standardized Auth logic inside a component: templates/auth-flow.tsx
Key Concepts
- Background Anonymous Sign-In:
onAuthStateChangedlistens for the user. If they don't exist, we immediately callsignInAnonymously(). We store this inlocalUser. - Delayed Profiling (NameModal): A local state (
showNameModal) prompts the user for their name only when they try to perform a restricted action (likehandleJoinEventorhandleAssignClick). - Atomic
runTransaction: Always check constraints (likeallowUserItemsoruserItemLimit) inside the transaction block, because another user might have just claimed the last spot.