Firebase Authentication

Topics Covered

Firebase Authentication Overview

• Firebase Auth provides user authentication without building a custom backend
• Supports multiple sign-in providers: Google, email/password, GitHub, Facebook, etc.
• User authentication is separate from user data storage — use Realtime Database for user profiles
• Email Enum Protection (since Sept 2023) — security feature that prevents revealing whether an email is registered

FirebaseUI

• FirebaseUI is a library that provides pre-built sign-in forms and UI components
• Use StyledFirebaseAuth component from react-firebaseui
• React 19 compatibility issue — use the instructor's fork: npm install https://github.com/joelwross/firebaseui-web-react
• Configure sign-in options, flow type, credentialHelper, and callbacks

import { getAuth, GoogleAuthProvider, EmailAuthProvider } from 'firebase/auth';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

const firebaseUIConfig = {
    signInOptions: [
        GoogleAuthProvider.PROVIDER_ID,
        { provider: EmailAuthProvider.PROVIDER_ID, requireDisplayName: true }
    ],
    signInFlow: 'popup',
    credentialHelper: 'none',
    callbacks: {
        signInSuccessWithAuthResult: () => false
    }
};

// Render the sign-in UI
<StyledFirebaseAuth uiConfig={firebaseUIConfig} firebaseAuth={getAuth()} />

Managing Auth State

• onAuthStateChanged() listens for login/logout events
• Callback receives a Firebase User object (or null if signed out)
• User object includes: uid, displayName, email, photoURL
• Use inside useEffect with a cleanup function to unregister the listener

import { getAuth, onAuthStateChanged } from 'firebase/auth';

useEffect(() => {
    const auth = getAuth();
    const unregister = onAuthStateChanged(auth, (firebaseUser) => {
        if (firebaseUser) {
            // user is signed in
            console.log(firebaseUser.uid);
            console.log(firebaseUser.displayName);
        } else {
            // user is signed out
        }
    });

    return () => unregister(); // cleanup on unmount
}, []);

Signing Out

• Call signOut(auth) to log the user out
• Returns a Promise — use .catch() for error handling
• The onAuthStateChanged listener will fire with null when the user signs out
• Firebase persists auth state even after browser closure

import { getAuth, signOut } from 'firebase/auth';

const auth = getAuth();
signOut(auth)
    .catch(err => console.log(err));

Security Rules with Auth

• Use auth !== null in rules to require authentication for read/write
• Use auth.uid to restrict access to the user's own data
• Rules cascade downward — a parent rule applies to all children

{
    "rules": {
        "users": {
            "$uid": {
                ".read": "auth !== null && auth.uid === $uid",
                ".write": "auth !== null && auth.uid === $uid"
            }
        },
        "public": {
            ".read": true,
            ".write": "auth !== null"
        }
    }
}

Firebase Storage

• Firebase Storage is used for storing large files like images, videos, and documents
• Get a storage reference with storageRef(storage, "path/to/file")
• Upload files with uploadBytes(), then get the URL with getDownloadURL()
• Both operations are asynchronous — use async/await

import { getStorage, ref as storageRef, uploadBytes, getDownloadURL } from 'firebase/storage';

const storage = getStorage();
const fileRef = storageRef(storage, "images/profile.png");

async function uploadFile(file) {
    await uploadBytes(fileRef, file);
    const url = await getDownloadURL(fileRef);
    // save url to Realtime Database
}

Storing Additional User Data

• Firebase Auth only stores minimal info (display name, photo URL, email)
• Store extra user data in Realtime Database keyed by uid

// Database structure for extra user data
{
    "userData": {
        "userId1": { "pronouns": "they/them", "bio": "Hello!" },
        "userId2": { "pronouns": "he/him", "bio": "World!" }
    }
}

// Access with:
const userRef = ref(db, "userData/" + currentUser.uid);

File Input Handling

• Use an <input type="file"> element to let users select files
• Access the selected file through event.target.files[0]

const handleChange = (event) => {
    if (event.target.files.length > 0) {
        const chosenFile = event.target.files[0];
        // upload chosenFile to Firebase Storage
    }
};