Firebase Series: Auth, Firestore, Storage & Hosting — Complete Guide

Firebase Series: Auth, Firestore, Storage, Hosting — Complete Guide

• What is Firebase?
• Firebase Authentication — Email, Google Sign-In
• Cloud Firestore — Real-time NoSQL Database
• Firebase Storage — File Uploads and Downloads
• Firebase Hosting — Deploy Your Web App
• How these four work together
• FAQs

---

Firebase Series: Auth, Firestore, Storage, and Hosting — Complete Guide

Introduction

Firebase is Google's backend-as-a-service platform that lets developers build and scale apps without managing servers. Instead of setting up your own backend, writing authentication logic from scratch, or configuring a database server — Firebase handles all of that for you.

In this guide we cover the four most important Firebase services in depth: Authentication, Cloud Firestore, Storage, and Hosting. By the end, you'll understand what each one does, how to set it up, and how they all work together to power a full-stack app.

---

🔐 Firebase Authentication

Firebase Authentication handles user sign-in so you don't have to build it yourself. It supports email/password login, Google, GitHub, Facebook, phone number OTP, and anonymous sign-in — all with just a few lines of code.

Setting Up Firebase Auth

First, install the Firebase SDK in your project:

npm install firebase

Then initialize Firebase in your app. Create a file called firebase.js:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

You can find these config values in your Firebase Console under Project Settings → Your Apps.

Email and Password Sign-Up

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

const signUp = async (email, password) => {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log("User created:", userCredential.user);
  } catch (error) {
    console.error("Error:", error.message);
  }
};

Email and Password Sign-In

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

const signIn = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("Signed in:", userCredential.user);
  } catch (error) {
    console.error("Error:", error.message);
  }
};

Google Sign-In

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "./firebase";

const provider = new GoogleAuthProvider();

const signInWithGoogle = async () => {
  try {
    const result = await signInWithPopup(auth, provider);
    console.log("Google user:", result.user);
  } catch (error) {
    console.error("Error:", error.message);
  }
};

Listening to Auth State

Use onAuthStateChanged to track whether a user is logged in or out across your app:

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

onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("Logged in as:", user.email);
  } else {
    console.log("No user logged in");
  }
});

Sign Out

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

const logout = async () => {
  await signOut(auth);
  console.log("User signed out");
};

Enable Auth providers in your Firebase Console under Authentication → Sign-in method before using them in code.

---

🗄️ Cloud Firestore

Cloud Firestore is Firebase's NoSQL document database. Data is stored as collections of documents — similar to JSON objects. It supports real-time listeners, offline support, and scales automatically.

Setting Up Firestore

Add Firestore to your firebase.js file:

import { getFirestore } from "firebase/firestore";

export const db = getFirestore(app);

Adding a Document

import { collection, addDoc } from "firebase/firestore";
import { db } from "./firebase";

const addUser = async () => {
  try {
    const docRef = await addDoc(collection(db, "users"), {
      name: "Deekshith",
      email: "deekshith@example.com",
      createdAt: new Date()
    });
    console.log("Document written with ID:", docRef.id);
  } catch (error) {
    console.error("Error adding document:", error);
  }
};

Reading Documents

Fetch all documents from a collection:

import { collection, getDocs } from "firebase/firestore";
import { db } from "./firebase";

const getUsers = async () => {
  const querySnapshot = await getDocs(collection(db, "users"));
  querySnapshot.forEach((doc) => {
    console.log(doc.id, "=>", doc.data());
  });
};

Real-Time Listener

Listen for changes in real time — updates reflect instantly without refreshing:

import { collection, onSnapshot } from "firebase/firestore";
import { db } from "./firebase";

const unsubscribe = onSnapshot(collection(db, "users"), (snapshot) => {
  snapshot.forEach((doc) => {
    console.log(doc.data());
  });
});

// Call unsubscribe() to stop listening when component unmounts

Updating a Document

import { doc, updateDoc } from "firebase/firestore";
import { db } from "./firebase";

const updateUser = async (userId) => {
  const userRef = doc(db, "users", userId);
  await updateDoc(userRef, {
    name: "Deekshith H R"
  });
  console.log("Document updated");
};

Deleting a Document

import { doc, deleteDoc } from "firebase/firestore";
import { db } from "./firebase";

const deleteUser = async (userId) => {
  await deleteDoc(doc(db, "users", userId));
  console.log("Document deleted");
};

Firestore Security Rules: By default Firestore is locked. Go to Firestore → Rules in the console and update rules to allow authenticated users to read/write their own data.

---

📦 Firebase Storage

Firebase Storage lets you upload and download files — images, videos, PDFs, and any other user-generated content. Files are stored in Google Cloud Storage and served via secure download URLs.

Setting Up Storage

Add Storage to your firebase.js:

import { getStorage } from "firebase/storage";

export const storage = getStorage(app);

Uploading a File

import { ref, uploadBytes } from "firebase/storage";
import { storage } from "./firebase";

