User Authentication System

A modern, secure, and responsive user authentication system built with Next.js, NextAuth.js, and Prisma.

Features

• 🔐 Email/Password authentication
• 🌐 Google OAuth integration
• 🛡️ Protected routes with middleware
• ✨ Modern UI with Tailwind CSS
• 📱 Fully responsive design
• 🔄 Real-time form validation
• 🚀 Server-side rendering
• 🛠️ TypeScript support
• 🔄 Session management
• 🔄 Password hashing with bcrypt
• 🛡️ XSS protection
• ⏱️ Rate limiting

Tech Stack

• Frontend: Next.js 14, React 18, TypeScript, Tailwind CSS
• Backend: Next.js API Routes
• Authentication: NextAuth.js
• Database: PostgreSQL with Prisma ORM
• Styling: Tailwind CSS, Framer Motion
• Form Handling: React Hook Form with Zod validation
• Icons: Lucide React

Prerequisites

• Node.js 18.0.0 or later
• npm or yarn
• PostgreSQL database
• Google OAuth credentials (for Google Sign-In)

Getting Started

1. Clone the repository

   git clone https://github.com/yourusername/users-authentication.git
   cd users-authentication

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables Create a .env.local file in the root directory and add the following variables:

   DATABASE_URL="postgresql://user:password@localhost:5432/yourdb"
   NEXTAUTH_SECRET=your-secret-key
   NEXTAUTH_URL=http://localhost:3000
   
   # Google OAuth
   GOOGLE_CLIENT_ID=your-google-client-id
   GOOGLE_CLIENT_SECRET=your-google-client-secret
   
   # Mailgun SMTP
   EMAIL_SERVER_HOST=smtp.your-email-server-host
   EMAIL_SERVER_PORT=your-email-server-port
   EMAIL_SERVER_USER=your-email-server-user
   EMAIL_SERVER_PASSWORD=your-email-server-password
   EMAIL_FROM=your-email-from

4. Set up the database

   npx prisma generate
   npx prisma migrate dev

5. Run the development server

   npm run dev
   # or
   yarn dev

   Open http://localhost:3000 in your browser to see the application.

Project Structure

.
├── app/
│   ├── (auth)/               # Authentication pages
│   │   ├── sign-in/          # Sign in page
│   │   └── sign-up/          # Sign up page
│   ├── api/                  # API routes
│   │   └── auth/             # Authentication API routes
│   ├── dashboard/            # Protected dashboard
│   └── profile/              # User profile
├── components/               # Reusable components
├── lib/                      # Utility functions
├── prisma/                   # Prisma schema and migrations
└── public/                   # Static files

Security Features

• Password hashing with bcrypt
• CSRF protection
• Rate limiting on authentication endpoints
• Secure HTTP headers
• XSS protection
• Secure session management
• Environment variable validation

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Acknowledgments

• Next.js Documentation
• NextAuth.js Documentation
• Prisma Documentation
• Tailwind CSS Documentation