How to Integrate Lovable with Firebase

A service account gives your Edge Function administrative access to your Firebase project. To create one, open the Firebase Console at console.firebase.google.com, select your project, and click the gear icon next to 'Project Overview' → 'Project settings'. Navigate to the 'Service accounts' tab. You'll see a section labeled 'Firebase Admin SDK' with code snippets — ignore those for now. Click 'Generate new private key', then 'Generate key' in the confirmation dialog. Firebase downloads a JSON file to your computer. This file contains your project ID, a private key, and a client email — all the credentials needed to authenticate as a service admin. Keep this file secure and never commit it to GitHub or share it in chat. The JSON file looks like: { "type": "service_account", "project_id": "your-project", "private_key_id": "...", "private_key": "-----BEGIN RSA PRIVATE KEY-----\n...", "client_email": "firebase-adminsdk-...@your-project.iam.gserviceaccount.com", ... }. You'll paste the entire contents of this JSON file into a single Lovable secret in the next step.

In Lovable, click the '+' button next to the Preview panel to open the Cloud tab, then navigate to Secrets. You need to add multiple secrets for Firebase: the full service account JSON, and individual values the Edge Function will need. Add the following secrets: - FIREBASE_SERVICE_ACCOUNT_JSON: paste the entire JSON file contents as a single-line string (you may need to minify it or ensure it pastes without line breaks) - FIREBASE_PROJECT_ID: your Firebase project ID (e.g., my-app-12345) - FIREBASE_DATABASE_URL: your Realtime Database URL if using RTDB (e.g., https://my-app-12345-default-rtdb.firebaseio.com) — omit if using only Firestore Storing the full service account JSON as a single secret is the recommended approach for Deno Edge Functions. The Edge Function will parse it with JSON.parse(Deno.env.get('FIREBASE_SERVICE_ACCOUNT_JSON')) to extract the credentials needed for JWT signing. Lovable's security system actively blocks approximately 1,200 private keys from being hardcoded into code per day. Even so, never paste service account JSON in the chat panel — on free tier, chat history is publicly visible and pasted secrets are recoverable from commit history.

Now create the core Edge Function that proxies Firestore operations. Ask Lovable to generate an Edge Function at supabase/functions/firebase-firestore/index.ts. This function will authenticate with Firebase using a signed JWT generated from the service account credentials, then call Firestore's REST API. Firestore's REST API base URL is: https://firestore.googleapis.com/v1/projects/{PROJECT_ID}/databases/(default)/documents/. All read and write operations use standard HTTP methods: GET for reading documents and collections, POST for creating documents, PATCH for updating, and DELETE for deleting. The authentication flow requires generating a Google OAuth2 access token by signing a JWT with the service account's private key — the Edge Function cannot use the Firebase Admin Node.js SDK directly because it is not compatible with Deno's runtime. Instead, Lovable generates code that uses the Web Crypto API (available natively in Deno) to sign the JWT and exchange it for an access token from Google's OAuth endpoint. This is more code than the Node.js SDK pattern but works reliably in Deno. The Edge Function should accept a collection name, document ID (optional), and operation type, then construct the appropriate Firestore REST call and return the response.

With the Edge Function deployed, open the Lovable chat and describe the UI components you want. Provide your Firestore collection structure so Lovable generates accurate field references. A useful prompt format is: 'My Firestore collection users has documents with fields: displayName (string), email (string), plan (string), createdAt (timestamp). Using the firebase-firestore Edge Function, build a user list page with search by name and filter by plan.' Lovable generates React components that fetch from your Edge Function using the standard Supabase functions URL pattern: https://[project-ref].supabase.co/functions/v1/firebase-firestore. The fetch call includes a JSON body specifying the operation, collection, and any filters. Loading states, error handling, and data display are all generated automatically. For real-time updates (Firestore's most popular feature), note that the REST API does not support WebSocket streaming. The Edge Function pattern gives you request/response queries only. If you need real-time Firestore updates in your Lovable app, consider adding the Firebase JS SDK directly to your frontend and using it only for Firestore's onSnapshot listener, while keeping all write operations routed through the Edge Function for security.

If your Lovable app uses Firebase Authentication on the client (with the Firebase JS SDK), you can verify those ID tokens in your Edge Functions to authenticate requests. This is important for ensuring only the right users can access or modify specific Firestore documents. The Firebase ID token verification flow works by calling Google's tokeninfo endpoint or by validating the JWT signature locally using Google's public keys. For Lovable Edge Functions, the practical approach is to send the Firebase ID token as a Bearer token in the Authorization header from the frontend, then have the Edge Function validate it by calling Firebase's token exchange API. This step is optional if your app does not use Firebase Authentication — but if it does, adding token verification ensures that unauthenticated callers cannot invoke your Firestore Edge Function and read or modify data. Ask Lovable to add an authentication middleware that extracts and verifies the Firebase token before processing any Firestore request. For complex authentication scenarios involving custom claims, role-based access, or integration with Firebase Security Rules, RapidDev's team can help design the right verification pattern for your specific use case.