IDX with Firebase Studio

Apps you build in IDX with Firebase Studio depend on backend services. A Webflow site alone has none of these. There is no built-in way to authenticate users, gate pages behind a login, or store session data since User Accounts were sunset on January 29, 2026. Custom code runs only in the browser and cannot execute server-side languages like PHP or Python.

Project IDX became Firebase Studio, and Google is retiring that workspace: new workspace creation and user signup were disabled on June 22, 2026, and the service shuts down on March 22, 2027. Start nothing new there. The Firebase services this page relies on are unaffected. Firebase Authentication signs users in, and Firestore stores their data. Cloud Functions run the code a browser cannot. A <script type="module"> tag in a Code Embed element brings the Firebase JavaScript SDK into any Webflow page, and a Cloud Function can write Firestore records into the Webflow CMS through the Data API.

This integration suits agencies delivering client portals where admins and customers see different dashboards. It fits founders running a Webflow marketing site for a SaaS product whose data already lives in Firestore. Developers who want serverless endpoints without provisioning a server use it too.

How to integrate IDX with Firebase Studio with Webflow

What is IDX with Firebase Studio? IDX with Firebase Studio is Google's cloud-based development environment. Firebase Studio unifies Project IDX with specialized AI agents and Gemini assistance. It runs a Code OSS workspace on a Google Cloud VM with Gemini coding assistance, framework templates, and one-click publishing to Firebase Hosting, App Hosting, or Cloud Run. Google disabled new workspace creation on June 22, 2026 and will shut the service down on March 22, 2027.

Teams pair the two when the public site lives in Webflow and the application logic lives in Firebase. Cozy Design says its Cozy Redirector tool, a Webflow redirect manager built inside Firebase Studio, "went from concept to functional release in about a week". Workspaces created before that cutoff still open, and Google's notice is explicit that "all our core Firebase products (like Firestore, Authentication, App Hosting, etc.) are not impacted by the Firebase Studio sunset".

The IDX with Firebase Studio-Webflow integration supports three approaches:

• The Firebase JavaScript SDK in Code Embed elements handles sign-in, and Firestore reads directly in Webflow pages with a script tag.
• Zapier, Make, n8n, and viaSocket let you move records between Firestore and Webflow CMS collections without code.
• The Webflow and Firebase APIs give you full control over CMS sync, form routing, and token verification, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add Firebase Authentication and Firestore with Code Embed elements

The Firebase JavaScript SDK loads from Google's CDN as ES modules. A Webflow page can therefore sign users in and read Firestore without npm or a build step. You paste a <script type="module"> tag into a Code Embed element or into head and body code and write the JavaScript yourself. Firestore Security Rules do the access control; every request from a web client is evaluated against them before any read or write. Firebase's alternative setup guide describes the CDN route as for "users with special requirements" and prefers npm, but a Webflow page has no build tool. You need an active Site plan or a Core, Growth, Agency, or Freelancer Workspace to add custom code.

The SDK can sign users in with email and password or with signInWithPopup() for Google, Apple, GitHub, and other providers. For Firestore, you can:

• Read a document once with getDoc() or subscribe with onSnapshot() to update DOM elements without a page reload
• Expose a public read-only collection with a rule like allow read: if true; allow write: if false;

The rules run on Firebase's servers, so a visitor editing your page JavaScript cannot widen their own access.

Load the Firebase JavaScript SDK in custom code

This path puts Firebase directly in the page. It fits sign-in forms, member-only sections, and live data widgets on a marketing site. You need a Firebase project with a registered web app and its firebaseConfig object. Each custom code section and each Code Embed element holds up to 50,000 characters. The import URLs below carry an explicit SDK version, so take the current version number from Firebase's own setup pages rather than copying an old one.

To add the SDK to a page:

1. In the Firebase console, click Settings (gear icon) > General > Your apps, register a web app, and copy the firebaseConfig object.
2. In Webflow, open Site settings > Custom code and paste the module script below into Head code, then click Save changes. For a single page, use Page settings > Inside <head> tag instead.
3. Open the Add panel, add a Code Embed element to the canvas, paste your sign-in form and auth logic, and click Save and close.
4. In the Firebase console, go to Security > Authentication > Settings > Authorized domains, click Add domain, and add your Webflow domain.
5. Write Firestore Security Rules for every collection the page touches, then publish the Webflow site.

<script type="module">
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/12.19.0/firebase-app.js';
  import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/12.19.0/firebase-auth.js';
  import { getFirestore } from 'https://www.gstatic.com/firebasejs/12.19.0/firebase-firestore.js';

  const app = initializeApp({ /* firebaseConfig */ });
  const auth = getAuth(app);
  const db = getFirestore(app);

  onAuthStateChanged(auth, (user) => {
    // user is null while Firebase initializes
  });
</script>

onAuthStateChanged fires null during initialization, so a redirect to a login page on that first null creates an infinite redirect loop. Firestore Security Rules evaluate a query against every document it could return. The whole query fails if the rules forbid any of those documents.

