A modern, full-featured authentication system built with Next.js 16, NextAuth.js v5, and Prisma. This project provides a comprehensive authentication solution with enterprise-grade security features including Two-Factor Authentication (2FA) and a beautiful UI powered by Shadcn UI components and Tailwind CSS.
- Complete authentication system with NextAuth.js v5
- Two-Factor Authentication (2FA) for enhanced security
- Email verification with token-based system
- Credential verification with secure token management
- Password reset with email-based token verification
- Secure password hashing with bcrypt
- Session management with database persistence
- Role-based access control (User/Admin)
- Modern glassmorphism UI with backdrop blur effects
- Responsive design that works on all devices
- Real-time form validation with instant feedback
- Toast notifications for user actions
- Loading states and smooth transitions
- Protected routes with automatic redirects
- 💾 Database integration with Prisma ORM
- 🎨 Modern UI components using Radix UI
- 📧 Email integration with Resend
- ✅ Form validation with React Hook Form and Zod
- 🎯 Type-safe with TypeScript
- 📊 Data visualization with Recharts
- 🔄 Server Actions for secure API calls
- Consistent Design System: Slate color palette with blue/purple accents
- Glassmorphism Effects: Backdrop blur with semi-transparent backgrounds
- Subtle Animations: Smooth hover effects and transitions
- Grid Pattern Background: Modern geometric overlay
- Gradient Accents: Radial gradients for depth
- Accessible Components: WCAG compliant UI elements
- Framework: Next.js 16.0.1
- Authentication: NextAuth.js v5.0.0-beta.30
- Database ORM: Prisma 6.19.0
- UI Components: Radix UI
- Styling: Tailwind CSS v4
- Form Management: React Hook Form
- Validation: Zod
- Language: TypeScript
- Email Service: Resend
Before you begin, ensure you have the following installed:
- Node.js (version 20 or higher recommended)
- npm or yarn
- A database (PostgreSQL, MySQL, or SQLite)
- Resend API key for email functionality
- Clone the repository:
git clone <your-repo-url>
cd auth-master- Install dependencies:
npm install- Set up your environment variables:
Create a
.envfile in the root directory and add the following:
# Database
DATABASE_URL="your-database-connection-string"
# NextAuth
NEXTAUTH_SECRET="your-nextauth-secret"
NEXTAUTH_URL="http://localhost:3000"
# Email Service
RESEND_API_KEY="your-resend-api-key"
# Optional: OAuth Providers
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"- Set up the database:
npx prisma generate
npx prisma db push- (Optional) Seed the database:
npx prisma db seednpm run dev- Start the development server on http://localhost:3000npm run build- Create an optimized production buildnpm start- Start the production servernpm run lint- Run ESLint to check code qualitynpx prisma studio- Open Prisma Studio to view/edit database
auth-master/
├── app/ # Next.js app directory
│ ├── (protected)/ # Protected routes (require auth)
│ ├── auth/ # Authentication pages
│ └── api/ # API routes
├── components/ # React components
│ ├── auth/ # Authentication components
│ └── ui/ # Reusable UI components
├── lib/ # Utility functions and configurations
├── actions/ # Server actions
├── prisma/ # Prisma schema and migrations
├── public/ # Static assets
└── hooks/ # Custom React hooks
- Users can enable 2FA from their settings
- Token-based verification system
- Secure token generation and validation
- Time-limited tokens for enhanced security
- Automatic email sending on registration
- Click-to-verify token system
- Token expiration handling
- Resend verification option
- Secure token-based credential verification
- Email and password validation
- Token lifecycle management
- Automatic cleanup of expired tokens
- Automatic authentication checks
- Role-based access control
- Redirect to login for unauthenticated users
- Admin-only routes protection
- next: 16.0.1 - React framework for production
- react: 19.2.0 - UI library
- next-auth: 5.0.0-beta.30 - Authentication solution
- @prisma/client: 6.19.0 - Database client
Complete set of accessible, unstyled UI primitives including:
- Dialog, Dropdown Menu, Popover
- Accordion, Tabs, Navigation Menu
- Form elements (Checkbox, Radio, Select, Slider, Switch)
- Avatar, Tooltip, Alert Dialog
- And many more...
- react-hook-form: 7.66.0 - Performant form library
- zod: 4.1.12 - TypeScript-first schema validation
- @hookform/resolvers: 5.2.2 - Form validation resolvers
- tailwindcss: 4.0 - Utility-first CSS framework
- tailwind-merge: 3.4.0 - Merge Tailwind classes
- class-variance-authority: 0.7.1 - Create variant components
- lucide-react: 0.553.0 - Beautiful icon set
- bcrypt/bcryptjs: Password hashing
- resend: Email service integration
- date-fns: Date utility library
- sonner: Toast notifications
- recharts: Chart library for data visualization
This project uses Prisma as the ORM. To set up your database:
- Update your
DATABASE_URLin.env - Run migrations:
npx prisma migrate dev- Open Prisma Studio to view your data:
npx prisma studio- User accounts with email verification
- Two-factor authentication tokens
- Password reset tokens
- Session management
- Role-based permissions
NextAuth.js v5 is configured with:
- Prisma adapter for database sessions
- Credentials provider for email/password login
- OAuth providers support (GitHub, Google)
- Secure session management
- Email verification capabilities
- Two-factor authentication flow
Start the development server:
npm run devOpen http://localhost:3000 in your browser to see the application.
- Hot Module Replacement (HMR)
- Fast Refresh for instant feedback
- TypeScript error checking
- ESLint for code quality
- Prisma Studio for database management
Create an optimized production build:
npm run build
npm startThe build process includes:
- Code minification
- Tree shaking
- Image optimization
- Static page generation where possible
This project implements:
- ✅ Password hashing with bcrypt
- ✅ CSRF protection
- ✅ SQL injection prevention (Prisma)
- ✅ XSS protection
- ✅ Secure session management
- ✅ Token-based verification
- ✅ Rate limiting ready
- ✅ Environment variable security
- Social OAuth providers (GitHub, Google)
- Rate limiting for API routes
- Account lockout after failed attempts
- Audit logs for security events
- Password strength meter
- Remember device functionality
- API key management
- Webhook integrations
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is private and not licensed for public use.
For support, please open an issue in the repository or contact the maintainers.
Ashutosh Kumar Rao
A passionate developer focused on building secure, modern web applications with cutting-edge technologies.
- Next.js team for the amazing framework
- NextAuth.js for authentication solution
- Shadcn UI for accessible components
- Tailwind CSS for utility-first styling
- Prisma for the excellent ORM
Built with ❤️ by Ashutosh Kumar Rao using Next.js, NextAuth.js, and modern web technologies