Role-Based Access Control Web Application

A modern web application built with Next.js that implements role-based access control (RBAC) functionality, providing secure user authentication and authorization management.

Features

• 🔐 User Authentication - Secure login and logout functionality
• 👥 Role-Based Access Control - Different user roles with varying permissions
• 🛡️ Route Protection - Middleware-based route protection
• 📱 Responsive Design - Modern UI with Tailwind CSS
• 🧪 End-to-End Testing - Comprehensive test coverage with Playwright
• ⚡ Performance Optimized - Built with Next.js 15 and Turbopack

Tech Stack

• Framework: Next.js 15
• Runtime: React 19
• Styling: Tailwind CSS 4
• Authentication: JWT with jose library
• Testing: Playwright
• TypeScript: Full type safety
• Build Tool: Turbopack for fast development

Project Structure

src/
├── app/
│   ├── admin/           # Admin dashboard pages
│   ├── api/            # API routes for authentication
│   ├── dashboard/      # User dashboard pages
│   ├── login/          # Login page and components
│   ├── no-access/      # Access denied page
│   ├── auth-context.tsx # Authentication context
│   ├── Menu.tsx        # Navigation menu component
│   └── menuConfig.ts   # Menu configuration
├── middleware.ts       # Route protection middleware
└── utils/
    └── routeRoles.ts   # Role-based route definitions

Getting Started

Prerequisites

• Node.js 18 or later
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository:

git clone <repository-url>
cd role-based-access-control-web

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Run ESLint for code quality
• npm run test:e2e - Run Playwright end-to-end tests
• npm run test:e2e:ui - Run tests with Playwright UI
• npm run test:e2e:headed - Run tests in headed mode
• npm run test:e2e:debug - Debug tests with Playwright
• npm run test:e2e:manual - Run manual testing configuration

Authentication & Authorization

The application implements a comprehensive RBAC system:

User Roles

• Admin: Full system access
• User: Limited dashboard access
• Viewer: Read-only access

Protected Routes

Routes are protected using Next.js middleware, which:

• Validates JWT tokens
• Checks user roles and permissions
• Redirects unauthorized users to appropriate pages

API Endpoints

• POST /api/login - User authentication
• POST /api/logout - User logout
• GET /api/me - Get current user information

Testing

The project includes comprehensive end-to-end testing with Playwright covering authentication flows, access control scenarios, navigation functionality, API endpoints, and performance metrics.

Environment Setup for Testing

Before running tests, ensure you have the proper environment setup:

# Create environment file if it doesn't exist
echo "JWT_SECRET=your-super-secret-jwt-key-for-testing-12345" > .env.local

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install chromium

🚀 Manual Testing Steps (Recommended)

Due to potential webServer auto-start issues, manual testing is recommended:

Step 1: Start Development Server

In the first terminal window:

npm run dev

Wait for the server to start completely. You should see output like:

▲ Next.js 15.3.4
- Local:        http://localhost:3000
✓ Ready in 2.1s

Step 2: Run Tests

In a second terminal window:

# Run all tests
npx playwright test --config=playwright.manual.config.ts

# Run specific test file
npx playwright test --config=playwright.manual.config.ts e2e/basic.spec.ts

# Use UI mode (recommended for debugging)
npx playwright test --config=playwright.manual.config.ts --ui

# Run with browser visible
npx playwright test --config=playwright.manual.config.ts --headed

🔧 Automated Test Script

For convenience, you can also use the automated test script:

# Run all tests automatically
npm run test:e2e

# Run tests with UI
npm run test:e2e:ui

# Debug tests
npm run test:e2e:debug

📋 Pre-Test Checklist

Before running tests, ensure:

• ✅ .env.local file exists with JWT_SECRET
• ✅ All dependencies installed (npm install)
• ✅ Playwright browsers installed (npx playwright install)
• ✅ Application builds successfully (npm run build)

🎯 Test Suites

1. Basic Tests (e2e/basic.spec.ts) - Application core functionality
2. Authentication (e2e/auth.spec.ts) - Login/logout workflows
3. Access Control (e2e/access-control.spec.ts) - Role-based permissions
4. Navigation (e2e/navigation.spec.ts) - UI navigation and interface
5. API Tests (e2e/api.spec.ts) - Backend endpoint validation
6. Performance (e2e/performance.spec.ts) - Page load performance

🐛 Debugging Tips

1. Use --headed to see browser actions in real-time
2. Use --ui for interactive debugging mode
3. Add await page.pause() in test code for breakpoints
4. View test reports: npx playwright show-report
5. Check browser console logs in headed mode

📈 Continuous Integration

Tests are configured to run automatically in GitHub Actions. The CI pipeline will:

• Set up the environment
• Install dependencies and browsers
• Build the application
• Run the full test suite
• Generate and publish test reports

Development

Code Quality

• ESLint configuration for code standards
• TypeScript for type safety
• Tailwind CSS for consistent styling

Environment Setup

The application supports various environment configurations for development, testing, and production.

Deployment

Build for Production

npm run build
npm run start

Deploy on Vercel

The easiest way to deploy is using the Vercel Platform:

1. Connect your repository to Vercel
2. Configure environment variables
3. Deploy automatically on every push

License

This project is private and proprietary.

Support

For support and questions, please open an issue in the repository.