Embed a Firebase-hosted app in an iframe

If the app already exists as a Next.js or Angular build, embed its deployed URL instead of rewriting it as page JavaScript. Firebase Hosting serves at PROJECT_ID.web.app and PROJECT_ID.firebaseapp.com, and App Hosting serves at backend-id--project-id.us-central1.hosted.app. Both support custom domains. The Webflow side is the same iframe workflow used to embed an Airtable form.

To embed the app:

1. In an existing Firebase Studio workspace, click Publish, review the Firebase project, click Next, complete the billing and Set up services prompts, and click Publish now. For a static build, run firebase deploy --only hosting from the terminal instead.
2. Copy the deployed URL from the publish pane or the Firebase console.
3. In Webflow, add a Code Embed element and paste <iframe src="https://PROJECT_ID.web.app" width="100%" height="800"></iframe>.
4. Publish the site and test sign-in inside the frame.

signInWithRedirect() "uses a cross-origin iframe that connects to your app's Firebase Hosting domain" and "doesn't work with browsers that block third-party storage access", so use signInWithPopup() or a custom authDomain inside embedded apps. Neither hosting product's documentation covers X-Frame-Options or Content-Security-Policy, so whether the app can be framed depends on the headers your app sends.

Connect with Zapier, Make, n8n, or viaSocket

Use this method when a Firestore document should become a CMS item, or a form submission should land in Firestore, and nobody wants to maintain a function. Zapier, Make, n8n, and viaSocket all provide no-code connections between Webflow and Firestore or the Realtime Database. Their connectors communicate directly with Firestore and the Realtime Database. Zapier ships two pre-made Webflow templates for its Firebase / Firestore app, and Make marks both its Google Cloud Firestore and Webflow apps as "verified, supported, and maintained by Make".

Available triggers and actions include:

• Zapier: New Document Within a Firestore Collection → Create Webflow live item, using Zapier's prebuilt Firestore to Webflow template
• Zapier: New Child Object in a Firebase Realtime Database → Create Webflow item
• Make: Webflow Watch Events → Google Cloud Firestore Create a Document
• Make: Google Cloud Firestore Watch New Documents → Webflow Create an Item, then Publish Site
• Make: Webflow Watch Events → Firebase Cloud Messaging Send a Message
• n8n: Webflow Trigger on Form Submission or Collection Item Created → Google Cloud Firestore Create or Create/Update
• n8n: Google Cloud Firestore Run Query → Webflow node Update item
• viaSocket: Webflow New Form Submission or Collection Item Created → Google Cloud Firestore List Collection IDs

None of these platforms exposes Firebase Authentication.

Build with the Webflow and Firebase APIs

Every new integration must use Data API v2, since v1 was deprecated on March 31, 2025. Cloud Functions and the Webflow Data API v2 give you two-way sync, signed webhooks, and server-side token checks. Code written in Firebase Studio deploys as Cloud Functions that call Webflow. Firebase Studio itself has no public REST API. This path needs Node.js, the Firebase CLI, and a Firebase project with a linked Cloud Billing account, because Cloud Functions do not deploy on the Spark plan.

The APIs involved are:

• Cloud Firestore REST API, version 1, handles list, createDocument, patch, delete, and runQuery calls on documents
• Firebase Authentication REST API handles accounts:signUp, accounts:signInWithPassword, and token refresh
• Cloud Functions HTTPS triggers expose onRequest endpoints at https://REGION-PROJECT_ID.cloudfunctions.net/FUNCTION_NAME
• Firestore event triggers fire onDocumentCreated, onDocumentUpdated, onDocumentDeleted, and onDocumentWritten
• Webflow's Data API handles CMS collections and form submissions
• Webflow webhooks trigger real-time events between systems

Generate a site token under Site settings > Apps & integrations > API access > Generate API token. Select read and write for the scopes you need. Only site administrators can create one, a site holds at most 5, and tokens expire after 365 consecutive days of inactivity.

Sync Firestore documents to Webflow CMS items

Elena Browne's Imaginarie marketing site runs this pattern: "whenever a card is created or updated in Firestore, the card gets updated in Webflow and I don't have to think about it!" A Cloud Function listening to a Firestore collection creates or updates a CMS item whenever a document changes, and a Collection List renders it. The function needs a site token with the cms:write scope. The fieldData object must match the collection schema, with name and slug required.

To build the sync:

1. Install a current firebase-functions release and import the triggers from firebase-functions/v2/firestore.
2. Write the trigger functions:

const { onDocumentCreated, onDocumentUpdated } = require("firebase-functions/v2/firestore");

exports.syncToWebflow = onDocumentCreated("products/{productId}", async (event) => {
  const data = event.data.data();
  const productId = event.params.productId;
  // Call Webflow Data API v2 to create CMS item
});

exports.updateWebflow = onDocumentUpdated("products/{productId}", async (event) => {
  const before = event.data.before.data();
  const after = event.data.after.data();
  if (before.name === after.name) return null; // loop guard
});