const uploadFile = async (file) => {
  const storageRef = ref(storage, `uploads/${file.name}`);
  try {
    await uploadBytes(storageRef, file);
    console.log("File uploaded successfully");
  } catch (error) {
    console.error("Upload error:", error);
  }
};

Getting the Download URL

After uploading, get a public URL to display or share the file:

import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { storage } from "./firebase";

const uploadAndGetURL = async (file) => {
  const storageRef = ref(storage, `uploads/${file.name}`);
  await uploadBytes(storageRef, file);
  const url = await getDownloadURL(storageRef);
  console.log("Download URL:", url);
  return url;
};

Upload Progress Tracking

import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { storage } from "./firebase";

const uploadWithProgress = (file) => {
  const storageRef = ref(storage, `uploads/${file.name}`);
  const uploadTask = uploadBytesResumable(storageRef, file);

  uploadTask.on("state_changed",
    (snapshot) => {
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log("Upload is " + progress + "% done");
    },
    (error) => {
      console.error("Upload failed:", error);
    },
    async () => {
      const url = await getDownloadURL(uploadTask.snapshot.ref);
      console.log("File available at:", url);
    }
  );
};

Deleting a File

import { ref, deleteObject } from "firebase/storage";
import { storage } from "./firebase";

const deleteFile = async (filePath) => {
  const fileRef = ref(storage, filePath);
  await deleteObject(fileRef);
  console.log("File deleted");
};

Storage Security Rules: Update rules in Storage → Rules to allow only authenticated users to upload files and restrict file size if needed.

---

🚀 Firebase Hosting

Firebase Hosting lets you deploy your web app to a global CDN with a single command. You get a free web.app domain, SSL by default, and fast load times worldwide.

1. Install Firebase CLI

npm install -g firebase-tools

2. Log In to Firebase

firebase login

This opens a browser window to authenticate with your Google account.

3. Initialize Firebase in Your Project

Inside your project folder, run:

firebase init

You'll be asked a few questions:

• Select Hosting from the list of features
• Choose your existing Firebase project
• Set your public directory — type build if you're using React, or dist for Vite
• Select Yes for single-page app (SPA) rewrite if using React Router

4. Build Your App

For React:

npm run build

5. Deploy

firebase deploy

After deployment, Firebase gives you a live URL like https://your-project.web.app. Every time you make changes, just run npm run build followed by firebase deploy to push updates.

Preview Before Deploying

You can create a temporary preview URL to test before going live:

firebase hosting:channel:deploy preview

👉 For a detailed step-by-step walkthrough of Firebase Hosting including custom domains, redirects, and deploying on Ubuntu — read our complete Firebase Hosting guide here.

---

How Auth, Firestore, Storage, and Hosting Work Together

These four services are designed to complement each other. Here's a typical real-world flow:

• Auth handles who the user is — sign up, sign in, and session management
• Firestore stores that user's data — profile, posts, settings, app content
• Storage handles files that user uploads — profile picture, documents, videos
• Hosting serves the entire app on a fast, secure global CDN

For example, in a social app: a user signs in with Auth, their posts are saved in Firestore, their profile photo is uploaded to Storage, and the whole app is deployed via Hosting — all within the same Firebase project.

---

📱 Try Vidyavan — Learn on the Go

If you're learning Firebase, Android development, or any tech topic, check out Vidyavan — an educational app built for developers and students who want to learn on the go. Download it on the Play Store and keep building.

👉 Download Vidyavan on Google Play

Also check out the Android UI Kit — a collection of ready-to-use Android UI components to speed up your app development.

👉 Download Android UI Kit on Google Play

---

Conclusion

Firebase gives you a complete backend without managing any servers. Authentication secures your users, Firestore stores their data in real time, Storage handles their files, and Hosting deploys everything on a global CDN — all under one project and one console.

For indie developers, students building projects, or teams prototyping quickly, it's one of the most productive stacks available. The free Spark plan is generous enough to take a project from idea to live without spending anything.

---

FAQs

Q1: Is Firebase free to use?
Yes — Firebase's Spark plan is free and includes generous limits for Auth, Firestore, Storage, and Hosting. You only need to upgrade to the Blaze (pay-as-you-go) plan if you exceed those limits or need Cloud Functions.

Q2: Can I use Firebase with React Native?
Yes. The Firebase JavaScript SDK works with React Native, and there's also a dedicated React Native Firebase library that provides better native performance.

Q3: Is Firestore the same as Firebase Realtime Database?
No — they are two separate products. Firestore is newer, more scalable, and has better querying capabilities. Realtime Database is simpler and has slightly lower latency for small datasets. For most new projects, Firestore is the recommended choice.

Q4: How do I secure my Firestore and Storage data?
Using Firebase Security Rules. You define who can read and write what data directly in the Firebase Console. A common pattern is to allow users to only read and write their own documents based on their Auth UID.

Q5: Can I use Firebase Hosting with a custom domain?
Yes — Firebase Hosting supports custom domains for free, including automatic SSL certificate provisioning. You can connect your domain in the Hosting section of the Firebase Console. For a full walkthrough, check our complete hosting guide.