My-Weekly-ToDo-List/.planning/phases/01-setup-and-authentication/01-01-PLAN.md

---
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)"
---

<objective>
Set up the foundational authentication system for the weekly task management application including signup, login, and logout functionality with secure session management.
</objective>

<execution_context>
@~/.config/opencode/get-shit-done/workflows/execute-plan.md
@~/.config/opencode/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/research/ARCHITECTURE.md
@.planning/research/STACK.md
</context>

<tasks>

<task type="auto">
  <name>Setup Prisma User Model</name>
  <files>prisma/schema.prisma</files>
  <action>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).</action>
  <verify>Run `npx prisma generate` and verify no errors occur</verify>
  <done>Prisma schema file contains valid User model with required fields and constraints</done>
</task>

<task type="auto">
  <name>Create Auth API Routes</name>
  <files>src/app/api/auth/signup/route.ts, src/app/api/auth/login/route.ts, src/app/api/auth/logout/route.ts</files>
  <action>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.</action>
  <verify>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</verify>
  <done>Three API routes created with proper authentication logic and token handling</done>
</task>

<task type="auto">
  <name>Create Auth Form Component</name>
  <files>src/components/AuthForm.tsx</files>
  <action>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</action>
  <verify>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</verify>
  <done>AuthForm component renders correctly with all required functionality and responsive design</done>
</task>

</tasks>

<verification>
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.
</verification>

<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>

<output>
After completion, create `.planning/phases/01-setup-and-authentication/01-01-SUMMARY.md`
</output>