# 🔐 Password Manager with GitHub OAuth A secure password manager web application with GitHub authentication built using React, Vite, Express, and Tailwind CSS. ## ✨ Features - 🔒 **GitHub OAuth 2.0 Authentication** - Secure login with your GitHub account - 💾 **Local Password Storage** - Store passwords securely in browser localStorage - 👤 **User Profile Display** - Shows your GitHub avatar and name - ➕ **Add Passwords** - Store website credentials with URL, username, and password - ✏️ **Edit Passwords** - Update existing password entries - 🗑️ **Delete Passwords** - Remove passwords you no longer need - 📋 **Copy to Clipboard** - Quickly copy usernames and passwords - 👁️ **Show/Hide Passwords** - Toggle password visibility - 🎨 **Modern UI** - Beautiful interface with Tailwind CSS - 📱 **Responsive Design** - Works on desktop and mobile devices ## 🚀 Quick Start ### Prerequisites - Node.js (v16 or higher) - npm or yarn - GitHub account ### 1. Clone the Repository ```bash git clone https://github.com/KrishSharma4406/Passsword_Manager.git cd Passsword_Manager ``` ### 2. Install Dependencies ```bash npm install ``` ### 3. Set Up GitHub OAuth App 1. Go to [GitHub Developer Settings](https://github.com/settings/developers) 2. Click **"New OAuth App"** 3. Fill in: - **Application name**: Password Manager - **Homepage URL**: `http://localhost:5173` - **Authorization callback URL**: `http://localhost:5174/auth/callback` 4. Click **"Register application"** 5. Copy your **Client ID** and generate a **Client Secret** ### 4. Configure Environment Variables Create a `.env` file in the project root: ```bash cp .env.example .env ``` Edit `.env` and add your GitHub OAuth credentials: ```env GITHUB_CLIENT_ID=your_client_id_here GITHUB_CLIENT_SECRET=your_client_secret_here GITHUB_CALLBACK_URL=http://localhost:5174/auth/callback ``` ### 5. Start Development Servers **Option A: Using the PowerShell script (Windows)** ```powershell .\start-dev.ps1 ``` **Option B: Using the Bash script (Linux/Mac)** ```bash chmod +x start-dev.sh ./start-dev.sh ``` **Option C: Manually (two terminals)** Terminal 1 - Backend: ```bash npm run server ``` Terminal 2 - Frontend: ```bash npm run dev ``` ### 6. Open in Browser Open your browser to the URL shown in Terminal 2 (usually `http://localhost:5173` or `http://localhost:5174`) ## 📖 Documentation - **[GITHUB_AUTH_SETUP.md](GITHUB_AUTH_SETUP.md)** - Detailed setup instructions - **[TESTING_GUIDE.md](TESTING_GUIDE.md)** - Complete testing checklist and troubleshooting ## 🛠️ Tech Stack ### Frontend - **React 19** - UI library - **Vite 7** - Build tool and dev server - **React Router DOM 7** - Client-side routing - **Tailwind CSS 4** - Utility-first CSS framework - **React Toastify** - Toast notifications - **uuid** - Generate unique IDs ### Backend - **Express 5** - Node.js web framework - **CORS** - Cross-origin resource sharing - **dotenv** - Environment variable management ### Authentication - **GitHub OAuth 2.0** - Secure authentication flow ## 📁 Project Structure ``` password-man/ ├── public/ # Static assets ├── src/ │ ├── components/ │ │ ├── AuthCallback.jsx # OAuth callback handler │ │ ├── Manager.jsx # Password manager (protected) │ │ ├── Navbar.jsx # Navigation with auth status │ │ └── Footer.jsx # Footer component │ ├── context/ │ │ └── AuthContext.jsx # Authentication state management │ ├── App.jsx # Main app component with routing │ ├── main.jsx # React entry point │ └── index.css # Global styles ├── index.mjs # Express backend server ├── .env # Environment variables (not in git) ├── .env.example # Environment template ├── package.json # Dependencies and scripts ├── vite.config.js # Vite configuration ├── tailwind.config.js # Tailwind CSS configuration ├── postcss.config.js # PostCSS configuration └── README.md # This file ``` ## 🔒 Security Notes - ✅ `.env` file is in `.gitignore` - never commit secrets - ✅ Client Secret only used in backend (server-side) - ✅ OAuth authorization code flow (secure) - ⚠️ **Note**: This is a demo app. For production: - Use secure HTTP-only cookies instead of localStorage - Implement token expiration and refresh - Add backend database instead of localStorage - Use HTTPS in production - Implement rate limiting - Add input validation and sanitization ## 🧪 Testing See [TESTING_GUIDE.md](TESTING_GUIDE.md) for a complete testing checklist. Quick test: 1. Start both servers 2. Click "GitHub" button 3. Authorize the app 4. See your profile picture and name 5. Add a test password 6. Logout and login again ## 🐛 Troubleshooting ### "Redirect URI mismatch" - Check GitHub OAuth App callback URL matches your Vite dev server port - Default: `http://localhost:5174/auth/callback` ### "Authentication failed" - Verify backend is running on port 5000 - Check `.env` has correct Client Secret - Look at backend terminal for error messages ### Backend not responding - Ensure port 5000 is not in use - Check `.env` file exists and has correct values - Restart backend server ### CORS errors - Backend has CORS enabled by default - Ensure both servers are running - Check browser console for specific errors ## 📝 Available Scripts ```bash npm run dev # Start Vite dev server (frontend) npm run server # Start Express backend server npm run build # Build for production npm run preview # Preview production build ``` ## 🤝 Contributing 1. Fork the repository 2. Create a feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request ## 📄 License This project is licensed under the ISC License. ## 👤 Author **Krish Kumar** - GitHub: [@KrishSharma4406](https://github.com/KrishSharma4406) - Repository: [Passsword_Manager](https://github.com/KrishSharma4406/Passsword_Manager) ## 🙏 Acknowledgments - GitHub OAuth 2.0 documentation - React and Vite communities - Tailwind CSS team ## 📮 Support If you encounter any issues: 1. Check [TESTING_GUIDE.md](TESTING_GUIDE.md) 2. Review browser console (F12) 3. Check backend terminal logs 4. Open an issue on GitHub --- Made with ❤️ using React, Vite, Express, and GitHub OAuthe This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh ## Expanding the ESLint configuration If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. # Passsword_Man