Boost Your React Projects with Firebase: Authentication, Firestore, and Hosting in One Go

Imagine you're building a React web application. You want to let users sign up or log in, store their data securely, and finally host your app online. You might think you need to:

• Set up a database (and pay for it)
• Create a custom authentication system
• Add features like Google, Facebook, or Microsoft login
• Write backend code for all of this
• Find a separate service to host the backend
• Purchase a domain and find reliable hosting

That’s a lot of work! 😅 But what if I told you there’s a complete solution — and it's from Google

Yes, I’m talking about Firebase 🔥
Firebase is like a Swiss army knife for developers. It offers everything from authentication to databases and hosting — all in one place. In this post, I’ll walk you through how I integrated Firebase Authentication, Firestore, and Hosting into a React project — all in one smooth workflow.

🛠️ Setting Up Firebase

1. Create a Firebase Project

• Go to the Firebase Console.
• Click “Add Project” and follow the steps.
• Enable Google Analytics (optional but recommended).

2. Add a Web App to Your Project

• Once the project is created, choose the web app option.
• Give it a nickname and register your app.
• Firebase will provide SDK configuration — copy it.

3. Install Firebase in React

Run this command in your React project folder in the terminal:

npm install firebase

4. Initialize Firebase

Create a firebaseConfig.js file and paste your config like this:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
  measurementId: "your-measurement-id"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

🔐 Firebase Authentication in React

1. Enable Authentication

• Go to Authentication → Sign-in Method
• Enable Email/Password (and Google if needed)

2. Add Signup & Login Functionality

// auth.js
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

export const registerUser = (email, password) => {
  return createUserWithEmailAndPassword(auth, email, password);
};

export const loginUser = (email, password) => {
  return signInWithEmailAndPassword(auth, email, password);
};

3. Add Google Authentication

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

const auth = getAuth();

export const signInWithGoogle = async () => {
  const googleProvider = new GoogleAuthProvider();
  const result = await signInWithPopup(auth, googleProvider);
  return result;
};

🔥 Firestore – Real-Time NoSQL Database

1. Enable Firestore

• Go to Firestore Database → Create database
• Choose default settings

2. Set Firestore Rules (for development only!)

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

⚠️ Don’t use true in production! This is only for development/testing.

3. Read & Write Data

import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";

const db = getFirestore();

export const addUserData = async (data) => {
  await addDoc(collection(db, "users"), data);
};

export const fetchUserData = async () => {
  const snapshot = await getDocs(collection(db, "users"));
  return snapshot.docs.map(doc => doc.data());
};

📝 You can explore more Firestore functions in the official docs.

🌍 Deploy React App with Firebase Hosting

1. Install Firebase CLI

npm install -g firebase-tools
firebase login

2. Initialize Firebase Hosting

firebase init

• Select Hosting
• Choose your Firebase project
• Set the public directory to build
• Choose yes for SPA support

3. Build & Deploy

npm run build
firebase deploy

✨ Final Thoughts

Firebase helped me simplify the entire development process. I was able to:

• Set up auth without writing custom backend logic
• Use Firestore for real-time data storage
• Deploy the project within minutes using Firebase Hosting

And the best part? All of this is free (within generous usage limits). Firebase also provides AI & ML features like Text recognition, Face detection, Barcode scanning. These can be easily integrated with your apps!

💻 Real Project Built with Firebase

I recently built a project using Firebase, and it made development incredibly smooth. I could focus on the main application logic instead of spending time setting up auth systems and choosing the right database.
🔗 Project: ClassMantra
🔗 GitHub Repo: patilmanas04/GDG-Hack2skill-The-Genesis-Group

🧠 For Best Practices: Use Context API

If you're using Firebase in a React app, a great practice is to wrap your auth and database logic in a Firebase Context. This makes it easier to manage and access Firebase functionality across components.
📄 Example Firebase Context: Click here

Firebase Docs: firebase.google.com/docs

✅ Conclusion

Firebase is a full-stack platform for modern web apps and if you’re a React developer, it can seriously boost your productivity.

So next time you're starting a React project, give Firebase a try. It might just save you hours or even days of work! 🔥