Add Firebase Google sign-in to a Webflow site

What you need before you start

• A plan that allows custom code. Webflow's help center lists custom code for Core, Growth, Agency or Freelancer Workspaces, or a site with an active Site plan.
• A Firebase project with a web app registered, so you have its config object.
• Testing on the published site. Webflow says custom scripts "will only appear on the published site"; they don't run in the Designer. Publish to your staging subdomain (yoursite.webflow.io) to test.

Why Google sign-in fails on Webflow sites

• The host isn't authorized. Firebase rejects OAuth from domains missing from Authorized domains with auth/unauthorized-domain. A Webflow site usually has two or three hosts: yoursite.webflow.io, example.com and www.example.com.
• The script never ran. You tested in the Designer, the script was pasted into a page you didn't publish, or it was cut off by Webflow's character limit (20,000 characters each for site-wide Head and Footer code; 10,000 for each page-level field).
• Classic script, module syntax. import statements only work inside <script type="module">.
• Variables you can't reach. Module code is scoped to the module, so a second embed can't see auth unless you attach it to window.

Step 1: Configure Firebase

1. Firebase console > Security > Authentication (older guides: Build > Authentication; the Firebase docs use Security as of Oct 2026) > Sign-in method > enable Google > Save.
2. Settings tab > Authorized domains > Add domain for each host: yoursite.webflow.io, example.com, www.example.com. If you later rename the staging subdomain under Site settings > Publishing > Staging, add the new name.

More on the list itself: Firebase authorized domains.

Step 2: Add the elements in the Designer

Add three elements and set each one's ID in the element settings panel:

• a button or link block with ID google-signin
• a button or link block with ID google-signout
• a text element with ID user-name

Step 3: Paste the custom code

Open Site settings > Custom code and paste this into Footer code (before </body>), or into one page's Page settings > Custom code > Before tag if only that page needs sign-in. Then publish.

<script type="module">
  // Firebase JS SDK from Google's CDN; version shown in Firebase's docs as of Oct 2026.
  import { initializeApp } from 'https://www.gstatic.com/firebasejs/13.1.0/firebase-app.js';
  import {
    getAuth, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged,
  } from 'https://www.gstatic.com/firebasejs/13.1.0/firebase-auth.js';

  const app = initializeApp({
    apiKey: 'YOUR_API_KEY',
    authDomain: 'YOUR-PROJECT.firebaseapp.com',
    projectId: 'YOUR-PROJECT',
    appId: 'YOUR_APP_ID',
  });
  const auth = getAuth(app);
  window.firebaseAuth = auth; // optional: lets other embeds use it

  const signInEl = document.getElementById('google-signin');
  const signOutEl = document.getElementById('google-signout');
  const nameEl = document.getElementById('user-name');

  signInEl?.addEventListener('click', async (event) => {
    event.preventDefault(); // stop a link-style button from navigating
    try {
      await signInWithPopup(auth, new GoogleAuthProvider());
    } catch (error) {
      console.error(error.code, error.message); // e.g. auth/unauthorized-domain
    }
  });

  signOutEl?.addEventListener('click', (event) => {
    event.preventDefault();
    signOut(auth);
  });

  onAuthStateChanged(auth, (user) => {
    if (signInEl) signInEl.style.display = user ? 'none' : '';
    if (signOutEl) signOutEl.style.display = user ? '' : 'none';
    if (nameEl) nameEl.textContent = user ? (user.displayName || user.email) : '';
  });
</script>

Notes:

• Module scripts are deferred automatically, so the elements exist by the time the code runs.
• Firebase's web config is not a secret; Firebase says API keys for Firebase services are OK in code. Restrict the key in Google Cloud.
• Hiding elements is only cosmetic. Anyone who loads the page receives its full HTML, so keep private data in Firebase (or another backend) behind Security Rules, not in the page.
• Firebase recommends npm for most apps and offers the CDN as an alternative; bump the version in both URLs together when you update.

Step 4: Know the authDomain limit on Webflow

With authDomain: 'YOUR-PROJECT.firebaseapp.com', popup sign-in works on every authorized host, but Google's account chooser names YOUR-PROJECT.firebaseapp.com (why Google shows that name). Firebase also says signInWithRedirect() on apps not served from firebaseapp.com needs extra setup for Chrome M115+, Firefox 109+ and Safari 16.1+, so stay with the popup (popup or redirect?).

Showing your own domain requires https://www.example.com/__/auth/* to be forwarded transparently to https://YOUR-PROJECT.firebaseapp.com/__/auth/*; Firebase says a 302 redirect does not work. Webflow hosting has no setting for that. Its help center instead documents reverse proxies in front of Webflow (Cloudflare Orange-to-Orange, NGINX, AWS CloudFront), says Webflow "does not configure or support third-party proxies," and says not to reverse proxy *.webflow.io staging subdomains.

If you go that way with Cloudflare (as of Oct 2026):

1. Your Webflow site must be on Webflow's Cloudflare-based hosting (sites created after April 21, 2025 already are) to use O2O. Add the domain to Cloudflare and create a proxied CNAME to cdn.webflow.com, then connect and publish the domain in Webflow. O2O works on any Cloudflare zone plan, including Free. Turning on the proxy without O2O can cause a 525 error.
2. Add a Cloudflare Worker on the route www.example.com/__/auth/* that forwards to Firebase:

js export default { async fetch(request) { const url = new URL(request.url); url.hostname = 'YOUR-PROJECT.firebaseapp.com'; return fetch(new Request(url, request)); }, };

Firebase's docs say the forward must handle GET and POST and be transparent (no 302 redirect). Test this on a preview deployment before relying on it.

3. In Google Cloud's Clients page (console.cloud.google.com/auth/clients), add https://www.example.com/__/auth/handler to the Web client's Authorized redirect URIs.
4. Make authDomain depend on the host, because webflow.io must keep the default:

js authDomain: location.hostname === 'www.example.com' ? 'www.example.com' : 'YOUR-PROJECT.firebaseapp.com',

The full Worker walkthrough is at continue to firebaseapp.com: Cloudflare Workers.

How to confirm it worked

1. Publish, open yoursite.webflow.io, open DevTools > Console, click your sign-in button. A Google popup should appear and close after you pick an account, the sign-out button should show, and user-name should fill in. No auth/... error should appear in the console.
2. Reload: the signed-in state should come back without clicking again.
3. Repeat on example.com and www.example.com.
4. If you added the Worker, https://www.example.com/__/auth/handler should return a Firebase page instead of a Webflow 404, and the Google screen should name your domain.

Related problems

• The button opens nothing or you see auth/popup-blocked: auth/popup-blocked