3. Inside the create handler, call POST https://api.webflow.com/v2/collections/{collection_id}/items/live with Authorization: Bearer <token> and a body like { "fieldData": { "name": "My Product", "slug": "my-product" } }. That creates and publishes in one call; POST .../items stages the item instead, and POST .../items/publish publishes staged items later.
4. Inside the update handler, call PATCH https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}/live, or the bulk PATCH .../items/live for up to 100 items.
5. Deploy with the Firebase CLI and change a document to confirm the item appears.

Keep the loop guard; an onDocumentUpdated handler that writes back to the same document without a field-change check triggers itself indefinitely. Events arrive at least once, so handlers must be idempotent, and a write that changes nothing produces no update event. Keerthana Ravikumar's HealthierJC write-up puts the ceiling at 520 partners and thousands of events, where "API calls between Firebase and Webflow started to create performance bottlenecks", after which the team made Firestore its only store.

Route Webflow form submissions to Firestore with a webhook

Webflow's webhooks guide states that webhooks created through the dashboard "will not include the request headers needed to validate request signatures", so register this one through the API. A form_submission webhook posts every submission to a Cloud Function, which writes it to Firestore. You keep the native Webflow form and its submission table while the data lands in your own database. Delivery is a POST with Content-Type: application/json, and Webflow retries up to 3 more times at 10-minute intervals before deactivating a failing webhook.

To route submissions:

1. Deploy an HTTP function that accepts the payload:

const { onRequest } = require("firebase-functions/v2/https");
const { getFirestore } = require("firebase-admin/firestore");

exports.webflowFormHandler = onRequest({ cors: false }, async (req, res) => {
  // 1. Verify x-webflow-signature (HMAC-SHA256)
  // 2. Parse req.body (form_submission payload)
  // 3. Write to Firestore using payload.id as idempotency key
  await getFirestore().collection("submissions").doc(req.body.payload.id).set(req.body.payload);
  res.status(200).send("ok");
});

2. Register the webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks (scope sites:write) and this body:

{
  "triggerType": "form_submission",
  "url": "https://YOUR_CLOUD_FUNCTION_URL",
  "filter": { "name": "Contact Us" }
}

3. Verify each request: concatenate x-webflow-timestamp, ":", and JSON.stringify(request_body), compute an HMAC-SHA256 with the webhook's secret key, compare it to x-webflow-signature, and reject timestamps older than 300,000 ms.
4. Read the submitted fields from payload.data, store payload.id as the idempotency key, and return HTTP 200.

A site holds up to 75 webhooks per triggerType. If you would rather skip webhooks, point the form's custom action at the function URL in form settings, though a custom action cannot be combined with Webflow or email notification settings.

Verify Firebase Auth ID tokens in a Cloud Function

Hiding elements in the page does not enforce access on the server. When a signed-in visitor on a Webflow page requests private data, send the Firebase ID token to a Cloud Function and verify it with the Admin SDK. The client part lives in the same module script you added with Code Embed.

To protect an endpoint:

1. In page code, inside onAuthStateChanged, call const idToken = await getIdToken(user); and send it to your function in an Authorization: Bearer header with fetch().
2. In the function, set cors to your Webflow domain, for example onRequest({ cors: ["https://www.yourdomain.com"] }, ...), because onRequest has no CORS policy by default and cross-origin calls fail without it.
3. Verify the token with const decodedToken = await getAuth().verifyIdToken(idToken); from firebase-admin.
4. Read Firestore with the Admin SDK and return only the data that user may see.

For revocation checks, issue session cookies and call verifySessionCookie(cookie, true), with a maximum cookie life of 2 weeks. Callable functions (onCall) allow all origins by default and attach Firebase Auth tokens automatically, which removes steps 1 and 2 when you call them from the client SDK.

What you can build with the IDX with Firebase Studio Webflow integration

The pattern is always the same: Webflow renders the public surface, and Firebase holds the identity, the data, and the server-side code. These are builds teams have shipped on it.

• Gated client portals: Agencies use Webflow to build client portals where admins and customers see different dashboards. Stackgrid's portfolio entry for DocFlow, a cloud document management system, says it "used Firebase for user authentication" and deployed on Webflow hosting.
• Firestore-synced marketing content: Publish app data as SEO-indexed CMS pages. The Imaginarie marketing site and blog runs on Webflow, and a Cloud Function keeps its CMS cards in step with the app's Firestore backend.
• Lead intake with file uploads: A native Webflow form can post to a Cloud Function through a webhook, which writes the record to Firestore and stores any attached file in Cloud Storage under rules you control.
• Serverless Stripe checkout: Asad Ali's Webflow tutorial pairs Stripe Embedded Checkout with Firebase Functions as the backend. Stripe puts Checkout and Elements in the lightest PCI tier, SAQ A, because the card inputs sit in an iframe on Stripe's domain; only passing card data directly to the API drops you to SAQ D, which this pattern never does.

Choose the API integration path when the build needs custom publish timing or server-side access checks. For the gated-portal case, see how to build a client portal with role-based access.