SecureApp - Next.js Authentication System

A modern authentication system built with Next.js 13+, featuring multiple sign-in methods and a beautiful, responsive UI using Tailwind CSS and shadcn/ui components.

Features

• 🔐 Multiple authentication providers:
  • Email Magic Links
  • GitHub OAuth
  • Google OAuth
• 🎨 Modern UI with Tailwind CSS and shadcn/ui
• 🌓 Dark mode support
• 📱 Fully responsive design
• ⚡ Server-side rendering with Next.js 13+
• 🔒 Protected routes with middleware
• 🚀 Type-safe with TypeScript

Prerequisites

• Node.js 16.8 or later
• npm or yarn package manager

Getting Started

1. Clone the repository

2. Install dependencies:

   npm install
   

3. Set up environment variables by creating a .env file in the root directory:

   # Auth Providers
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your-secret-key-at-least-32-chars
   
   # GitHub OAuth
   GITHUB_ID=your-github-client-id
   GITHUB_SECRET=your-github-client-secret
   
   # Google OAuth
   GOOGLE_ID=your-google-client-id
   GOOGLE_SECRET=your-google-client-secret
   
   # Email (Magic Link) Provider
   EMAIL_SERVER=smtp://localhost:1025
   EMAIL_FROM=noreply@yourdomain.com
   
   # Database
   DATABASE_URL=your-database-url
   

4. Run the development server:

   npm run dev
   

5. Open http://localhost:3000 in your browser.

OAuth Provider Setup

GitHub OAuth

1. Go to GitHub Developer Settings
2. Create a new OAuth App
3. Set the homepage URL to http://localhost:3000
4. Set the callback URL to http://localhost:3000/api/auth/callback/github
5. Copy the Client ID and Client Secret to your .env file

Google OAuth

1. Go to the Google Cloud Console
2. Create a new project
3. Enable the Google+ API
4. Configure the OAuth consent screen
5. Create OAuth 2.0 credentials
6. Set the authorized redirect URI to http://localhost:3000/api/auth/callback/google
7. Copy the Client ID and Client Secret to your .env file

Email Provider Setup

1. If using Gmail:

   • Enable 2-factor authentication
   • Generate an app-specific password
   • Use this password in your .env file

2. If using Resend:

   • Sign up for a Resend account
   • Obtain your SMTP credentials from the Resend dashboard
   • Use these credentials in your .env file
   • Example: EMAIL_SERVER=smtp://<username>:<password>@smtp.resend.com:587

3. Update the EMAIL_FROM address in your .env file

Prisma Setup

Prisma is used as the ORM (Object-Relational Mapping) tool in this project to interact with the database. It provides a type-safe database client and a powerful schema-based approach to database management.

Setting Up Prisma

1. Ensure your database is running and accessible.
2. Update the DATABASE_URL in your .env file with your database connection string.
3. Run the following command to generate the Prisma client:

   npx prisma generate
   

4. To apply any schema changes to your database, run:

   npx prisma migrate dev --name init
   

Prisma Schema

The Prisma schema is defined in prisma/schema.prisma. It includes models for User, Account, Session, and VerificationToken, which are used to manage authentication and user sessions.

Project Structure

├── app/                    # Next.js 13+ app directory
│   ├── api/               # API routes
│   ├── auth/              # Authentication pages
│   └── ...                # Other app routes
├── components/            # React components
│   ├── auth/             # Authentication components
│   ├── layout/           # Layout components
│   └── ui/               # UI components
├── lib/                   # Utility functions and configurations
│   ├── auth.ts           # Authentication configuration
│   └── json-file-adapter.ts  # Custom NextAuth.js adapter
├── data/                 # Data storage
│   └── auth.json         # Authentication data store
└── types/                # TypeScript type definitions

Authentication Flow

1. User visits the sign-in page
2. User chooses an authentication method:
   • Email Magic Link
   • GitHub OAuth
   • Google OAuth
3. After successful authentication:
   • Session is created
   • User is redirected to the homepage
   • Protected routes become accessible

Security Features

• CSRF Protection
• HTTP-only cookies
• Secure session handling
• Protected API routes
• Type-safe authentication

Built With

• Next.js - React framework
• NextAuth.js - Authentication
• Tailwind CSS - CSS framework
• shadcn/ui - UI components
• Lucide Icons - Icons
• TypeScript - Type safety
• Prisma - ORM for database management

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

Support

For support, please open an issue in the repository.