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
  - src/types/auth.d.ts
autonomous: true
must_haves:
  truths:
    - User can create an account with email and password
    - User can log in with email and password
    - User can log out of the application
    - User session persists across browser refresh
  artifacts:
    - path: "src/app/api/auth/signup/route.ts"
      provides: "POST endpoint for user registration with password hashing"
      exports: ["POST"]
    - path: "src/app/api/auth/login/route.ts"
      provides: "POST endpoint for user authentication with password comparison"
      exports: ["POST"]
    - path: "src/app/api/auth/logout/route.ts"
      provides: "POST endpoint for user logout by clearing session cookie"
      exports: ["POST"]
    - path: "src/components/AuthForm.tsx"
      provides: "Reusable authentication form component with signup/login toggle"
      min_lines: 30
    - path: "src/app/auth/signup/page.tsx"
      provides: "Signup page component with form handling"
      min_lines: 20
    - path: "src/app/auth/login/page.tsx"
      provides: "Login page component with form handling"
      min_lines: 20
  key_links:
    - from: "src/app/auth/signup/page.tsx"
      to: "/api/auth/signup"
      via: "fetch API call"
      pattern: "fetch.*api/auth/signup"
    - from: "src/app/auth/login/page.tsx"
      to: "/api/auth/login"
      via: "fetch API call"
      pattern: "fetch.*api/auth/login"
    - from: "src/app/api/auth/signup/route.ts"
      to: "prisma.user"
      via: "database creation"
      pattern: "prisma\\.user\\.(create)"
    - from: "src/app/api/auth/login/route.ts"
      to: "prisma.user"
      via: "database lookup"
      pattern: "prisma\\.user\\.(findUnique)"
---

# Phase 1, Plan 1: Foundation Authentication System

## Objective

Implement the core authentication system including signup, login, and logout functionality with secure session management.

## Purpose

This foundational authentication system enables users to securely access the application and manage their accounts. Without this core functionality, users cannot interact with the main application features.

## Output

- Complete authentication API endpoints for signup, login, and logout
- Reusable authentication form component
- Dedicated signup and login pages with form handling
- Database model for user accounts with secure password storage

## Context

Based on the existing codebase, there's already a basic structure for authentication with:
- AuthForm component
- Signup and login page components
- API route placeholders for authentication endpoints
- Prisma schema with User model

We need to implement the full authentication logic and ensure proper session management.

## Tasks

<task type="auto">
  <name>Implement User Model with Password Security</name>
  <files>prisma/schema.prisma</files>
  <action>
    Enhance the User model in the database schema to include all necessary fields for secure authentication:
    - Add passwordHash field (required for storing hashed passwords)
    - Add verifiedAt field (to track email verification status)
    - Add emailVerificationToken and emailVerificationExpires fields (for email verification)
    - Add passwordResetToken and passwordResetExpires fields (for password reset)
    
    Ensure the schema is properly configured to allow:
    - Unique email addresses
    - Proper timestamp fields for tracking
    - Secure storage of sensitive data
    
    Reference existing schema structure in the current prisma/schema.prisma
  </action>
  <verify>Run `npx prisma validate` to check schema integrity</verify>
  <done>All fields are properly defined in the User model with appropriate types and constraints</done>
</task>

<task type="auto">
  <name>Implement Complete Signup Endpoint</name>
  <files>src/app/api/auth/signup/route.ts</files>
  <action>
    Implement the full POST endpoint for user signup:
    - Add validation for required fields (email, password)
    - Implement password hashing using bcryptjs
    - Save the user to the database using Prisma
    - Generate a secure JWT token for session management (using jose library)
    - Set HTTP-only cookie with the token for secure session management
    - Handle error cases with appropriate status codes
    - Return user data and session information to the client
    
    The implementation should follow security best practices:
    - Use bcryptjs for password hashing with salt rounds >= 10
    - Generate a secure JWT token with short expiration (15 minutes for access token)
    - Set cookie with security flags (httpOnly, secure, sameSite)
    - Use jose library instead of jsonwebtoken to avoid CommonJS issues with Edge runtime
  </action>
  <verify>Run `curl -X POST http://localhost:3000/api/auth/signup -H "Content-Type: application/json" -d '{"email":"test@example.com","password":"password"}'` and verify response structure</verify>
  <done>User can successfully sign up and receive a valid session token in HTTP-only cookie</done>
