React Authentication with Firebase in 2025 – Easy Login & Signup System

Ever tried building a login system from scratch? It’s like baking a cake 🎂—except you have to grow the wheat, milk the cow, and refine the sugar first! 😅

Luckily, Firebase does all the heavy lifting for us, and React makes it smooth and interactive. By the end of this guide, you’ll have a secure, production-ready authentication system with:

✅ Email/Password Login & Signup
✅ Google & GitHub OAuth (because who remembers passwords?)
✅ Protected Routes (keep unauthorized users out)
✅ Real-time User State Management

Let’s dive in!

🛠️ What You’ll Need

Before we start, make sure you have:

• Node.js installed (v18 or later)
• A React project (create one with npx create-react-app firebase-auth)
• A Firebase account (it’s free!)

🔥 Step 1: Setting Up Firebase

Firebase is like a backend superhero 🦸—it handles authentication, databases, and more without writing server code.

1. Create a Firebase Project

• Go to the Firebase Console
• Click "Add Project" and follow the steps

2. Enable Authentication

• In your Firebase project, go to Authentication → Sign-in Method
• Enable:
  • Email/Password
  • Google Sign-In (or any other provider you want)

3. Get Your Firebase Config

• Go to Project Settings → General → Your Apps
• Register a web app and copy the config:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

⚛️ Step 2: Setting Up React with Firebase

1. Install Firebase in Your React App

Run:

npm install firebase @react-firebase/auth

2. Initialize Firebase in Your App

Create a file firebase.js:

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

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();

Now, Firebase is ready to use!

🔐 Step 3: Building the Auth System

1. Create a Signup Function

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 signing up:", error.message);
  }
};

2. Create a Login Function

import { signInWithEmailAndPassword } from "firebase/auth";

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

3. Add Google OAuth Login

import { signInWithPopup } from "firebase/auth";

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

🚪 Step 4: Protecting Routes

Want to restrict pages to logged-in users only? Use React Router + Firebase Auth:

import { onAuthStateChanged } from "firebase/auth";

const PrivateRoute = ({ children }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, []);

  return user ? children : <Navigate to="/login" />;
};

Now wrap protected routes:

<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />

📝 Step 5: Handling User State

Use React Context or Redux to manage the user globally. Here’s a simple version:

import { createContext, useEffect, useState } from "react";
import { auth } from "./firebase";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
    return unsubscribe;
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

Wrap your app with it:

<AuthProvider>
  <App />
</AuthProvider>

Now, any component can access currentUser!

🎉 Final Result

You now have a full authentication system with:

• Email/Password Login & Signup
• Google OAuth
• Protected Routes
• Real-time User Tracking

🔑 Key Takeaways

✔ Firebase Auth makes authentication effortless
✔ React + Firebase is a powerful combo for full-stack apps
✔ Protected routes ensure only logged-in users access certain pages
✔ User state management keeps your app in sync

Got stuck? Drop a comment below, and I’ll help you out! 👇

#HappyCoding 💻🔥