Phase 01: Setup & Authentication - [3] plan(s) in [2] wave(s) - [2] parallel, [1] sequential - Ready for execution
5.5 KiB
5.5 KiB
phase: 01-setup-and-authentication
plan: 01
type: execute
wave: 1
depends_on: []
files_modified: [src/app/api/auth/signup/route.ts, src/app/api/auth/login/route.ts, src/app/api/auth/logout/route.ts, src/components/AuthForm.tsx, src/app/auth/signup/page.tsx, src/app/auth/login/page.tsx, prisma/schema.prisma]
autonomous: true
user_setup: []
must_haves:
truths:
- "User can create an account with email/password"
- "User can log in with email/password"
- "User can stay logged in across browser sessions"
- "User interface loads and displays correctly on desktop and tablet devices"
artifacts:
- path: "src/app/api/auth/signup/route.ts"
provides: "POST /api/auth/signup endpoint"
exports: ["POST"]
- path: "src/app/api/auth/login/route.ts"
provides: "POST /api/auth/login endpoint"
exports: ["POST"]
- path: "src/app/api/auth/logout/route.ts"
provides: "POST /api/auth/logout endpoint"
exports: ["POST"]
- path: "src/components/AuthForm.tsx"
provides: "Reusable authentication form component"
min_lines: 30
- path: "prisma/schema.prisma"
provides: "User model"
contains: "model User"
key_links:
- from: "src/app/auth/signup/page.tsx"
to: "/api/auth/signup"
via: "form submission"
pattern: "fetch./api/auth/signup"
- from: "src/app/auth/login/page.tsx"
to: "/api/auth/login"
via: "form submission"
pattern: "fetch./api/auth/login"
- from: "src/app/api/auth/login/route.ts"
to: "prisma.user"
via: "database query"
pattern: "prisma\.user\.(find|create)"
Set up the foundational authentication system for the weekly task management application including signup, login, and logout functionality with secure session management.
<execution_context> @~/.config/opencode/get-shit-done/workflows/execute-plan.md @~/.config/opencode/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/research/ARCHITECTURE.md @.planning/research/STACK.md Setup Prisma User Model prisma/schema.prisma Create Prisma schema for User model with id, email, passwordHash, verifiedAt, createdAt, updatedAt fields. Add unique constraint on email. Configure SQLite for development (will switch to PostgreSQL later). Run `npx prisma generate` and verify no errors occur Prisma schema file contains valid User model with required fields and constraints Create Auth API Routes src/app/api/auth/signup/route.ts, src/app/api/auth/login/route.ts, src/app/api/auth/logout/route.ts Create three API routes in the /api/auth folder: 1. POST /api/auth/signup - accept {email, password}, hash password with bcrypt, create user in database, return JWT token in httpOnly cookie with 15-min expiry 2. POST /api/auth/login - accept {email, password}, verify credentials against database, return JWT token in httpOnly cookie with 15-min expiry 3. POST /api/auth/logout - clear auth cookie to log out user Use jose library for JWT handling (not jsonwebtoken - CommonJS issues with Edge runtime). Use bcrypt for password hashing. Run `npm run dev` and test each endpoint using curl: - curl -X POST http://localhost:3000/api/auth/signup -H "Content-Type: application/json" -d '{"email":"test@example.com","password":"password123"}' - curl -X POST http://localhost:3000/api/auth/login -H "Content-Type: application/json" -d '{"email":"test@example.com","password":"password123"}' - curl -X POST http://localhost:3000/api/auth/logout Three API routes created with proper authentication logic and token handling Create Auth Form Component src/components/AuthForm.tsx Create a reusable AuthForm component that accepts props for: - Form type ('signup' or 'login') - Loading state - Submit handler function - Error message display Implement responsive design using Tailwind CSS with: - Clean, minimal UI similar to TeuxDeux - Email and password fields with validation - Submit button with loading state - Error message display area - Proper form field labeling for accessibility Run `npm run dev` and verify component renders correctly in browser with: - Correct form fields - Responsive styling on different screen sizes - Form validation messages - Proper accessibility attributes AuthForm component renders correctly with all required functionality and responsive design Verify that all authentication endpoints work correctly, the UI components render properly across devices, and session management functions as expected. Test signup, login, and logout flows end-to-end.<success_criteria>
- User can successfully create an account with valid email/password
- User can log in with registered credentials
- User session persists across browser refreshes (verified via cookie handling)
- Application interface loads and displays correctly on desktop and tablet devices
- All authentication endpoints return appropriate HTTP status codes and responses
- Passwords are properly hashed before storage </success_criteria>