Firebase Authentication

Webflow sites ship as static HTML served from a CDN. There is no built-in way to authenticate users, gate pages behind a login, or store session data. Webflow stopped allowing new sites to enable User Accounts on January 31, 2025, and permanently removed the feature on January 29, 2026, so the platform now has no first-party authentication system at all.

Firebase Authentication fills that gap by providing backend auth services, pre-built UI components, and support for email/password, phone, and social login providers like Google, Facebook, and GitHub. Connecting Firebase Authentication with Webflow gives any Webflow site a full user identity layer without standing up a custom backend server.

This integration is most relevant for solo founders building SaaS MVPs on Webflow, agencies delivering client portals, course creators gating lesson content, and developers who need social login or role-based access on a Webflow frontend. Teams already using other Firebase services like Firestore or Cloud Functions benefit from a shared identity system across their stack.

How to integrate Firebase Authentication with Webflow

What is Firebase Authentication? Firebase Authentication is a Google-backed identity service that handles user sign-up, sign-in, and session management across web and mobile platforms. It supports email/password, phone number, and federated providers including Google, Apple, Facebook, GitHub, and X using OAuth 2.0 and OpenID Connect standards. An optional Identity Platform upgrade adds SAML, generic OIDC, multi-factor authentication, and blocking functions.

‍

Teams pair Firebase Authentication with Webflow when they need user accounts on a site that has no server-side execution layer. The combination works well for login-gated content, personalized dashboards, and multi-provider social login — all running on Webflow's static hosting infrastructure. For native Webflow custom-code setups without a build step, Firebase is typically loaded via CDN script tags, and FirebaseUI specifically requires the compat (namespaced) API.

The Firebase Authentication-Webflow integration supports 3 approaches:

• Third-party tools like Vault Vision and Wized connect Webflow to Firebase Authentication without writing JavaScript.
• Firebase SDK embeds via custom code let you add auth forms, social login buttons, and session handling directly in Webflow pages.
• The Webflow Data API and Firebase Admin SDK give you full control over user-to-CMS sync, token verification, and role-based content delivery, but require server-side development.

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

Use third-party tools that connect Webflow to Firebase Authentication

If writing JavaScript is not an option, two Webflow-compatible tools provide visual interfaces for connecting Firebase Authentication to a Webflow site. These are not Firebase products — they are third-party tools that connect Webflow to Firebase Authentication. Vault Vision is identified on Webflow's own integrations directory as the primary no-code path for Firebase Authentication. Wized is a visual middleware app that connects Webflow elements to Firebase Authentication and Firestore through a configuration dashboard.

Set up Vault Vision

Vault Vision provides drag-and-drop auth components — login buttons, signup forms, and user profile widgets. That support OAuth 2.0 and OpenID Connect. It is listed in the Webflow App Marketplace and does not require custom JavaScript. A Firebase project with enabled sign-in providers is still required before setup.

To install Vault Vision:

1. Open your Webflow project and go to the Apps panel.
2. Search for and install Vault Vision from the Webflow App Marketplace.
3. Follow the Vault Vision setup wizard to connect your Firebase project using your API credentials.
4. Drag Vault Vision auth buttons and user profile widgets onto your Webflow pages.
5. Customize the component appearance to match your site design.

Vault Vision includes pre-built login, signup, and profile components along with CMS-filtered lists based on auth status. It also supports Stripe integration for payment-gated memberships.

The trade-off is a third-party dependency for both cost and support. Vault Vision is not a Firebase integration — it is a separate third-party authentication tool that uses Firebase infrastructure but is a distinct product in its own right.

Set up Wized

Wized takes a different approach. Instead of pre-built UI components, it provides a visual interface for connecting Webflow elements to Firebase Authentication and Firestore without coding. All configuration happens in the Wized dashboard after adding a single script to Webflow's custom code section.

To install Wized:

