Firebase Email Password Login

Email and password login is the most common way users access apps. Firebase handles the entire process — storing passwords securely, verifying credentials, and managing sessions — so you only write the interface code. This topic builds a complete login and registration flow step by step.

How Email Password Auth Works

The process works like a bank vault with a personal combination lock. Each user picks their own combination (password) when they open the account (register). The vault (Firebase) stores a scrambled version of the combination — never the actual numbers. When the user returns and enters their combination, the vault checks whether the scramble matches. If it does, the door opens.

Registration:
User enters email + password
      |
      v
Firebase hashes the password (scrambles it securely)
      |
      v
Stores email + hashed password (never the real password)
      |
      v
Returns User object with UID

Login:
User enters email + password
      |
      v
Firebase hashes the entered password
      |
      v
Compares with stored hash
      |
      v
Match? YES --> Return User object + ID Token
Match? NO  --> Return error

Enabling Email/Password in the Console

Before any code works, enable the provider. Open the Firebase Console and go to Authentication > Sign-in method. Click Email/Password. Toggle Enable on. Leave Email link (passwordless sign-in) off for now. Click Save.

Building a Registration Form

A registration form collects the user's email and password. Here is the HTML structure:

<h2>Create Account</h2>
<input id="reg-email" type="email" placeholder="Email" />
<input id="reg-password" type="password" placeholder="Password" />
<button id="register-btn">Register</button>
<p id="reg-message"></p>

Registration JavaScript

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase";

document.getElementById("register-btn").addEventListener("click", async () => {
  const email = document.getElementById("reg-email").value;
  const password = document.getElementById("reg-password").value;
  const message = document.getElementById("reg-message");

  try {
    const userCredential = await createUserWithEmailAndPassword(
      auth, email, password
    );
    message.textContent = "Account created! Welcome, " + userCredential.user.email;
  } catch (error) {
    message.textContent = getFriendlyError(error.code);
  }
});

function getFriendlyError(code) {
  switch (code) {
    case "auth/email-already-in-use":
      return "This email is already registered. Try logging in.";
    case "auth/weak-password":
      return "Password must be at least 6 characters.";
    case "auth/invalid-email":
      return "Please enter a valid email address.";
    default:
      return "Something went wrong. Please try again.";
  }
}

Building a Login Form

<h2>Log In</h2>
<input id="login-email" type="email" placeholder="Email" />
<input id="login-password" type="password" placeholder="Password" />
<button id="login-btn">Log In</button>
<p id="login-message"></p>

Login JavaScript

import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase";

document.getElementById("login-btn").addEventListener("click", async () => {
  const email = document.getElementById("login-email").value;
  const password = document.getElementById("login-password").value;
  const message = document.getElementById("login-message");

  try {
    const userCredential = await signInWithEmailAndPassword(
      auth, email, password
    );
    message.textContent = "Logged in as: " + userCredential.user.email;
  } catch (error) {
    message.textContent = getFriendlyError(error.code);
  }
});

Sending a Password Reset Email

Users forget passwords. Firebase sends a password reset email with one function call:

import { sendPasswordResetEmail } from "firebase/auth";
import { auth } from "./firebase";

async function resetPassword(email) {
  try {
    await sendPasswordResetEmail(auth, email);
    alert("Reset email sent! Check your inbox.");
  } catch (error) {
    if (error.code === "auth/user-not-found") {
      alert("No account found with this email.");
    } else {
      alert("Error: " + error.message);
    }
  }
}

Firebase sends an email from your project's default domain. The email contains a link that lets the user set a new password. You can customize the email template in the console under Authentication > Templates.

Email Verification

Anyone can type any email address during registration. Firebase lets you verify that users actually own their email addresses by sending a confirmation link:

import { sendEmailVerification } from "firebase/auth";
import { auth } from "./firebase";

async function verifyEmail() {
  const user = auth.currentUser;
  if (user) {
    await sendEmailVerification(user);
    alert("Verification email sent!");
  }
}

After sending, check whether the user verified their email using user.emailVerified. Reload the user object first to get the latest status:

await user.reload();
if (user.emailVerified) {
  console.log("Email is verified.");
} else {
  console.log("Email not verified yet.");
}

Updating Email and Password

Logged-in users can change their email or password:

import { updateEmail, updatePassword } from "firebase/auth";
import { auth } from "./firebase";

// Change email
async function changeEmail(newEmail) {
  await updateEmail(auth.currentUser, newEmail);
  console.log("Email updated.");
}

// Change password
async function changePassword(newPassword) {
  await updatePassword(auth.currentUser, newPassword);
  console.log("Password updated.");
}

For security-sensitive operations like changing email or password, Firebase sometimes requires the user to have signed in recently. If the session is too old, Firebase throws auth/requires-recent-login. Handle this by asking the user to log in again before proceeding.

Deleting a User Account

import { deleteUser } from "firebase/auth";
import { auth } from "./firebase";

async function removeAccount() {
  await deleteUser(auth.currentUser);
  console.log("Account deleted.");
}

Deleting an account removes only the authentication record. Any data the user created in Firestore or files in Storage remain. Write cleanup logic — using a Cloud Function or a Firestore trigger — to remove that data when an account is deleted.

Key Takeaway

Email and password authentication in Firebase requires enabling the provider in the console and using four main functions: createUserWithEmailAndPassword for registration, signInWithEmailAndPassword for login, sendPasswordResetEmail for password recovery, and sendEmailVerification to confirm email ownership. Always map Firebase error codes to friendly messages, and plan for data cleanup when users delete their accounts.