🔐 Google Auth MERN

A sleek and secure authentication system powered by Google OAuth 2.0, built using the MERN stack.
Modern UI, smooth login experience, and full session-based authentication — plug-and-play for any project. 🚀

---

✨ Features

• 🎨 Apple-Inspired UI - Clean, minimal, and responsive design
• 🔒 Google OAuth 2.0 - Secure authentication with Google accounts
• 💾 MongoDB Integration - User data stored securely in MongoDB Atlas
• 🎭 Session Management - Persistent sessions with Passport.js
• ⚡ Fast & Modern - Built with React (Vite) and Express.js
• 📱 Fully Responsive - Works seamlessly on all devices
• 🎯 Modular Architecture - Clean separation of concerns (controllers, routes, middleware)

---

🛠️ Tech Stack

Frontend

• React (Vite)
• Axios for API calls
• Context API for state management
• CSS3 with Apple-inspired design system

Backend

• Node.js & Express.js
• MongoDB with Mongoose
• Passport.js (Google OAuth 2.0 Strategy)
• Express Session for session management
• CORS enabled for cross-origin requests

---

📁 Project Structure

googleAuth/
├── backend/
│   ├── config/
│   │   ├── db.js              # MongoDB connection
│   │   └── passport.js        # Passport Google OAuth config
│   ├── controllers/
│   │   └── authController.js  # Authentication logic
│   ├── middleware/
│   │   └── auth.js            # Auth middleware
│   ├── models/
│   │   └── User.js            # User schema
│   ├── routes/
│   │   └── authRoutes.js      # Auth routes
│   ├── .env                   # Environment variables
│   ├── app.js                 # Express app setup
│   └── index.js               # Server entry point
│
└── frontend/
    ├── src/
    │   ├── components/
    │   │   ├── Home.jsx       # Dashboard/Profile page
    │   │   ├── Home.css
    │   │   ├── Login.jsx      # Login page
    │   │   └── Login.css
    │   ├── context/
    │   │   └── AuthContext.jsx # Auth state management
    │   ├── App.jsx
    │   └── index.css          # Global styles
    └── vite.config.js         # Vite configuration

---

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• MongoDB Atlas account
• Google Cloud Console account

---

1️⃣ Clone the Repository

git clone https://github.com/yourusername/google-auth-mern.git
cd google-auth-mern

---

2️⃣ Setup Google OAuth Credentials

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Navigate to APIs & Services > Credentials
4. Click Create Credentials > OAuth client ID
5. Select Web application
6. Add the following:
   • Authorized JavaScript origins:
     • http://localhost:5001
     • http://localhost:5173
   • Authorized redirect URIs:
     • http://localhost:5001/auth/google/callback
7. Copy your Client ID and Client Secret

---

3️⃣ Backend Setup

cd backend
npm install

Create a .env file in the backend folder:

MONGODB_URI=your_mongodb_connection_string
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
SESSION_SECRET=your_random_session_secret
PORT=5001
CLIENT_URL=http://localhost:5173

Start the backend server:

npm run dev

Backend will run on http://localhost:5001

---

4️⃣ Frontend Setup

cd frontend
npm install

Start the frontend:

npm run dev

Frontend will run on http://localhost:5173

---

🎯 Usage

1. Open http://localhost:5173 in your browser
2. Click "Continue with Google"
3. Sign in with your Google account
4. You'll be redirected to your dashboard with your profile information

---

🔑 Environment Variables

Backend .env

Variable	Description
MONGODB_URI	MongoDB Atlas connection string
GOOGLE_CLIENT_ID	Google OAuth Client ID
GOOGLE_CLIENT_SECRET	Google OAuth Client Secret
SESSION_SECRET	Secret key for session encryption
PORT	Backend server port (default: 5001)
CLIENT_URL	Frontend URL (default: http://localhost:5173)

---

📸 Screenshots

Login Page

Clean, minimal login interface with Google OAuth button.

Dashboard

User profile with name, email, profile photo, and account stats.

---

🔒 Security Features

• ✅ Secure session-based authentication
• ✅ HTTP-only cookies
• ✅ CORS protection
• ✅ Environment variables for sensitive data
• ✅ MongoDB user data encryption

---

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

---

📝 License

This project is licensed under the MIT License.

---

👨‍💻 Author

Your Name

• GitHub: @yourusername
• Email: your.email@example.com

---

🙏 Acknowledgments

• Passport.js for authentication
• Google OAuth 2.0
• MongoDB Atlas
• Vite for blazing fast development

---

Made with ❤️ and MERN Stack