1. Go to Site Settings > Custom Code and paste the Wized script tag in the head code field.
2. Open the Wized dashboard and configure your Firebase project credentials.
3. Map Webflow form elements and buttons to Firebase Auth operations using Wized's visual interface.

This gives you a visual setup path for Firebase Authentication without wiring the auth flows manually in JavaScript.

Wized stores Firebase tokens in cookies for session persistence and works with multiple backends — Firebase, Supabase, and Memberstack. Per the Wized changelog, the app upgraded its Firebase SDK to v11 in April 2025. That upgrade was a breaking change for projects accessing Firebase directly via Wized.requests.getClient(), so audit your implementation after any Wized update.

Embed Firebase Authentication with custom code

For full control over the auth UI and behavior, add the Firebase JavaScript SDK directly to your Webflow site using custom code fields and Code Embed elements. Custom code requires a paid Webflow site plan (not available on the free Starter plan).

The compat (namespaced) API loaded via CDN is the simplest path for native no-build setups. The Firebase documentation confirms that FirebaseUI is not compatible with the modular API — the compat packages are required.

Two sub-methods cover different levels of UI control.

Use FirebaseUI for a drop-in login widget

FirebaseUI is an open-source component that handles the full sign-in flow — email/password, phone, and social providers — with built-in account recovery and account linking. A complete auth system can be implemented in under 10 lines of code.

To set up FirebaseUI on a Webflow site:

1. Create a Firebase project at console.firebase.google.com. Click Add app, select the web platform icon, register the app, and copy the firebaseConfig object. Then go to Authentication > Settings, enable your sign-in providers, and add both your yoursite.webflow.io and production domain to the Authorized Domains list.
2. Open your Webflow site and go to Site Settings > Custom Code. Paste the following in the Head Code field:

<!-- Firebase App (compat) — required first -->
<script src="https://www.gstatic.com/firebasejs/12.12.0/firebase-app-compat.js"></script>
<!-- Firebase Authentication (compat) -->
<script src="https://www.gstatic.com/firebasejs/12.12.0/firebase-auth-compat.js"></script>

<script>
 var firebaseConfig = {
   apiKey: 'YOUR_API_KEY',
   authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
   databaseURL: 'YOUR_DATABASE_URL',
   projectId: 'YOUR_PROJECT_ID',
   storageBucket: 'YOUR_PROJECT_ID.firebasestorage.app',
   messagingSenderId: 'YOUR_SENDER_ID'
 };
 firebase.initializeApp(firebaseConfig);
</script>

<!-- FirebaseUI -->
<script src="https://www.gstatic.com/firebasejs/ui/{FIREBASEUI_VERSION}/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet"
 href="https://www.gstatic.com/firebasejs/ui/{FIREBASEUI_VERSION}/firebase-ui-auth.css" />

<script>
 var ui = new firebaseui.auth.AuthUI(firebase.auth());
</script>



3. On your login page in Webflow, add a Code Embed element (Add Panel > Embeds > Code Embed) and paste:

<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>



4. In Site Settings > Custom Code > Footer Code, start the sign-in flow:

ui.start('#firebaseui-auth-container', {
 signInOptions: [
   firebase.auth.EmailAuthProvider.PROVIDER_ID,
   firebase.auth.GoogleAuthProvider.PROVIDER_ID
 ],
 signInSuccessUrl: '/dashboard'
});



5. Publish the site. JavaScript does not run in the Webflow canvas — you must publish to test auth behavior.

Check the FirebaseUI version on GitHub and the official FirebaseUI documentation before deploying, as the CDN URL version may change.

Build custom auth forms with the Firebase SDK

For full design control, skip FirebaseUI and wire Webflow form elements directly to Firebase SDK methods. This approach lets you style every input, button, and error message in Webflow while handling auth logic in JavaScript.

To set up custom auth forms:

