🔐 NextAuth v5 OAuth Authentication

🔧 Tech Stack ⚙️

                    

This is a Next.js 15 authentication project using NextAuth v5 with OAuth providers (GitHub, Google, etc.) and MongoDB Atlas for database management.

• 🌟 Features

• ✅ OAuth Providers: Google, GitHub & More

• 🔒 Protected Routes with Middleware

• 🎨 Tailwind CSS Styled

• 🛡️ Session Encryption & CSRF Protection

• 📦 Prisma ORM with MongoDB Atlas

🛠️ Tech Stack

• Next.js 15 (App Router)
• NextAuth.js v5
• MongoDB Atlas (Database)
• Prisma ORM
• Tailwind CSS (Styling)

🗂️ Project Architecture

📦 nextauth-v5-oauth-auth
├── 📜 Core Foundation
│   ├── next.config.ts       # ⚙️ Next.js Advanced Config
│   ├── tailwind.config.ts   # 🎨 Design System Setup
│   └── tsconfig.json        # 🛠️ TypeScript Rules
│
├── 🔐 Auth Infrastructure
│   ├── prisma/schema.prisma # 🗃️ Database Schema
│   ├── src/auth.ts          # 🔑 Auth Configuration
│   └── src/middleware.ts    # 🛡️ Security Layer
│
├── ⚡️ Action Controllers
│   └── src/actions/
│       ├── formActions.ts   # 📝 Form Handling
│       └── postActions.ts   # 📮 Content Management
│
├── 🎨 UI Components
│   ├── public/              # 📁 Static Assets
│   └── src/app/
│       ├── components/      # 🧩 Atomic Design System
│       └── globals.css      # 🌈 Global Styles
│
├── 🌐 API Gateway
│   └── src/app/api/
│       └── auth/
│           ├── [...nextauth] # 🔗 NextAuth Core
│           ├── login/        # 🖋️ Custom Auth Flow
│           └── signup/       # 📝 Registration Handler
│
└── 🛠️ Development Toolkit
    ├── .env.example         # 📋 Configuration Template
    ├── eslint.config.mjs    # ✨ Code Quality
    └── postcss.config.mjs   # 🎨 CSS Processing

🛠️ Installation & Setup

1️⃣ Clone the repository

git clone https://github.com/AbbasRostami/nextauth-v5-oauth-authentication.git
cd nextauth-v5-oauth-authentication

2️⃣ Install dependencies

yarn install  # or npm install

3️⃣ Set up environment variables

Create a .env.local file and copy the values from .env.example, then update them with your credentials.

# Create environment file
cp .env.example .env.local

🛡️ NextAuth Configuration

NEXTAUTH_SECRET="your_ultra_secure_secret_key"  # Generate using: openssl rand -base64 32
NEXTAUTH_URL=http://localhost:3000             # Development URL
NEXTAUTH_TRUST_HOST=true                       # Enable in development

# 🔑 Authentication Providers
# ============================

# 🐙 GitHub OAuth
GITHUB_CLIENT_ID="your_github_oauth_client_id"
GITHUB_CLIENT_SECRET="your_github_oauth_client_secret"

# 📧 Google OAuth
AUTH_GOOGLE_ID="your_google_oauth_client_id.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="your_google_oauth_client_secret"

# 🗄️ Database Configuration
# =========================
DATABASE_URL="mongodb+srv://<username>:<password>@cluster.mongodb.net/<dbname>?retryWrites=true&w=majority"

# 🔒 Security Tokens
# ==================
JWT_SECRET="your_jwt_encryption_key"  # Generate using: openssl rand -base64 32

# 🌐 API Configuration
# ====================
NEXT_PUBLIC_API_URL="http://localhost:3000"

4️⃣ Run the project

yarn dev  # or npm run dev

Application will be running at: http://localhost:3000

sequenceDiagram
    participant User
    participant Client
    participant Server
    participant NextAuth
    participant Prisma
    participant Middleware

    User->>Client: Submit Credentials
    Client->>Server: POST /api/auth/[action]
    activate Server
    
    Server->>NextAuth: Process Request
    activate NextAuth
    NextAuth->>Prisma: Query Database
    activate Prisma
    Prisma-->>NextAuth: User Data
    deactivate Prisma
    
    alt Valid
        NextAuth->>Client: Set HttpOnly Cookie
    else Invalid
        NextAuth->>Client: Error Response
    end
    deactivate NextAuth
    deactivate Server

    Client->>Middleware: Request Route
    activate Middleware
    Middleware->>NextAuth: Verify Session
    activate NextAuth
    NextAuth-->>Middleware: Session Status
    deactivate NextAuth
    
    alt Valid
        Middleware->>Server: Forward Request
        Server->>Client: Protected Content
    else Invalid
        Middleware->>Client: Redirect
    end
    deactivate Middleware

Loading

🏗️ Core Architecture

🔄 Authentication Flow

📡 API Endpoints

Endpoint	Method	Description
/api/auth/login	POST	User login with JWT issuance
/api/auth/signup	POST	New user registration

🔑 Authentication Providers

This project uses NextAuth v5 for authentication. You can add more OAuth providers by modifying src/auth.ts.

🔐 Protected Routes

Some routes (/posts, /users) are protected and require authentication. Middleware in middleware.ts handles access control.

📜 License

This project is open-source and available under the MIT License.

---

Happy Coding! 🚀
Developed with ❤️ by Abbas Rostami