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

---
phase: 01-setup-and-authentication
plan: 02
type: execute
wave: 1
depends_on: []
files_modified: [src/app/auth/signup/page.tsx, src/app/auth/login/page.tsx, src/middleware.ts, src/lib/auth.ts, src/types/auth.d.ts]
autonomous: true
user_setup: []

must_haves:
  truths:
    - "User can verify their email address after signup"
    - "User can reset password via email link"
    - "Application interface loads and displays correctly on desktop and tablet devices"
  artifacts:
    - path: "src/app/auth/signup/page.tsx"
      provides: "Signup page with form and navigation"
      min_lines: 20
    - path: "src/app/auth/login/page.tsx"
      provides: "Login page with form and navigation"
      min_lines: 20
    - path: "src/middleware.ts"
      provides: "Authentication middleware for protected routes"
      exports: ["middleware"]
    - path: "src/lib/auth.ts"
      provides: "Authentication utility functions"
      exports: ["verifyAuth", "requireAuth"]
    - path: "src/types/auth.d.ts"
      provides: "Type definitions for authentication"
      contains: "interface UserSession"
  key_links:
    - from: "src/app/auth/signup/page.tsx"
      to: "src/components/AuthForm.tsx"
      via: "component composition"
      pattern: "import.*AuthForm"
    - from: "src/app/auth/login/page.tsx"
      to: "src/components/AuthForm.tsx"
      via: "component composition"
      pattern: "import.*AuthForm"
    - from: "src/middleware.ts"
      to: "src/lib/auth.ts"
      via: "function call"
      pattern: "requireAuth"
---

<objective>
Implement complete authentication flow including email verification, password reset, and middleware protection for authenticated routes.
</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>Create Auth Pages</name>
  <files>src/app/auth/signup/page.tsx, src/app/auth/login/page.tsx</files>
  <action>Create signup and login pages in the app router structure:
  1. Signup page (/app/auth/signup/page.tsx) - imports AuthForm with signup handler
  2. Login page (/app/auth/login/page.tsx) - imports AuthForm with login handler
  Both pages should include:
  - Proper layout with site branding
  - Navigation links between signup and login
  - Responsive design that works on desktop and tablet
  - Proper form submission handling
  - Error state management</action>
  <verify>Run `npm run dev` and verify:
  - Pages load without errors
  - Forms render correctly
  - Navigation between pages works
  - Responsive design works on different screen sizes</verify>
  <done>Both authentication pages exist with proper layout and functionality</done>
</task>

<task type="auto">
  <name>Implement Authentication Middleware</name>
  <files>src/middleware.ts</files>
  <action>Create middleware.ts file that:
  1. Protects routes that require authentication (all routes except /auth/*)
  2. Verifies JWT token in cookies using jose library
  3. Redirects unauthenticated users to login page
  4. Allows authenticated users to proceed to protected routes
  5. Handles expired tokens by clearing cookie and redirecting to login</action>
  <verify>Add test route in src/app/test/page.tsx for middleware testing. Run `npm run dev` and:
  - Visit /test with no auth -> redirected to /auth/login
  - Visit /test with valid auth -> shows test page
  - Visit /auth/signup with no auth -> shows signup page</verify>
  <done>Middleware properly protects authenticated routes and redirects unauthenticated users</done>
</task>

<task type="auto">
  <name>Create Auth Utility Library</name>
  <files>src/lib/auth.ts, src/types/auth.d.ts</files>
  <action>Create auth utility functions in src/lib/auth.ts:
  - verifyAuth() - verifies JWT token and returns user session or null
  - requireAuth() - throws error if no valid session, returns session if valid
  Create type definitions in src/types/auth.d.ts:
  - UserSession interface with email, id fields
  Use jose library for JWT verification and bcrypt for password hashing</action>
  <verify>Run `npm run dev` and verify:
  - Auth library functions compile without errors
  - Type definitions are correctly applied
  - Functions properly handle valid/invalid tokens</verify>
  <done>Auth utility library and type definitions are correctly created and functional</done>
</task>

</tasks>

<verification>
Verify the complete authentication flow from signup to login, including middleware protection of routes. Test that unauthenticated users are redirected appropriately and that authenticated users can access protected areas.
</verification>

<success_criteria>
- User can navigate between signup and login pages
- Authentication middleware properly protects routes
- Unauthenticated users are redirected to login page
- Authenticated users can access protected routes
- JWT verification works correctly with proper token handling
- Password reset functionality is implemented (placeholder for now)
- Email verification functionality is implemented (placeholder for now)
- Application interface loads and displays correctly on desktop and tablet devices
</success_criteria>

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