PixelMakers
Home

>

Blog

How to authenticate users using Firebase in Webflow

Mihai Ungureanu

June 23, 2025

Subscribe to our newsletter

Subscribe to receive the latest blog posts to your inbox every week.

By subscribing you agree to with our Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Handling user authentication (login, signup, forgot password) is one common requirement for many websites. One way to achieve it is by using Firebase and we can do it in Webflow as well.

‍

Requirements

  • Webflow + account or website subscription (we need the code access feature);
  • Firebase (we can start with a free project).

‍

Firebase Configuration

1. Go to console.firebase.google.com and create a project

You can enable Google Analytics if it's needed for the project. In this case I've not enabled it.

‍

2. Enable Authentication

‍

3. Add Providers

If you are not seeing the save button, zoom out.

If you are enabling the Microsoft Provider, you can follow this official tutorial.

At the time of writing, these are the steps:

  • For Supported account types, select depending on the application. Multitenant means that any microsoft account can register or log in.
  • For redirect uri, copy the one from Firebase
  • Copy the Application ID to Firebase
  • Go to Certificates & Secrets
  • Please note that it has an expiration date, so you will need o change it at some point. You can select 12 months for the expiration

‍

4. Create a web project

Once created, copy the code and continue to console.

‍

Create JavaScript project

Open VS Code. Create a new folder and add 3 files:

  • index.html
  • app.js
  • firebase.js

‍

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WF Firebase</title>
  </head>
  <body></body>
</html>

‍

app.js

import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged,
  sendPasswordResetEmail,
} from "https://www.gstatic.com/firebasejs/10.12.4/firebase-auth.js";
import { app } from "./firebase.js";

window.Webflow ||= [];
window.Webflow.push(() => {
  signupForm();
  loginForm();
  forgotPassword();

  getSession();
  logout();
});

const loginForm = async () => {
  const loginFormEl = document.querySelector('[px-auth="login"]');

  if (!loginFormEl) return;

  const errorEl = loginFormEl.parentElement.querySelector(".w-form-fail");

  loginFormEl.addEventListener("submit", async (e) => {
    e.preventDefault();
    e.stopImmediatePropagation();

    const formData = new FormData(loginFormEl);

    const email = formData.get("Email");
    const password = formData.get("Password");

    const auth = getAuth(app);

    try {
      await signInWithEmailAndPassword(auth, email, password);

      window.location.href = "/account";
    } catch (error) {
      errorEl.textContent = error.message;
      errorEl.style.display = "block";
    }
  });
};

const signupForm = async () => {
  const signupFormEl = document.querySelector('[px-auth="sign-up"]');

  if (!signupFormEl) return;

  const errorEl = signupFormEl.parentElement.querySelector(".w-form-fail");

  signupFormEl.addEventListener("submit", async (e) => {
    e.preventDefault();
    e.stopImmediatePropagation();

    const formData = new FormData(signupFormEl);

    const email = formData.get("Email");
    const password = formData.get("Password");

    const auth = getAuth(app);

    try {
      await createUserWithEmailAndPassword(auth, email, password);
    } catch (error) {
      errorEl.textContent = error.message;
      errorEl.style.display = "block";
    }
  });
};

const getSession = async () => {
  const restrictedEl = document.querySelector('[px-auth="restricted"]');
  const navLogin = document.querySelector('[px-nav="login"]');
  const navLogout = document.querySelector('[px-nav="logout"]');
  const navDashboard = document.querySelector('[px-nav="dashboard"]');

  const auth = getAuth(app);

  onAuthStateChanged(auth, (user) => {
    if (!user) {
      if (navLogin) {
        navLogin.style.display = "block";
      }

      if (navDashboard) {
        navDashboard.style.display = "none";
      }

      if (navLogout) {
        navLogout.style.display = "none";
      }

      if (!!restrictedEl) {
        window.location.href = "/auth/login";
      }
    } else {
      if (navLogin) {
        navLogin.style.display = "none";
      }

      if (navLogout) {
        navLogout.style.display = "block";
      }

      if (navDashboard) {
        navDashboard.style.display = "block";
      }
    }
  });
};

const logout = async () => {
  const logout = document.querySelector('[px-nav="logout"]');

  if (!logout) return;

  logout.addEventListener("click", async () => {
    const auth = getAuth(app);
    await auth.signOut();
    window.location.href = "/";
  });
};

const forgotPassword = async () => {
  const forgotPasswordEl = document.querySelector(
    '[px-auth="forgot-password"]'
  );

  const errorEl = forgotPasswordEl.parentElement.querySelector(".w-form-fail");
  const doneEl = forgotPasswordEl.parentElement.querySelector(".w-form-done");

  if (!forgotPasswordEl) return;

  forgotPasswordEl.addEventListener("submit", async (e) => {
    e.preventDefault();
    e.stopImmediatePropagation();

    const formData = new FormData(forgotPasswordEl);

    const email = formData.get("Email");

    const auth = getAuth(app);

    try {
      await sendPasswordResetEmail(auth, email);

      doneEl.style.display = "block";
      forgotPasswordEl.style.display = "none";
    } catch (error) {
      errorEl.textContent = error.message;
      errorEl.style.display = "block";
    }
  });
};

‍

firebase.js

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.4/firebase-app.js";

// Add your firebaseConfig here
	
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

‍

Handling Signup / Register

The first step in the authentication process is to create the user in your Firebase database.

‍

Your business deserves a better website

Book a call

100+

Projects Done

4.9/5

Clutch score