Spectra is a Next.js 15+ application designed primarily for Overwatch 2 e-sport team management—including rosters, schedules, and admin tooling—while showcasing a robust, reusable custom authentication system. Its modular auth logic (featuring sessions, CSRF tokens, email verification, and rate-limiting) can be easily ported or adapted into other Next.js projects.
- Overview
- Features
- Tech Stack
- Project Structure
- Getting Started
- Scripts
- Deployment
- Authentication Flow
- Security Considerations
- Contributing
- License
- Additional Resources
Spectra is a Next.js website that manages an Overwatch 2 e-sport team—from rosters to user roles and schedules—backed by a bespoke, self-contained auth system. While the site itself is dedicated to Overwatch 2 management, the authentication logic (short-lived sessions, email verification, etc.) is modular enough for you to lift and integrate into your own Next.js applications.
Key Highlights:
- Tailored for Overwatch 2 team management but adaptable to any team-based or membership scenario.
- Reusable authentication layer that uses short-lived sessions, rate-limiting, and secure email verification.
- Offers advanced admin features like user role management, invite-only registration, session revocation, and more.
-
Team Management
- Create and maintain Overwatch 2 rosters, including roles (DPS, Tank, Support), coaches, and subs.
- Admin dashboards to oversee player stats, replays, schedules, etc.
-
Custom Auth System
- Registration with optional invite-only workflow.
- Passwords hashed via bcrypt.
- Email verification links and forced email validation.
-
Sessions & CSRF
- Short-lived httpOnly session cookies with sliding expiration.
- Per-session CSRF token to thwart cross-site request forgery attacks.
-
Rate Limiting
- Upstash Ratelimit protects against brute-force login attempts.
-
GeoIP & Analytics (Optional)
- Integrates MaxMind GeoIP2 for approximate user location.
-
Email Services
- Transactional emails managed by Resend.
- Next.js 15+ (App Router)
- TypeScript
- Prisma + PostgreSQL
- Bcrypt for password hashing
- Upstash Redis & Ratelimit for login security
- GeoIP2 for optional location lookups
- Resend for emails
- Tailwind CSS for UI
- Zod for schema validation
- Deployed on Vercel or any Next.js-friendly platform
Here's a quick look at the repo:
spectra/
├── app/ # Next.js App Router
│ ├── (auth)/ # Auth pages (sign-in, sign-up, reset password, etc.)
│ ├── (home)/ # Public pages (news, roster, etc.)
│ ├── dashboard/ # Protected admin/team management
│ ├── api/ # Route handlers (e.g., /api/auth/login)
│ ├── middleware.ts # Session & auth checks
│ └── ...
├── components/ # UI components (forms, nav, etc.)
├── hooks/ # Custom React hooks
├── lib/ # Core utilities (prisma, redis, email, auth logic, etc.)
├── prisma/ # Prisma schema & migrations
├── public/ # Static assets
├── types/ # TS type definitions
├── .env.example
├── package.json
├── tailwind.config.ts
└── README.md- Node.js 18+
- PostgreSQL (local or hosted)
- Upstash Redis (optional but recommended for rate-limiting)
git clone https://github.com/Simon-Fontaine/spectra.gitcd spectra
npm install --legacy-peer-deps
# or yarn install / pnpm installCreate a .env.local (or use .env.example as reference):
DATABASE_URL="your-postgres-url"
UPSTASH_REDIS_REST_TOKEN="your-upstash-redis-token"
UPSTASH_REDIS_REST_URL="your-upstash-redis-url"
BLOB_READ_WRITE_TOKEN="your-vercel-blob-read-write-token"
JWT_SECRET="your-jwt-secret"
JWT_ISSUER="your-jwt-issuer"
JWT_AUDIENCE="your-jwt-audience"
RESEND_API_KEY="your-resend-api-key"
PULSE_API_KEY="(optional) for Prisma Pulse"
REGISTRATION_ENABLED=true
REGISTRATION_INVITE_ONLY=truenpx prisma migrate deploynpm run devOpen http://localhost:3000 to explore.
| Script | Description |
|---|---|
npm run dev |
Starts the local dev server (with turbopack). |
npm run build |
Builds production bundles for Next.js. |
npm run start |
Runs the app in production mode. |
npm run lint |
Lints the code with Biome/ESLint. |
You can deploy this project to Vercel or any Next.js-supporting platform:
- Ensure environment variables (in
.env.*) are set in your host’s config. - Run build scripts (
npm run build) or rely on your host’s auto-build. - Confirm your database, redis config, and email provider keys.
Once deployed, your Overwatch 2 team management site, along with its robust custom authentication, is live.
-
Registration
- Invite-based or open registration, depending on environment config.
- User picks a unique username, email, and password.
-
Email Verification
- A verification link is sent to the user’s email.
- Clicking it confirms the user’s email in the database.
-
Login
- On successful credential check, a short-lived session cookie + CSRF token is issued.
-
Session Management
- Sessions extend automatically if the user is active but expire after prolonged inactivity.
- CSRF tokens protect state-changing requests.
-
Logout
- Session is invalidated server-side, and client cookies are cleared.
- Password Hashing: Uses bcrypt to hash passwords.
- HTTP-Only Cookies: Session tokens are not accessible to JavaScript.
- CSRF Protection: Each session has a unique CSRF secret validated on requests.
- Rate Limiting: Helps thwart brute-force attempts on login endpoints.
- Sliding Expiration: Sessions refresh on activity but eventually expire if idle.
Contributions are welcome! Please:
- Fork the repository.
- Create a branch with your feature/fix.
- Make changes and commit.
- Open a PR to merge into
main.
Thank you for helping improve Spectra!
This project is licensed under the MIT License. Feel free to modify or adapt for commercial and personal use.
Enjoy your Overwatch 2 team management site with fully customizable authentication! If you run into any issues, feel free to open an issue or discussion.