{"id":29012383,"url":"https://github.com/mudasir45/firebase-auth-next","last_synced_at":"2026-04-30T20:32:17.632Z","repository":{"id":300423835,"uuid":"1006084331","full_name":"mudasir45/firebase-auth-next","owner":"mudasir45","description":"A modern, secure, and beautifully designed authentication system built with Next.js 14, Firebase Authentication, and Tailwind CSS. This project provides a complete user authentication flow with a clean, responsive interface and enterprise-grade security.","archived":false,"fork":false,"pushed_at":"2025-06-21T15:47:21.000Z","size":186,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-30T20:32:15.068Z","etag":null,"topics":["auth","authentication","firebase","firebase-auth","nextjs","nextjs14","tailwindcss"],"latest_commit_sha":null,"homepage":"https://firebase-auth-next-chi.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mudasir45.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-21T13:06:58.000Z","updated_at":"2025-06-21T15:47:24.000Z","dependencies_parsed_at":"2025-06-21T16:41:31.000Z","dependency_job_id":null,"html_url":"https://github.com/mudasir45/firebase-auth-next","commit_stats":null,"previous_names":["mudasir45/firebase-auth-next"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mudasir45/firebase-auth-next","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudasir45%2Ffirebase-auth-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudasir45%2Ffirebase-auth-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudasir45%2Ffirebase-auth-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudasir45%2Ffirebase-auth-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mudasir45","download_url":"https://codeload.github.com/mudasir45/firebase-auth-next/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mudasir45%2Ffirebase-auth-next/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32476682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth","authentication","firebase","firebase-auth","nextjs","nextjs14","tailwindcss"],"created_at":"2025-06-25T18:36:09.150Z","updated_at":"2026-04-30T20:32:17.618Z","avatar_url":"https://github.com/mudasir45.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔐 Firebase Auth Next.js\n\nA modern, secure, and beautifully designed authentication system built with Next.js 14, Firebase Authentication, and Tailwind CSS. This project provides a complete user authentication flow with a clean, responsive interface and enterprise-grade security.\n\n![Next.js](https://img.shields.io/badge/Next.js-14.2.30-black?style=for-the-badge\u0026logo=next.js\u0026logoColor=white)\n![Firebase](https://img.shields.io/badge/Firebase-11.9.1-orange?style=for-the-badge\u0026logo=firebase\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4.1-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n\n## ✨ Features\n\n### 🎯 **Authentication**\n\n- **Email/Password Authentication** - Secure user registration and login\n- **Protected Routes** - Automatic redirection for authenticated/unauthenticated users\n- **Persistent Sessions** - User state maintained across browser sessions\n- **Real-time Auth State** - Instant UI updates based on authentication status\n- **Form Validation** - Client-side validation with user-friendly error messages\n\n### 🎨 **User Interface**\n\n- **Modern Design** - Clean, professional interface with gradient backgrounds\n- **Responsive Layout** - Optimized for desktop, tablet, and mobile devices\n- **Loading States** - Smooth loading indicators and transitions\n- **Error Handling** - Graceful error display with actionable feedback\n- **Accessibility** - ARIA labels and keyboard navigation support\n\n### 📊 **Dashboard Features**\n\n- **User Profile Display** - Email, user ID, account creation date, and verification status\n- **Statistics Overview** - Visual cards showing account status and activity\n- **Quick Actions** - Profile management, settings, and data export options\n- **Secure Logout** - Safe session termination with loading states\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18.0 or later\n- npm package manager\n- Firebase project with Authentication enabled\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/yourusername/firebase-auth-next.git\n   cd firebase-auth-next\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Set up Firebase configuration**\n\n   Create a `.env.local` file in the root directory and add your Firebase configuration:\n\n   ```env\n   NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key_here\n   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com\n   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id\n   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com\n   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id\n   NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id\n   NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id\n   ```\n\n4. **Run the development server**\n\n   ```bash\n   npm run dev\n   ```\n\n5. **Open your browser**\n\n   Navigate to [http://localhost:3000](http://localhost:3000) to see the application.\n\n## 🔧 Firebase Setup\n\n### 1. Create a Firebase Project\n\n1. Go to the [Firebase Console](https://console.firebase.google.com/)\n2. Click \"Create a project\" and follow the setup wizard\n3. Choose your project name and configure Google Analytics (optional)\n\n### 2. Enable Authentication\n\n1. In your Firebase project console, navigate to **Authentication**\n2. Click on the **Sign-in method** tab\n3. Enable **Email/Password** authentication\n4. (Optional) Configure additional providers like Google, GitHub, etc.\n\n### 3. Get Your Config Keys\n\n1. Go to **Project Settings** (gear icon)\n2. Scroll down to **Your apps** section\n3. Click on the web app icon `\u003c/\u003e`\n4. Register your app and copy the configuration object\n5. Add these values to your `.env.local` file\n\n## 📁 Project Structure\n\n```\nsrc/\n├── app/\n│   ├── components/\n│   │   └── ProtectedRoute.tsx    # HOC for route protection\n│   ├── config/\n│   │   └── firebaseConfig.ts     # Firebase initialization\n│   ├── context/\n│   │   └── AuthContext.tsx       # Authentication context provider\n│   ├── dashboard/\n│   │   └── page.tsx              # Protected dashboard page\n│   ├── login/\n│   │   └── page.tsx              # User login page\n│   ├── signup/\n│   │   └── page.tsx              # User registration page\n│   ├── utils/\n│   │   └── auth.ts               # Authentication helper functions\n│   ├── globals.css               # Global styles and Tailwind imports\n│   ├── layout.tsx                # Root layout with AuthProvider\n│   └── page.tsx                  # Landing page\n├── firebase-env-example.txt       # Environment variables template\n└── README.md                     # Project documentation\n```\n\n## 🛡️ Security Features\n\n- **Protected Routes**: Automatic redirection for unauthorized access\n- **Input Validation**: Client-side form validation with error handling\n- **Secure Sessions**: Firebase handles session management and token refresh\n- **HTTPS Only**: Environment configured for secure connections\n- **No Sensitive Data Exposure**: All Firebase config uses public keys only\n\n## 🎨 Styling\n\nThis project uses **Tailwind CSS** for styling with:\n\n- **Responsive Design**: Mobile-first approach with breakpoint-specific styles\n- **Custom Color Palette**: Professional blue and gray color scheme\n- **Modern Components**: Cards, buttons, forms with consistent styling\n- **Smooth Animations**: Hover effects, loading spinners, and transitions\n\n## 📱 Pages Overview\n\n### 🏠 **Landing Page (`/`)**\n\n- Hero section with compelling call-to-action\n- Feature highlights and benefits\n- Navigation to sign-up and login pages\n- Auto-redirect to dashboard for authenticated users\n\n### 🔑 **Login Page (`/login`)**\n\n- Email and password input fields\n- Remember me checkbox\n- Forgot password link (UI only)\n- Social login buttons (GitHub, Google - UI only)\n- Link to registration page\n\n### 📝 **Signup Page (`/signup`)**\n\n- Full name, email, and password fields\n- Password confirmation with validation\n- Terms acceptance and privacy policy links\n- Auto-redirect to dashboard on successful registration\n\n### 📊 **Dashboard Page (`/dashboard`)**\n\n- User information display\n- Account statistics and status\n- Quick action buttons\n- Secure logout functionality\n\n## 🔄 Authentication Flow\n\n1. **User Registration**: Create account with email/password\n2. **Email Verification**: Firebase sends verification email (optional)\n3. **User Login**: Authenticate with registered credentials\n4. **Session Management**: Firebase maintains secure session\n5. **Protected Access**: Dashboard and user-specific content\n6. **Secure Logout**: Clear session and redirect to login\n\n## 🚀 Deployment\n\n### Vercel (Recommended)\n\n1. Push your code to GitHub\n2. Connect your repository to [Vercel](https://vercel.com)\n3. Add your environment variables in the Vercel dashboard\n4. Deploy automatically on every push\n\n### Other Platforms\n\n- **Netlify**: Add environment variables and deploy\n- **Railway**: Configure environment and deploy\n- **Heroku**: Set config vars and deploy\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🛠️ Built With\n\n- **[Next.js 14](https://nextjs.org/)** - React framework for production\n- **[Firebase Authentication](https://firebase.google.com/products/auth)** - Secure authentication service\n- **[TypeScript](https://www.typescriptlang.org/)** - Type-safe JavaScript\n- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[React Context API](https://reactjs.org/docs/context.html)** - State management\n\n## 📞 Support\n\nIf you have any questions or need help with setup, please:\n\n1. Check the [Issues](https://github.com/yourusername/firebase-auth-next/issues) page\n2. Create a new issue with detailed information\n3. Include your environment details and error messages\n\n## 🎯 Roadmap\n\n- [ ] Password reset functionality\n- [ ] Social authentication (Google, GitHub)\n- [ ] Email verification flow\n- [ ] User profile editing\n- [ ] Multi-factor authentication\n- [ ] Admin dashboard\n- [ ] User role management\n\n## ⭐ Show Your Support\n\nIf this project helped you or you found it useful, please consider giving it a star! ⭐\n\nIt helps others discover this project and motivates me to keep improving it.\n\n### 🤝 Connect With Me\n\n- 💼 **Found a bug or have a feature request?** [Open an issue](https://github.com/mudasir45/firebase-auth-next/issues)\n- 💡 **Have questions or want to collaborate?** Feel free to reach out!\n- 🌟 **Enjoying this project?** Give it a star and share it with others\n- 🐛 **Found this helpful?** Consider following for more awesome projects\n\n### 📬 Get in Touch\n\n- 📧 **Email**: [mudasiramin320@gmail.com](mailto:mudasiramin320@gmail.com)\n- 💼 **LinkedIn**: [Mudassir Amin](https://www.linkedin.com/in/mudasiramin/)\n- 🌐 **Website**: [imergesolutions.com](https://imergesolutions.com)\n\n\u003e _\"Code is like humor. When you have to explain it, it's bad.\"_ – Cory House\n\n---\n\n**Made with ❤️ using Next.js and Firebase**\n\n_Don't forget to ⭐ this repo if you found it helpful!_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmudasir45%2Ffirebase-auth-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmudasir45%2Ffirebase-auth-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmudasir45%2Ffirebase-auth-next/lists"}