{"id":44651247,"url":"https://github.com/talhabilal-dev/next-auth-kit","last_synced_at":"2026-02-14T20:48:08.442Z","repository":{"id":307100830,"uuid":"997961285","full_name":"talhabilal-dev/next-auth-kit","owner":"talhabilal-dev","description":"A comprehensive authentication kit for Next.js projects, built with TypeScript and MongoDB. This kit provides a robust foundation for custom authentication flows, including login, registration, email verification, password reset, and a sample dashboard with a sidebar. ","archived":false,"fork":false,"pushed_at":"2025-08-06T11:27:41.000Z","size":2252,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-06T13:15:31.448Z","etag":null,"topics":["authentication","authorization","dashboard","jwt-authentication","mongodb","mongoose","nextjs","tailwindcss","template"],"latest_commit_sha":null,"homepage":"https://next-auth-kit.talhabilal.dev/","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/talhabilal-dev.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-07T15:15:37.000Z","updated_at":"2025-08-06T11:27:45.000Z","dependencies_parsed_at":"2025-07-29T13:48:55.978Z","dependency_job_id":"fe731e1c-ed3f-4c87-a41c-bab6bb3bcdf9","html_url":"https://github.com/talhabilal-dev/next-auth-kit","commit_stats":null,"previous_names":["talhabilal-dev/next-auth-kit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/talhabilal-dev/next-auth-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talhabilal-dev%2Fnext-auth-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talhabilal-dev%2Fnext-auth-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talhabilal-dev%2Fnext-auth-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talhabilal-dev%2Fnext-auth-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/talhabilal-dev","download_url":"https://codeload.github.com/talhabilal-dev/next-auth-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/talhabilal-dev%2Fnext-auth-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29455362,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T15:52:44.973Z","status":"ssl_error","status_checked_at":"2026-02-14T15:52:11.208Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["authentication","authorization","dashboard","jwt-authentication","mongodb","mongoose","nextjs","tailwindcss","template"],"created_at":"2026-02-14T20:48:07.753Z","updated_at":"2026-02-14T20:48:08.437Z","avatar_url":"https://github.com/talhabilal-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next Auth Kit 🔐\n\nA complete authentication solution built with Next.js 15, TypeScript, and MongoDB. This project provides a robust, production-ready authentication system with all essential features and a beautiful, responsive dashboard featuring a stunning dark purple gradient theme.\n\n## ✨ Features\n\n### 🔒 Authentication System\n\n- **User Registration** - Complete signup flow with email verification\n- **User Login** - Secure signin with JWT tokens\n- **Email Verification** - Account activation via email\n- **Password Reset** - Forgot password with email recovery\n- **Change Password** - Secure password update for authenticated users\n- **Logout** - Secure session termination\n- **Remember Me** - Persistent login for users\n\n### 🎨 User Interface\n\n- **Responsive Dashboard** - Beautiful sidebar layout that works on all devices\n- **Modern UI Components** - Clean, accessible design with Lucide React icons\n- **Dark Purple Gradient Theme** - Stunning dark theme with purple gradients\n- **Toast Notifications** - User feedback with Sonner\n- **Mobile-First Design** - Fully responsive across all screen sizes\n\n### 🛠 Technical Features\n\n- **⚡ Next.js 15** - Latest React framework with App Router\n- **🔷 TypeScript** - Full type safety throughout the application\n- **🍃 MongoDB** - Mongoose ODM for database operations\n- **🔑 JWT Authentication** - Secure token-based authentication with Jose\n- **🔒 Password Hashing** - bcryptjs for secure password storage\n- **📧 Email Service** - Resend integration for transactional emails\n- **🎨 Tailwind CSS** - Utility-first CSS framework with custom gradient theme\n- **🚀 React 19** - Latest React features and optimizations\n\n## Image Gallery\n\n### 🏠 Home\n\n![Home](https://res.cloudinary.com/dvdktrhsz/image/upload/v1750523476/Screenshot_from_2025-06-21_21-29-50_xzdf2d.png)\n\n### 📊 Dashboard\n\n![Dashboard](https://res.cloudinary.com/dvdktrhsz/image/upload/v1750523476/Screenshot_from_2025-06-21_21-30-19_mqxw6u.png)\n\n### 🔑 Authentication\n\n![Register](https://res.cloudinary.com/dvdktrhsz/image/upload/v1750523475/Screenshot_from_2025-06-21_21-23-29_wa6fyg.png)\n\n![Login](https://res.cloudinary.com/dvdktrhsz/image/upload/v1750523475/Screenshot_from_2025-06-21_21-23-21_mqnflx.png)\n\n![Forgot Password](https://res.cloudinary.com/dvdktrhsz/image/upload/v1750523476/Screenshot_from_2025-06-21_21-27-57_ygx0f2.png)\n\n![Reset Password](https://res.cloudinary.com/dvdktrhsz/image/upload/v1750523475/Screenshot_from_2025-06-21_21-28-32_k2rzjj.png)\n\n![Change Password](https://res.cloudinary.com/dvdktrhsz/image/upload/v1750523477/Screenshot_from_2025-06-21_21-30-26_bob4j0.png)\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18+\n- MongoDB database\n- Resend account (for email functionality)\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clonehttps://github.com/talhabilal-dev/next-auth-kit.git\n   cd next-auth-kit\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install || pnpm install\n\n   ```\n\n3. **Environment Setup**\n   Create a `.env.local` file in the root directory:\n\n   ```bash\n   # Database\n   MONGODB_URI=your_mongodb_connection_string\n   \n   # JWT Secret\n   TOKEN_SECRET=your_token_secret\n   REFRESH_TOKEN_SECRET=your_refresh_token_secret\n   \n   # Email Service (Resend)\n   RESEND_API_KEY=your_resend_api_key\n   FROM_EMAIL_DOMAIN=noreply@yourdomain.com\n\n   # Environment\n   NODE_ENV=development\n   \n   # App URL\n   DOMAIN=http://localhost:3000\n   ```\n\n4. **Run the development server**\n\n   ```bash\n   npm run dev\n   ```\n\n5. **Open your browser**\n   Navigate to [http://localhost:3000](http://localhost:3000)\n\n## 📦 Dependencies\n\n```json\n{\n  \"bcryptjs\": \"^3.0.2\",       // 🔒 Password hashing\n  \"jose\": \"^6.0.11\",          // 🔑 JWT handling\n  \"lucide-react\": \"^0.513.0\", // 🎨 Modern icons\n  \"mongoose\": \"^8.15.1\",      // 🍃 MongoDB ODM\n  \"next\": \"15.3.3\",           // ⚡ Next.js framework\n  \"next-themes\": \"^0.4.6\",    // 🌙 Theme management\n  \"react\": \"^19.0.0\",         // ⚛️ React library\n  \"react-dom\": \"^19.0.0\",     // 🌐 React DOM\n  \"resend\": \"^4.5.2\",         // 📧 Email service\n  \"sonner\": \"^2.0.5\",         // 🔔 Toast notifications\n  \"tailwind-merge\": \"^3.3.0\"  // 🎨 Tailwind utilities\n}\n```\n\n## 🗂 Project Structure\n\n```\nnext-auth-kit/\n├── node_modules/\n├── public/\n│   └── images/\n├── src/\n│   └── app/\n│       ├── api/\n│       │   └── users/\n│       │       ├── change-password/\n│       │       ├── forgot-password/\n│       │       │   └── sent/\n│       │       ├── verify/\n│       │       ├── login/\n│       │       ├── logout/\n│       │       ├── profile/\n│       │       ├── register/\n│       │       └── user-verify/\n│       │           └── sent/\n│       ├── user/\n│       │   ├── dashboard/\n│       │   ├── login/\n│       │   ├── register/\n│       │   ├── reset-password/\n│       │   ├── verify/\n│       │   └── verify-token/\n│       ├── components/\n│       ├── globals.css\n│       ├── layout.tsx\n│       └── page.tsx\n├── components/\n├── lib/\n├── helpers/\n├── types/\n├── models/\n├── middleware.ts\n└── config files (package.json, etc.)\n```\n\n## 🔗 Available Routes\n\n### User Authentication Pages\n\n- `/user/login` - User signin\n- `/user/register` - User registration  \n- `/user/verify` - Email verification\n- `/user/verify-token` - Token verification\n- `/user/reset-password` - Password reset request\n- `/user/dashboard` - Protected dashboard\n\n### API Endpoints\n\n- `POST /api/users/login` - User authentication\n- `POST /api/users/register` - User registration\n- `POST /api/users/verify` - Email verification\n- `POST /api/users/forgot-password` - Password reset\n- `GET /api/users/forgot-password/sent` - Password reset confirmation\n- `POST /api/users/change-password` - Password update\n- `POST /api/users/logout` - Session termination\n- `GET /api/users/profile` - User profile data\n- `POST /api/users/user-verify` - User verification\n- `GET /api/users/user-verify/sent` - Verification confirmation\n\n## 🎯 Key Features Breakdown\n\n### Authentication Flow\n\n1. **Registration**: User signs up with email/password\n2. **Verification**: Email sent with verification link\n3. **Login**: Verified users can sign in\n4. **Dashboard Access**: JWT token provides access to protected routes\n5. **Password Management**: Users can change or reset passwords\n\n# Automatic Token Refresh System\n\nThis authentication system implements automatic token refresh to provide seamless user experience without requiring manual re-authentication.\n\n## How it works\n\n### Token Structure\n\n- **Access Token**: Short-lived (1 hour) - Contains user data and is used for API authentication\n- **Refresh Token**: Long-lived (7-30 days) - Used only to generate new access tokens\n\n### Automatic Refresh Flow\n\n1. **Middleware Level** (`src/middleware.ts`):\n   - Checks every request for token validity\n   - If access token is expired but refresh token is valid, automatically generates new access token\n   - If both tokens are expired/invalid, redirects to login\n   - Seamlessly updates cookies with new access token\n\n2. **API Level** (`src/app/api/users/token/route.ts`):\n   - Provides endpoint for manual token refresh\n   - Validates refresh token and generates new access token\n   - Returns error if refresh token is expired/invalid\n\n3. **Client Side** (`src/helpers/apiUtils.ts`):\n   - `apiCall()` function automatically handles 401 responses\n   - Attempts token refresh on authentication failure\n   - Redirects to login only if refresh fails\n\n### Usage Examples\n\n#### Server-side (Middleware - Automatic)\n\n```typescript\n// No code needed - middleware handles automatically\n// User stays logged in as long as refresh token is valid\n```\n\n#### Client-side API calls\n\n```typescript\nimport { apiCall } from '@/helpers/apiUtils';\n\n// This will automatically refresh token if needed\nconst response = await apiCall('/api/protected-endpoint', {\n  method: 'GET'\n});\n```\n\n#### Manual token refresh\n\n```typescript\nimport { useAuthRefresh } from '@/helpers/apiUtils';\n\nconst { refreshToken } = useAuthRefresh();\nconst success = await refreshToken();\n```\n\n### Security\n\n1. **HttpOnly Cookies**: Both tokens are stored in httpOnly cookies to prevent XSS attacks\n2. **Secure \u0026 SameSite**: Cookies are marked secure and use SameSite=none for CSRF protection\n3. **Short Access Token Lifetime**: Reduces risk if access token is compromised\n4. **Automatic Cleanup**: Expired tokens are automatically removed from cookies\n\n### Token Lifetimes\n\n| Token Type | Remember Me = false | Remember Me = true |\n|------------|---------------------|-------------------|\n| Access Token | 1 hour | 1 hour |\n| Refresh Token | 7 days | 30 days |\n\n### Logout Behavior\n\n- User only gets logged out when refresh token expires\n- Manual logout clears both access and refresh tokens\n- Invalid/tampered tokens trigger automatic logout\n\n### Environment Variables Required\n\n```env\nTOKEN_SECRET=your-access-token-secret\nREFRESH_TOKEN_SECRET=your-refresh-token-secret\n```\n\nMake sure these are different and securely generated.\n\n### Security Features\n\n- Password hashing with bcryptjs\n- JWT token validation\n- Protected route middleware\n- Email verification requirement\n- Secure password reset flow\n\n### UI/UX Features\n\n- Fully responsive design\n- Dark purple gradient theme\n- Loading states and error handling\n- Toast notifications for user feedback\n- Clean, modern interface with smooth animations\n\n## 🛡 Security Considerations\n\n- All passwords are hashed before storage\n- JWT tokens have expiration times\n- Email verification prevents fake accounts\n- CSRF protection via Next.js built-in features\n- Input validation and sanitization\n\n## 📱 Responsive Design\n\nThe application is built mobile-first and includes:\n\n- Responsive sidebar that collapses on mobile\n- Touch-friendly interface elements\n- Optimized layouts for all screen sizes\n- Accessible navigation patterns\n\n## 🎨 Customization\n\n### Theming\n\nThe project features a stunning dark purple gradient theme:\n\n- Custom purple gradient backgrounds\n- Dark UI components with purple accents\n- Consistent color scheme throughout the application\n- Modern glassmorphism effects\n\n### Email Templates\n\nEmail templates can be customized in the API routes:\n\n- Verification emails\n- Password reset emails\n- Welcome emails\n\n## 🚀 Deployment\n\n### Vercel (Recommended)\n\n1. Push your code to GitHub\n2. Connect your repository to Vercel\n3. Add environment variables in Vercel dashboard\n4. Deploy automatically\n\n### Other Platforms\n\nThe application can be deployed to any platform that supports Next.js:\n\n- Netlify\n- Railway\n- DigitalOcean App Platform\n- AWS Amplify\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\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## 🆘 Support\n\nIf you encounter any issues or have questions:\n\n- Check the [Issues](https://github.com/yourusername/next-auth-kit/issues) page\n- Create a new issue with detailed information\n- Review the documentation and code comments\n\n## 🙏 Acknowledgments\n\n- Next.js team for the amazing framework\n- Vercel for hosting and deployment tools\n- Tailwind CSS for the utility-first CSS framework\n- All the open-source contributors whose packages make this possible\n\n---\n\n**Built with ❤️ using Next.js 15 ⚡, TypeScript 🔷, MongoDB 🍃, and React 19 ⚛️**\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalhabilal-dev%2Fnext-auth-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalhabilal-dev%2Fnext-auth-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalhabilal-dev%2Fnext-auth-kit/lists"}