🔥 FirebaseAuth

A production-ready React authentication system built with Firebase — featuring email/password sign-in, Google OAuth, password reset, and a post-login dashboard.

---

✨ Features

• Email & Password Authentication

  • Sign up & sign in
  • Validation & error handling
  • Firebase auth integration

• Google OAuth

  • One-click Google popup login

• Password Reset

  • Sends password reset email

• Password Strength Meter

  • Real-time password feedback

• Auth Persistence

  • User session survives refresh using onAuthStateChanged

• Dashboard

  • Shows:
    • UID
    • Email
    • Provider
    • Verification status

• Firestore Ready

  • db already exported from Firebase config

---

🛠 Tech Stack

Layer	Technology
Frontend	React 18
Authentication	Firebase Auth
Database	Cloud Firestore
Hosting	Firebase Hosting
Bundler	Vite

---

📁 Project Structure

firebase-auth/
├── FirebaseAuth.jsx
├── firebase/
│   └── config.js
├── hooks/
│   └── useAuth.js
├── utils/
│   └── helpers.js
├── styles/
│   └── authStyles.js
├── components/
│   ├── Dashboard.jsx
│   ├── Toast.jsx
│   ├── StrengthBar.jsx
│   ├── Logo.jsx
│   ├── GoogleIcon.jsx
│   └── Divider.jsx
└── views/
    ├── LoginView.jsx
    ├── SignupView.jsx
    └── ResetView.jsx

---

🚀 Getting Started

1️⃣ Clone Repository

git clone : https://github.com/pratikshajadhav08/react-firebase-authentication
cd firebase-auth

---

2️⃣ Install Dependencies

npm install

---

3️⃣ Configure Firebase

Create a Firebase project from:

👉 https://console.firebase.google.com

Go to:

Project Settings → Your Apps → SDK Setup

Replace config inside:

firebase/config.js

With:

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

---

4️⃣ Enable Authentication Providers

Inside Firebase Console:

Authentication → Sign-in Method

Enable:

• ✅ Email/Password
• ✅ Google

---

5️⃣ Start Development Server

npm run dev

App runs at:

http://localhost:5173

---

🌍 Deployment

Build Project

npm run build

---

Deploy to Firebase Hosting

Install Firebase CLI

npm install -g firebase-tools

Login

firebase login

Initialize Hosting

firebase init hosting

Deploy

firebase deploy --only hosting

---

Firebase Hosting Setup

Prompt	Answer
Which project?	Your Firebase Project ID
Public directory?	dist
Configure as SPA?	Yes
Overwrite index.html?	No

---

🔥 Firestore Example

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

await addDoc(collection(db, "users"), {
  uid: user.uid,
  email: user.email,
  createdAt: new Date(),
});

---

🔐 Environment Variables

Create a .env file:

VITE_API_KEY=your_api_key
VITE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_PROJECT_ID=your_project_id
VITE_STORAGE_BUCKET=your_project.appspot.com
VITE_MESSAGING_SENDER_ID=your_sender_id
VITE_APP_ID=your_app_id

Update firebase/config.js:

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
};

Add .env to .gitignore

echo ".env" >> .gitignore

---

Live at: https://react-firebase-authentication-two.vercel.app/

📦 Future Improvements

• Protected Routes
• Role-Based Auth
• Dark Mode
• Email Verification
• MFA Authentication
• GitHub OAuth
• User Profiles
• Admin Dashboard

---

📚 Resources

• Firebase Docs
  https://firebase.google.com/docs

• React Docs
  https://react.dev

• Vite Docs
  https://vitejs.dev

---

📄 License

MIT License