</task>

<task type="auto">
  <name>Implement Complete Login Endpoint</name>
  <files>src/app/api/auth/login/route.ts</files>
  <action>
    Implement the full POST endpoint for user login:
    - Add validation for required fields (email, password)
    - Look up user by email in the database using Prisma
    - Compare submitted password with stored hashed password using bcryptjs
    - If credentials are valid, generate a secure JWT token for session management (using jose library)
    - Set HTTP-only cookie with the token for secure session management
    - Handle authentication failures with appropriate status codes
    - Return success message and session information to the client
    
    The implementation should follow security best practices:
    - Use bcryptjs for password comparison
    - Generate a secure JWT token with short expiration (15 minutes for access token)
    - Set cookie with security flags (httpOnly, secure, sameSite)
    - Use jose library instead of jsonwebtoken to avoid CommonJS issues with Edge runtime
    - Prevent timing attacks by comparing passwords in constant time
  </action>
  <verify>Run `curl -X POST http://localhost:3000/api/auth/login -H "Content-Type: application/json" -d '{"email":"test@example.com","password":"password"}'` and verify response structure</verify>
  <done>User can successfully authenticate and receive a valid session token in HTTP-only cookie</done>
</task>

<task type="auto">
  <name>Implement Logout Endpoint</name>
  <files>src/app/api/auth/logout/route.ts</files>
  <action>
    Implement the POST endpoint for user logout:
    - Clear the authentication cookie by setting it with an empty value and immediate expiration
    - Return success message to the client
    - Ensure cookie flags match those used during login (httpOnly, secure, sameSite)
  </action>
  <verify>Run `curl -X POST http://localhost:3000/api/auth/logout` and verify cookie is cleared</verify>
  <done>User can successfully log out and session cookie is cleared</done>
</task>

<task type="auto">
  <name>Enhance Authentication Form Component</name>
  <files>src/components/AuthForm.tsx</files>
  <action>
    Improve the reusable AuthForm component:
    - Add proper validation for email format and password strength
    - Include loading states during API calls
    - Show user-friendly error messages
    - Add accessibility attributes (labels, ARIA roles)
    - Improve overall styling and responsive design
    - Ensure form resets properly after submission
    
    The enhanced component should:
    - Support both signup and login modes
    - Display relevant error messages appropriately
    - Disable submit button during loading states
    - Have clear visual feedback for user actions
  </action>
  <verify>Check that AuthForm renders correctly in both signup and login contexts</verify>
  <done>AuthForm component is responsive, accessible, and works in both signup and login modes</done>
</task>

<task type="auto">
  <name>Create User Session Type Definition</name>
  <files>src/types/auth.d.ts</files>
  <action>
    Define TypeScript interface for user session:
    - Create UserSession interface with id and email properties
    - Export the interface for use throughout the application
    - Ensure it aligns with the database model and authentication flow
    
    This type definition will be used for:
    - Defining session data in API routes
    - Type checking in client-side components
    - Consistent session handling across the application
  </action>
  <verify>Verify that the interface is properly exported and can be imported in other files</verify>
  <done>UserSession type is defined and usable throughout the application</done>
</task>

<verification>
- All authentication API endpoints are functional
- Users can successfully signup, login, and logout
- Session management works with HTTP-only cookies
- Forms display properly and provide user feedback
- Database model supports all required authentication fields
</verification>

<success_criteria>
- User can create an account with email and password
- User can log in with email and password  
- User can log out of the application
- User session persists across browser refresh
</success_criteria>

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