1. Add the Firebase SDK scripts and initialization code to the Head Code field (same as step 2 above, but without the FirebaseUI scripts).
2. Build your signup and login forms in Webflow. Give each form and input a unique ID in the Element Settings panel. Note that Webflow auto-prefixes form IDs with wf-form- — a form named "signup-form" becomes #wf-form-signup-form in the DOM. This mismatch is one of the most common failure points.
3. In Footer Code, attach event listeners to your forms and call Firebase Auth methods:

// Sign up
document.getElementById('wf-form-signup-form').addEventListener('submit', function(e) {
 e.preventDefault();
 var email = document.getElementById('signup-email').value;
 var password = document.getElementById('signup-password').value;

 firebase.auth().createUserWithEmailAndPassword(email, password)
   .then(function(userCredential) {
     window.location.href = '/dashboard';
   })
   .catch(function(error) {
     document.getElementById('error-message').textContent = error.message;
   });
});

// Sign in
document.getElementById('wf-form-login-form').addEventListener('submit', function(e) {
 e.preventDefault();
 var email = document.getElementById('login-email').value;
 var password = document.getElementById('login-password').value;

 firebase.auth().signInWithEmailAndPassword(email, password)
   .then(function(userCredential) {
     window.location.href = '/dashboard';
   })
   .catch(function(error) {
     document.getElementById('error-message').textContent = error.message;
   });
});



4. Add auth state checking to every protected page. Place this in Footer Code so it runs site-wide:

firebase.auth().onAuthStateChanged(function(user) {
 if (user) {
   // User is signed in — show protected content
   document.getElementById('protected-content').style.display = 'block';
 } else {
   // User is signed out — redirect to login
   if (window.location.pathname !== '/login') {
     window.location.href = '/login';
   }
 }
});



Because Webflow sites are multi-page (not single-page apps), the Firebase SDK re-initializes on every page load. The onAuthStateChanged listener fires null during initialization before the session stored in localStorage resolves. An initial null does not mean the user is logged out — redirecting immediately causes redirect loops. Wait for the listener to resolve before making routing decisions.

For social login providers, signInWithPopup is often simpler than signInWithRedirect on multi-page Webflow sites. The redirect method triggers a full-page reload, and if getRedirectResult() is not called on the return page, the auth result is silently lost. Call signInWithPopup only inside click event handlers — browsers block popups not triggered by direct user input.

Build with the Webflow and Firebase Authentication APIs

For production systems that need server-verified auth, user profile sync to Webflow CMS, or role-based content delivery, combine the Firebase Admin SDK with the Webflow Data API through a server-side layer. This approach requires a backend environment like Firebase Cloud Functions, Netlify Functions, or Cloudflare Workers.

The relevant APIs are:

• The Firebase Authentication REST API handles client-side sign-up, sign-in, and token exchange
• The Firebase Admin SDK handles server-side token verification, user management, and custom claims
• Webflow's Data API v2 handles CMS collection and item operations
• Webflow webhooks trigger real-time events between systems

The Webflow Data API cannot be called from browser JavaScript — a Webflow staff moderator confirmed that doing so exposes the private API token in page source. All Webflow API calls must pass through a server-side function.

Sync new users to Webflow CMS

When a user registers through Firebase Authentication, a Cloud Function can automatically create a corresponding CMS item in a Webflow "User Profiles" collection. This lets you display user data on Webflow pages using Collection Lists.

To implement user sync:

1. Create a "User Profiles" collection in Webflow CMS with fields for Firebase UID (PlainText), Email (PlainText), Display Name (PlainText), and Photo URL (PlainText).
2. Deploy a Firebase Cloud Function that triggers on functions.auth.user().onCreate():

const functions = require('firebase-functions');
const fetch = require('node-fetch');

const WEBFLOW_TOKEN = process.env.WEBFLOW_API_TOKEN;
const COLLECTION_ID = process.env.WEBFLOW_COLLECTION_ID;

