Integrate Firebase to your Lovable Application to power live collaboration

Build a Firebase Realtime Database integration inside Lovable to power live collaboration. Start with a setup panel that initializes Firebase using config credentials (apiKey, authDomain, projectId, databaseURL, storageBucket, messagingSenderId). Store secrets securely and only expose masked values client-side. Implement a presence system that writes to /presence/{uid} with online: true/false and a last-seen timestamp. Use onDisconnect() to mark users offline automatically and subscribe to presence changes to render an Online Users list with avatars and color dots.

Create a shared state object (e.g., /shared/cursors or /shared/form) that syncs across clients in real time. Broadcast cursor coordinates, selected fields, and live form edits using throttled updates; debounce reads to minimize jitter. Show each collaborator’s color/initials and a subtle cursor badge.

Add hybrid authentication: let users sign in with Supabase Auth or Firebase Auth (email, OAuth). Normalize the session to a common currentUser shape and gate database paths by uid. Handle offline/online transitions gracefully with queued local writes that replay when connectivity returns.

Expose a small Dev Console: connection status, last sync time, and conflict resolution mode (last-write-wins vs merge). Design with Lovable’s clean UI and Firebase’s accent colors—rounded cards, clear labels, and responsive layout—so teams can see who’s online, where they’re editing, and watch shared state update live across every open client.

Single Shot Prompt

"Set up Firebase Realtime Database integration for live collaboration features. Initialize Firebase in the app with config credentials. Create a presence system showing online users with real-time status updates. Add a shared state object that syncs across all connected clients (like cursor positions or live form edits). Include Firebase Auth integration alongside Supabase for hybrid authentication and handle offline/online state transitions gracefully."