Firebase Auth Email and Password — Building Authentication with Email Credentials

In this tutorial, you will learn about Firebase Auth Email and Password. We cover key concepts, practical examples, and best practices to help you master this topic.

Firebase Authentication with email and password provides built-in user management including signup, login, email verification, password reset, and account management with secure credential storage.

What You'll Learn

• Implementing email/password signup and login
• Email verification and password reset flows
• Managing user sessions and account security

Why It Matters

Email authentication is the most common authentication method. Firebase handles the security complexity so you focus on the user experience. DodaTech's user portal uses Firebase email authentication with custom claims for role management.

flowchart TD
    A["User Signup"] --> B["Firebase creates account"]
    B --> C["Send verification email"]
    C --> D["User verifies email"]
    D --> E["User can access app"]
    A --> F["User login"]
    F --> G["Firebase validates credentials"]
    G --> H["Return ID token"]
    H --> I["User session established"]

Code Examples

// Sign up with email and password
import { createUserWithEmailAndPassword, sendEmailVerification } from 'firebase/auth';
import { auth } from './firebase';

async function signUp(email, password) {
  try {
    const userCredential = await createUserWithEmailAndPassword(
      auth, email, password
    );

    // Send verification email
    await sendEmailVerification(userCredential.user);
    console.log('Verification email sent');

    return userCredential.user;
  } catch (error) {
    switch (error.code) {
      case 'auth/email-already-in-use':
        throw new Error('Email already registered');
      case 'auth/weak-password':
        throw new Error('Password must be at least 6 characters');
      case 'auth/invalid-email':
        throw new Error('Invalid email format');
      default:
        throw new Error('Signup failed');
    }
  }
}

// Login and session management
import {
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  sendPasswordResetEmail
} from 'firebase/auth';

// Login
async function login(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(
      auth, email, password
    );

    if (!userCredential.user.emailVerified) {
      throw new Error('Please verify your email before logging in');
    }

    return userCredential.user;
  } catch (error) {
    switch (error.code) {
      case 'auth/user-not-found':
      case 'auth/wrong-password':
        throw new Error('Invalid email or password');
      case 'auth/too-many-requests':
        throw new Error('Too many attempts. Try again later');
      default:
        throw new Error('Login failed');
    }
  }
}

// Password reset
async function resetPassword(email) {
  await sendPasswordResetEmail(auth, email);
}

// Listen to auth state
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log('User logged in:', user.uid);
  } else {
    console.log('User logged out');
  }
});

// Logout
async function logout() {
  await signOut(auth);
}

# Firebase Admin SDK: Manage users
import firebase_admin
from firebase_admin import auth

# Create user
user = auth.create_user(
    email='alice@example.com',
    password='securePassword123',
    email_verified=False,
    disabled=False
)
print(f'Created user: {user.uid}')

# Find user by email
user = auth.get_user_by_email('alice@example.com')

# Update user
auth.update_user(
    user.uid,
    email_verified=True,
    disabled=False
)

# Delete user
auth.delete_user(user.uid)

# List users
page = auth.list_users()
for user in page.iterate_all():
    print(user.email)

# Test authentication with Firebase Emulator
firebase emulators:start

# Use the emulator for local auth testing
# Auth emulator runs on localhost:9099

Common Mistakes

1. Not Implementing Email Verification

Without verification, anyone can sign up with fake emails. Always verify.

2. Storing Passwords Locally

Never store user passwords in your application. Firebase handles secure storage.

3. Ignoring Auth State Changes

Listen to onAuthStateChanged for session management instead of storing tokens locally.

4. Not Handling Account Enumeration

Return generic error messages to prevent email enumeration attacks.

5. Forgetting to Configure Authorized Domains

Firebase blocks sign-in from unauthorized domains. Add all domains in the console.

Practice Questions

1. How do you create a new user with email and password?
2. What method sends a password reset email?
3. How do you listen to authentication state changes?
4. Why should you verify email addresses?
5. How do you sign out a user?

Answers:

1. createUserWithEmailAndPassword(auth, email, password).
2. sendPasswordResetEmail(auth, email).
3. onAuthStateChanged(auth, callback).
4. To confirm the user owns the email address and prevent fake accounts.
5. signOut(auth).

Challenge: Build a complete authentication system with signup, email verification, login, password reset, and session management. Include error handling for all auth errors and a dashboard that only shows when authenticated.

FAQ

Mini Project

Build a user management dashboard with Firebase Authentication. Implement email/password signup, email verification, password reset, user profile management, and admin user listing with the Admin SDK. Include email templates for verification and password reset.

What's Next

Explore OAuth providers for social login with Google, Facebook, and GitHub, then learn about custom claims for role-based authorization.