Project Summary - SecureAuth Multi-Device Session Management

Overview

This project is a production-ready Next.js application that implements secure multi-device authentication with Auth0 and intelligent device session management using Supabase. Users can be logged in on a maximum of 3 devices simultaneously (N=3). When attempting to login from a 4th device, users must select which existing device to force logout.

Key Features Implemented

1. Auth0 Authentication

• Secure login/signup with Auth0
• OAuth 2.0 / OpenID Connect
• Session management via Auth0 SDK
• Protected routes with server-side validation

2. N-Device Concurrency Control (N=3)

• Maximum 3 concurrent active sessions per user
• Unique device fingerprinting using FingerprintJS
• Device identification with browser and OS detection
• Real-time session tracking in Supabase

3. Device Selection Modal

• Appears when 4th device attempts login
• Shows all 3 currently active devices with:
  • Device name (browser + OS)
  • Last activity timestamp
  • Visual device icons
• User selects which device to logout
• Cancel option to abort login

4. Force Logout with Graceful Notification

• Selected device immediately invalidated in database
• Active devices check their session every 10 seconds
• Force-logged-out devices show immediate alert:
  • "Session Terminated" message
  • Explanation of what happened
  • Redirect to login page
• No data loss or abrupt disconnection

5. User Dashboard

• Private page showing:
  • Full name
  • Email address
  • Phone number (if provided in Auth0)
  • Profile picture/avatar
  • Active device sessions
  • Current device indicator
  • Session statistics

6. Professional UI/UX

• Modern, clean design with Tailwind CSS
• shadcn/ui component library
• Responsive layout (mobile, tablet, desktop)
• Smooth animations and transitions
• Loading states
• Error handling
• Professional color scheme (slate/neutral tones)

Technical Architecture

• Authentication: Auth0
• Database: Supabase PostgreSQL
• API Routes: Next.js API Routes
• Hosting: Vercel

Database Schema

Table: device_sessions

- id (uuid, primary key)
- user_id (text, Auth0 sub)
- device_id (text, unique fingerprint)
- device_name (text, human-readable)
- ip_address (text)
- user_agent (text)
- last_activity (timestamptz)
- created_at (timestamptz)
- is_active (boolean)
- UNIQUE(user_id, device_id)