exports.syncUserToWebflow = functions.auth.user().onCreate(async (user) => {
 const { uid, email, displayName, photoURL, phoneNumber, emailVerified } = user;

const response = await fetch(
   `https://api.webflow.com/v2/collections/${COLLECTION_ID}/items`,
   {
     method: 'POST',
     headers: {
       'Authorization': `Bearer ${WEBFLOW_TOKEN}`,
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
       isArchived: false,
       isDraft: false,
       fieldData: {
         name: displayName || email,
         slug: uid,
         'user-email': email,
         'photo-url': photoURL,
         'phone-number': phoneNumber,
         'email-verified': emailVerified,
         'firebase-uid': uid,
       },
     }),
   }
 );
 return response.json();
});



3. Store the mapping between the Firebase UID and the returned Webflow item ID in Firestore for future updates via PATCH.

Note that onCreate fires when an email/password account is created, when a user first signs in via a federated provider, when the Admin SDK creates an account, or on the first anonymous auth session. It does not fire for custom token sign-ins.

Verify tokens and serve gated content

For content that must be verified server-side before delivery, the pattern sends a Firebase ID token from the Webflow frontend to a serverless function that validates it before returning CMS data.

To implement token verification:

1. On the Webflow page, retrieve the ID token after authentication:

firebase.auth().currentUser.getIdToken(true)
 .then(function(idToken) {
   fetch('https://your-function-url.com/api/gated-content', {
     headers: { 'Authorization': 'Bearer ' + idToken }
   })
   .then(response => response.json())
   .then(data => {
     // Render gated content on the page
   });
 });



2. In your serverless function, verify the token and fetch CMS content:

const admin = require('firebase-admin');
admin.initializeApp();

exports.gatedContent = async (req, res) => {
 const idToken = req.headers.authorization.split('Bearer ')[1];
 const decodedToken = await admin.auth().verifyIdToken(idToken);
 const { uid, membershipTier, accessLevel } = decodedToken;

 // Fetch CMS content based on user's tier
 const response = await fetch(
   `https://api.webflow.com/v2/collections/${COLLECTION_ID}/items/${ITEM_ID}`,
   { headers: { 'Authorization': `Bearer ${WEBFLOW_TOKEN}` } }
 );
 const content = await response.json();
 res.json(content);
};



3. Set membership tiers using Custom Claims via the Admin SDK:

await admin.auth().setCustomUserClaims(uid, {
 membershipTier: 'premium',
 accessLevel: 2
});



This pattern keeps token verification and Webflow API access in a trusted server-side environment.

Custom Claims can only be set from a trusted server environment — the Admin SDK requires a service account key that must never appear in client-side code. Claims are readable on the client by decoding the ID token, making them useful for conditional UI rendering on Webflow pages.

Keep in mind that CMS plan sites support 2,000 CMS items and Business plan sites support up to 20,000. Factor these limits into your user profile sync architecture.

What can you build with the Firebase Authentication Webflow integration?

Integrating Firebase Authentication with Webflow lets you add a full user identity layer to any Webflow site without managing your own auth infrastructure.

• Gated content and membership sites: Build a blog or resource library where visitors sign up with email or Google, then access premium articles stored in Webflow CMS collections. Use Firebase Custom Claims to separate free-tier readers from paid subscribers, with Stripe handling payments through Vault Vision or a Cloud Function.
• Client portals with per-user data: Create a dashboard page in Webflow where each logged-in client sees only their project files and status updates. Firebase Auth identifies the user, a serverless function verifies their token, and Firestore returns client-specific data to the Webflow frontend.
• Online course platforms with progress tracking: Design course pages in Webflow with module navigation and lesson content. Firebase Auth handles student login, Firestore stores completion state per user, and onAuthStateChanged controls which modules are visible based on enrollment tier and progress.
• SaaS landing pages with authenticated app sections: Use Webflow for the marketing site and public pages, then gate the dashboard or account area behind Firebase Auth. The same Firebase project that handles your web app's identity system works on your Webflow site — no separate auth system needed.

If you need more control over user-to-CMS sync or server-verified content delivery, the API integration path covers those cases with full flexibility.