DEV Community

Cover image for Boost Your React Projects with Firebase: Authentication, Firestore, and Hosting in One Go
Manas Patil
Manas Patil

Posted on

1

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). Firebase Console

2. Add a Web App to Your Project

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

3. Install Firebase in React

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

npm install firebase
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

🔐 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);
};
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

🔥 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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

⚠️ 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());
};
Enter fullscreen mode Exit fullscreen mode

📝 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
Enter fullscreen mode Exit fullscreen mode

2. Initialize Firebase Hosting

firebase init
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

✨ 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! 🔥

Top comments (0)

👋 Kindness is contagious

Explore this practical breakdown on DEV’s open platform, where developers from every background come together to push boundaries. No matter your experience, your viewpoint enriches the conversation.

Dropping a simple “thank you” or question in the comments goes a long way in supporting authors—your feedback helps ideas evolve.

At DEV, shared discovery drives progress and builds lasting bonds. If this post resonated, a quick nod of appreciation can make all the difference.

Okay