UNPKG

create-auth-js-boiler

Version:
192 lines (150 loc) • 5.59 kB
# Auth JS Boiler šŸ” A modern, full-stack authentication boilerplate built with Next.js, Auth.js (formerly Next-Auth), Prisma, and TypeScript. Stop rebuilding authentication systems from scratch for every project! <p align="center"> <img alt="Version" src="https://img.shields.io/badge/version-0.1.0-blue.svg"/> <img alt="License" src="https://img.shields.io/badge/license-MIT-green.svg"/> </p> <h2 align="center"> <a href="https://github.com/Mohamed-gp/auth-js-boiler"> <b>Complete Authentication Solution</b> </a> </h2> ## šŸŽ„ Demo https://github.com/user-attachments/assets/f1bf4f2e-c66f-4be5-9cf7-5f9c17c7c23c ## ✨ Features - šŸ”’ **Complete Authentication Flow** - Email & Password Sign Up/Sign In - Email Verification - Forgot Password & Password Reset - Account Settings & Profile Management - 🌐 **OAuth Integration** - Google Authentication - GitHub Authentication - Easily extendable to other providers - šŸ›”ļø **Enhanced Security** - Two-Factor Authentication (2FA) - Role-Based Access Control (User, Admin, Moderator) - CSRF Protection - Rate Limiting - šŸ’¾ **Database & Storage** - PostgreSQL integration with Prisma ORM - Structured data models for User, Account, Session - šŸŽØ **Polished UI Components** - Responsive design with Tailwind CSS - Shadcn UI component library integration - Form validation with Zod & React Hook Form - šŸ“§ **Email Services** - Verification emails - Password reset emails - Customizable email templates - āš™ļø **User Settings Page** - Profile information management - Password changing functionality - Two-factor authentication toggle - Special handling for OAuth users - šŸš€ **Production-Ready** - Optimized for performance - Docker support for easy deployment - Comprehensive TypeScript types ## šŸ› ļø Tech Stack - **Frontend**: Next.js 15, React 19, TypeScript - **Styling**: Tailwind CSS, Shadcn UI (Radix UI) - **Authentication**: Auth.js v5 (Next-Auth) - **Database**: PostgreSQL with Prisma ORM - **Form Handling**: React Hook Form with Zod validation - **Utility Libraries**: - bcryptjs (password hashing) - nodemailer (email sending) - lucide-react (icons) ## šŸš€ Getting Started ### Prerequisites - Node.js 18+ and npm/yarn/pnpm - PostgreSQL database ### Installation 1. Clone the repository ```bash git clone https://github.com/Mohamed-gp/auth-js-boiler.git cd auth-js-boiler ``` 2. Install dependencies ```bash npm install # or yarn install # or pnpm install ``` 3. Configure environment variables ```bash cp .env.example .env.local # Edit .env.local with your configuration ``` 4. Set up the database ```bash npm run prisma:generate npm run prisma:push ``` 5. Start the development server ```bash npm run dev ``` ## šŸ“‹ Available Scripts - `npm run dev` - Start the development server - `npm run build` - Build the application for production - `npm run start` - Start the production server - `npm run lint` - Run ESLint to check for code issues ### Prisma Commands - `npm run prisma:studio` - Open Prisma Studio to manage your database - `npm run prisma:generate` - Generate Prisma client - `npm run prisma:migrate` - Create and apply migrations - `npm run prisma:push` - Push schema changes without migrations - `npm run prisma:pull` - Pull the current database schema - `npm run prisma:seed` - Seed the database with initial data - `npm run prisma:format` - Format the schema file - `npm run prisma:reset` - Reset the database (use with caution) ## 🧩 Project Structure ``` auth-js-boiler/ ā”œā”€ā”€ prisma/ # Database schema and migrations ā”œā”€ā”€ public/ # Static assets ā”œā”€ā”€ src/ │ ā”œā”€ā”€ actions/ # Server actions for forms and API │ ā”œā”€ā”€ app/ # Next.js app router │ │ ā”œā”€ā”€ api/ # API routes │ │ ā”œā”€ā”€ auth/ # Authentication pages │ │ └── admin/ # Admin dashboard │ ā”œā”€ā”€ components/ # React components │ │ ā”œā”€ā”€ ui/ # UI components (shadcn) │ │ └── form/ # Form components │ ā”œā”€ā”€ lib/ # Utility functions │ ā”œā”€ā”€ schemas/ # Zod validation schemas │ └── types/ # TypeScript type definitions ā”œā”€ā”€ tailwind.config.ts # Tailwind configuration └── next.config.mjs # Next.js configuration ## šŸ”’ Authentication Flow The authentication system includes: 1. **Registration** - Create account with email/password 2. **Email Verification** - Verify email with token 3. **Login** - Sign in with credentials or OAuth providers 4. **2FA** - Optional two-factor authentication 5. **Password Reset** - Forgot password flow 6. **Session Management** - JWT-based sessions ## šŸ›£ļø Roadmap - [ ] Add more OAuth providers - [ ] Implement WebAuthn support - [ ] Add Magic Link authentication - [ ] Create comprehensive documentation site - [ ] Add more role-based templates ## šŸ¤ Contributing Contributions are welcome! Please feel free to submit a Pull Request. ## šŸ“„ License This project is licensed under the MIT License - see the LICENSE file for details. ## šŸ™ Acknowledgements - [Next.js](https://nextjs.org/) - [Auth.js](https://authjs.dev/) - [Prisma](https://prisma.io/) - [Tailwind CSS](https://tailwindcss.com/) - [Shadcn UI](https://ui.shadcn.com/) --- Built with ā¤ļø to save developers time and headaches. ```