---
title: Authentication Test Plan
description: Comprehensive test plan for authentication and account management features, covering all test suites and specifications.
navigation:
  icon: i-lucide-file-text
---


## Overview

This document outlines a comprehensive test plan for the authentication and account management features implemented in Harmonic SaaS. The test plan covers all uncommitted changes including authentication refactoring, email integration, enhanced auth features, account security, and UI/UX improvements.

---

## Summary of Changes

### 1. Authentication Architecture Refactoring
- Moved Better Auth configuration from client-side to server-side
- Enhanced auth client with additional plugins (passkey, magic link, organization)
- Updated useAuth() composable to use centralized authClient
- Modified auth API handler to use server-side auth instance

### 2. Email Integration System (NEW)
- Created email service with Resend integration
- Added email templates for verification, password reset, magic link, and team invitations
- Mock mode support for development

### 3. Enhanced Authentication Features
- Email verification (required for new signups)
- Password reset flow
- Magic link authentication
- Separate user registration page

### 4. New Account Management Features
- Security page with password change functionality
- Passkey manager (WebAuthn support)
- Email verification banner
- Account deletion with danger zone

### 5. UI/UX Improvements
- Redesigned auth pages
- Improved user flows
- Better error handling and feedback

### 6. Internationalization Updates
- Extensive i18n additions for all new features
- Support for English and Dutch

---

## Test Suites

## Test Suite 1: Authentication Architecture

### 1.1 Server-Side Auth Configuration

**File:** `server/utils/auth.ts`

```typescript
describe('Server Auth Configuration', () => {
  test('Auth instance is created server-side with correct config', () => {
    // Verify betterAuth is initialized with correct baseURL
    // Verify drizzleAdapter is configured with correct database
  })

  test('Auth instance includes all required plugins', () => {
    // Verify passkey plugin is loaded
    // Verify magicLink plugin is loaded
    // Verify organization plugin is loaded
  })

  test('Email verification is enabled and configured', () => {
    // Verify requireEmailVerification is true
    // Verify sendOnSignUp is true
    // Verify autoSignInAfterVerification is true
    // Verify sendVerificationEmail callback is set
  })

  test('Social providers are conditionally enabled', () => {
    // Verify GitHub provider is enabled when in config
    // Verify Google provider is enabled when in config
    // Verify providers are undefined when not configured
  })
})
```

### 1.2 Auth Client Integration

**File:** `app/utils/auth-client.ts`

```typescript
describe('Auth Client', () => {
  test('Auth client uses correct base URL in browser context', () => {
    // Mock window.location.origin
    // Verify authClient baseURL matches
  })

  test('Auth client uses correct base URL in SSR context', () => {
    // Mock useRuntimeConfig
    // Verify authClient baseURL from config
  })

  test('useAuth composable uses shared authClient instance', () => {
    // Call useAuth()
    // Verify it returns the same authClient reference
  })

  test('All auth methods are exported from authClient', () => {
    // Verify signIn, signUp, signOut are exported
    // Verify forgetPassword, resetPassword, deleteUser are exported
    // Verify passkey, magicLink, organization are exported
  })
})
```

---

## Test Suite 2: Email System

### 2.1 Email Sending Infrastructure

**File:** `server/utils/email.ts`

```typescript
describe('Email Service', () => {
  test('Sends email via Resend when API key is configured', async () => {
    // Mock Resend client
    // Call sendEmail with test data
    // Verify Resend API was called with correct parameters
  })

  test('Logs to console in mock mode when API key is missing', async () => {
    // Set mockEmail to true or remove resendApiKey
    // Mock console.log
    // Call sendEmail
    // Verify console.log was called with email details
  })

  test('Mock mode is enabled when mockEmail config is "true"', () => {
    // Set mockEmail config to "true"
    // Verify isMockMode is true
  })

  test('Handles email sending errors gracefully', async () => {
    // Mock Resend to throw error
    // Call sendEmail
    // Verify error is caught and logged
  })
})
```

### 2.2 Email Templates

```typescript
describe('Email Templates', () => {
  test('Verification email contains correct content and URL', async () => {
    // Call sendVerificationEmail
    // Verify subject contains app name
    // Verify HTML contains verification URL
    // Verify text version is included
  })

  test('Password reset email contains correct content and URL', async () => {
    // Call sendPasswordResetEmail
    // Verify subject, HTML, and URL
    // Verify expiry warning is included
  })

  test('Magic link email contains correct content and URL', async () => {
    // Call sendMagicLinkEmail
    // Verify subject, HTML, and URL
    // Verify 15-minute expiry is mentioned
  })

  test('Team invitation email contains correct content and URL', async () => {
    // Call sendTeamInvitationEmail
    // Verify organization name and inviter are included
    // Verify 7-day expiry is mentioned
  })

  test('All emails include both HTML and text versions', async () => {
    // Test each email template
    // Verify both html and text parameters are set
  })
})
```

---

## Test Suite 3: User Registration & Verification

### 3.1 Registration Flow

**File:** `app/pages/auth/register.vue`

```typescript
describe('User Registration', () => {
  test('User can register with email, password, and name', async () => {
    // Render registration page
    // Fill in name, email, password
    // Submit form
    // Verify auth.signUp.email was called with correct data
  })

  test('Registration triggers verification email', async () => {
    // Mock sendVerificationEmail
    // Complete registration
    // Verify email was sent
  })

  test('User session is NOT created until email is verified', async () => {
    // Complete registration
    // Check session
    // Verify session is null or user.emailVerified is false
  })

  test('Shows verification required message after signup', async () => {
    // Complete registration
    // Verify verificationRequired state is true
    // Verify verification message is displayed
  })

  test('Social OAuth registration works correctly', async () => {
    // Click GitHub/Google button
    // Verify auth.signIn.social was called
  })

  test('Validation errors are displayed correctly', async () => {
    // Submit form with missing fields
    // Verify validation errors are shown
  })
})
```

### 3.2 Email Verification

**File:** `app/components/Account/EmailVerificationBanner.vue`

```typescript
describe('Email Verification', () => {
  test('Verification email is sent on signup', async () => {
    // Mock Better Auth signup
    // Verify sendVerificationEmail was called
  })

  test('Clicking verification link verifies the account', async () => {
    // Generate verification token
    // Visit verification URL
    // Verify user.emailVerified becomes true
  })

  test('Verified users can access dashboard', async () => {
    // Sign in with verified account
    // Navigate to /dashboard
    // Verify no redirect occurs
  })

  test('Unverified users see verification banner in account page', async () => {
    // Sign in with unverified account
    // Navigate to /dashboard/account
    // Verify banner is visible
  })

  test('Resend verification email works correctly', async () => {
    // Render banner component
    // Click resend button
    // Verify API call was made
    // Verify success toast is shown
  })

  test('Auto sign-in after verification redirects to dashboard', async () => {
    // Click verification link with callbackURL
    // Verify redirect to /dashboard
  })
})
```

---

## Test Suite 4: Authentication Pages

### 4.1 Login Page

**File:** `app/pages/auth/index.vue`

```typescript
describe('Login Page (/auth)', () => {
  test('Renders login form with email and password fields', () => {
    // Mount component
    // Verify email input exists
    // Verify password input exists
  })

  test('Social OAuth buttons are shown when providers are configured', () => {
    // Mock appConfig with GitHub, Google
    // Mount component
    // Verify OAuth buttons are rendered
  })

  test('Login with valid credentials redirects to dashboard', async () => {
    // Fill in valid email/password
    // Submit form
    // Verify navigation to /dashboard
  })

  test('Login with invalid credentials shows error', async () => {
    // Fill in invalid credentials
    // Submit form
    // Verify error toast is shown
  })

  test('Already logged-in users are redirected to dashboard', async () => {
    // Mock active session
    // Mount component
    // Verify watch triggers navigation
  })

  test('Links to register, forgot password, and magic link work', () => {
    // Mount component
    // Verify all links exist with correct routes
  })
})
```

### 4.2 Registration Page

**File:** `app/pages/auth/register.vue`

```typescript
describe('Registration Page (/auth/register)', () => {
  test('Renders registration form with name, email, and password', () => {
    // Mount component
    // Verify all input fields exist
  })

  test('Password validation shows minimum length requirement', () => {
    // Enter short password
    // Verify hint text is displayed
  })

  test('Successful registration shows verification message', async () => {
    // Fill and submit form
    // Mock successful signup
    // Verify verification UI is shown
  })

  test('Link to login page works correctly', () => {
    // Mount component
    // Verify link to /auth exists
  })

  test('Social OAuth registration triggers correctly', async () => {
    // Click OAuth button
    // Verify auth.signIn.social called with callbackURL
  })
})
```

### 4.3 Forgot Password Page

**File:** `app/pages/auth/forgot-password.vue`

```typescript
describe('Forgot Password Page (/auth/forgot-password)', () => {
  test('Renders email input form', () => {
    // Mount component
    // Verify email input exists
  })

  test('Submitting valid email sends reset link', async () => {
    // Fill in email
    // Submit form
    // Verify authClient.forgetPassword was called
  })

  test('Shows success message after sending', async () => {
    // Submit form successfully
    // Verify emailSent state is true
    // Verify success UI is displayed
  })

  test('Link back to login works', () => {
    // Mount component
    // Verify back to login link exists
  })

  test('Handles errors gracefully', async () => {
    // Mock forgetPassword to return error
    // Submit form
    // Verify error toast is shown
  })
})
```

### 4.4 Reset Password Page

**File:** `app/pages/auth/reset-password.vue`

```typescript
describe('Reset Password Page (/auth/reset-password)', () => {
  test('Requires valid token in URL query', () => {
    // Mount component without token
    // Verify token computed property is undefined
  })

  test('Shows error for missing or invalid token', async () => {
    // Mount component without token
    // Wait for onMounted
    // Verify error toast is shown
  })

  test('Password and confirm password fields are validated', () => {
    // Mount component
    // Verify both fields exist
    // Verify validation logic
  })

  test('Shows error when passwords don\'t match', async () => {
    // Enter different passwords
    // Verify passwordsMatch is false
    // Verify error message is shown
  })

  test('Shows error when password is too short', async () => {
    // Enter short password
    // Verify isPasswordValid is false
    // Verify error message is shown
  })

  test('Successful reset redirects to login', async () => {
    // Fill valid passwords with token
    // Submit form
    // Verify resetSuccess is true
    // Verify success UI with login link
  })

  test('Reset link works correctly', async () => {
    // Mock authClient.resetPassword
    // Submit form
    // Verify API was called with token and password
  })
})
```

### 4.5 Magic Link Page

**File:** `app/pages/auth/magic-link.vue`

```typescript
describe('Magic Link Page (/auth/magic-link)', () => {
  test('Renders email input form', () => {
    // Mount component
    // Verify email input exists
  })

  test('Submitting email sends magic link', async () => {
    // Fill in email
    // Submit form
    // Verify authClient.signIn.magicLink was called
  })

  test('Shows success message with expiry time', async () => {
    // Submit form successfully
    // Verify emailSent is true
    // Verify 15-minute expiry message is shown
  })

  test('Link back to login works', () => {
    // Mount component
    // Verify back to login link exists
  })

  test('Magic link redirects to dashboard on click', async () => {
    // Generate magic link with callbackURL
    // Visit magic link URL
    // Verify redirect to /dashboard
  })
})
```

---

## Test Suite 5: Account Security

### 5.1 Security Page

**File:** `app/pages/dashboard/account/security.vue`

```typescript
describe('Security Page (/dashboard/account/security)', () => {
  test('Requires authentication to access', async () => {
    // Clear session
    // Navigate to page
    // Verify redirect to /auth
  })

  test('Renders password change form', () => {
    // Mount component with auth
    // Verify current, new, confirm password fields exist
  })

  test('Current password field is required', () => {
    // Submit form without current password
    // Verify canSubmit is false
  })

  test('New password validation works (min length)', () => {
    // Enter short new password
    // Verify isPasswordValid is false
    // Verify error is shown
  })

  test('Confirm password validation works (match)', () => {
    // Enter non-matching passwords
    // Verify passwordsMatch is false
    // Verify error is shown
  })

  test('Successful password change shows success message', async () => {
    // Fill all fields correctly
    // Submit form
    // Verify showStatus called with success
  })

  test('Wrong current password shows error', async () => {
    // Mock changePassword to return error
    // Submit form
    // Verify error status is shown
  })

  test('Form reset button clears all fields', () => {
    // Fill in all fields
    // Click reset button
    // Verify all fields are empty
  })
})
```

### 5.2 Passkey Manager

**File:** `app/components/Account/PasskeyManager.vue`

```typescript
describe('Passkey Manager', () => {
  test('Loads and displays user\'s passkeys', async () => {
    // Mock authClient.passkey.listPasskeys
    // Mount component
    // Wait for onMounted
    // Verify passkeys are displayed
  })

  test('Shows "no passkeys" state when list is empty', async () => {
    // Mock empty passkeys list
    // Mount component
    // Verify empty state is shown
  })

  test('Add passkey modal opens correctly', async () => {
    // Mount component
    // Click add button
    // Verify isAddModalOpen is true
  })

  test('Adding passkey with name triggers WebAuthn flow', async () => {
    // Open modal
    // Enter passkey name
    // Submit form
    // Verify authClient.passkey.addPasskey was called
  })

  test('Successful passkey addition updates the list', async () => {
    // Mock successful passkey addition
    // Add passkey
    // Verify fetchPasskeys is called
    // Verify new passkey appears in list
  })

  test('Delete passkey shows confirmation and removes from list', async () => {
    // Mock passkey list
    // Click delete button
    // Verify authClient.passkey.deletePasskey called
    // Verify passkey removed from list
  })

  test('Handles WebAuthn errors gracefully', async () => {
    // Mock passkey.addPasskey to throw error
    // Try adding passkey
    // Verify error status is shown
  })

  test('Displays passkey creation date correctly', () => {
    // Mock passkey with createdAt date
    // Mount component
    // Verify formatted date is displayed
  })
})
```

### 5.3 Email Verification Banner

**File:** `app/components/Account/EmailVerificationBanner.vue`

```typescript
describe('Email Verification Banner', () => {
  test('Banner is hidden for verified users', () => {
    // Mock session with emailVerified: true
    // Mount component
    // Verify banner is not rendered (v-if="isUnverified")
  })

  test('Banner is shown for unverified users', () => {
    // Mock session with emailVerified: false
    // Mount component
    // Verify banner is rendered
  })

  test('Displays user\'s email address in message', () => {
    // Mock session with email
    // Mount component
    // Verify email is displayed in description
  })

  test('Resend button triggers verification email', async () => {
    // Mock session
    // Mount component
    // Click resend button
    // Verify API call to /api/auth/send-verification-email
  })

  test('Shows success toast after resending', async () => {
    // Mock successful resend
    // Click resend button
    // Verify success toast is shown
  })

  test('Handles resend errors gracefully', async () => {
    // Mock failed resend
    // Click resend button
    // Verify error toast is shown
  })
})
```

### 5.4 Danger Zone

**File:** `app/components/Account/DangerZone.vue`

```typescript
describe('Danger Zone', () => {
  test('Renders account deletion section in settings', () => {
    // Mount component
    // Verify danger zone UI is rendered
  })

  test('Delete button opens confirmation modal', async () => {
    // Mount component
    // Click delete button
    // Verify isDeleteModalOpen is true
  })

  test('Modal requires typing "delete" to confirm', () => {
    // Open modal
    // Verify confirmationText input exists
    // Verify canDelete computed depends on "delete"
  })

  test('Delete button is disabled until confirmation is typed', () => {
    // Open modal
    // Verify delete button disabled
    // Type "delete"
    // Verify button enabled
  })

  test('Successful deletion removes user from database', async () => {
    // Mock successful delete API call
    // Confirm and delete
    // Verify DELETE /api/user/delete was called
  })

  test('Successful deletion signs user out', async () => {
    // Complete deletion
    // Verify authClient.signOut was called
  })

  test('Successful deletion redirects to homepage', async () => {
    // Complete deletion
    // Verify navigation to / occurs
  })

  test('Shows warning about irreversible action', () => {
    // Open modal
    // Verify warning text is displayed
  })

  test('Cancel button closes modal without deleting', () => {
    // Open modal
    // Click cancel
    // Verify modal closed
    // Verify no API call was made
  })
})
```

---

## Test Suite 6: API Endpoints

### 6.1 Auth API Handler

**File:** `server/api/[...auth].ts`

```typescript
describe('Auth API Handler (/api/[...auth])', () => {
  test('Handles Better Auth requests correctly', async () => {
    // Make auth request
    // Verify auth.handler was called
    // Verify response is returned
  })

  test('Returns proper error responses', async () => {
    // Make invalid auth request
    // Verify error response format
  })

  test('Logs errors to console', async () => {
    // Mock console.error
    // Trigger error
    // Verify console.error was called
  })
})
```

### 6.2 User Delete Endpoint

**File:** `server/api/user/delete.delete.ts`

```typescript
describe('User Delete Endpoint (/api/user/delete)', () => {
  test('Requires authentication', async () => {
    // Make request without session
    // Verify 401 response
  })

  test('Returns 401 for unauthenticated requests', async () => {
    // Mock no session
    // Make DELETE request
    // Verify statusCode is 401
  })

  test('Deletes user and related data from database', async () => {
    // Mock authenticated session
    // Make DELETE request
    // Verify db.delete was called with correct userId
  })

  test('Returns success response', async () => {
    // Complete successful deletion
    // Verify response has success: true
  })

  test('Handles database errors gracefully', async () => {
    // Mock db.delete to throw error
    // Make DELETE request
    // Verify error is caught
  })

  test('Returns 500 for server errors', async () => {
    // Trigger database error
    // Verify statusCode is 500
  })
})
```

---

## Test Suite 7: Integration Tests

### 7.1 Complete User Journey - Email/Password

```typescript
describe('User Journey: Email/Password Auth', () => {
  test('Register → Verify Email → Login → Access Dashboard', async () => {
    // 1. Navigate to /auth/register
    // 2. Fill registration form
    // 3. Submit and verify email sent
    // 4. Click verification link in email
    // 5. Navigate to /auth
    // 6. Login with credentials
    // 7. Verify redirected to /dashboard
  })

  test('Register → Change Password → Login with new password', async () => {
    // 1. Complete registration and verification
    // 2. Login
    // 3. Navigate to /dashboard/account/security
    // 4. Change password
    // 5. Logout
    // 6. Login with new password
    // 7. Verify successful login
  })

  test('Register → Forgot Password → Reset → Login', async () => {
    // 1. Complete registration
    // 2. Go to /auth/forgot-password
    // 3. Submit email
    // 4. Click reset link
    // 5. Enter new password
    // 6. Login with new password
  })

  test('Register → Add Passkey → Login with passkey', async () => {
    // 1. Complete registration and login
    // 2. Navigate to /dashboard/account/security
    // 3. Add passkey
    // 4. Logout
    // 5. Login using passkey
  })

  test('Register → Delete Account → Cannot login', async () => {
    // 1. Complete registration and login
    // 2. Navigate to /dashboard/account/settings
    // 3. Delete account in danger zone
    // 4. Try to login
    // 5. Verify login fails (user not found)
  })
})
```

### 7.2 Complete User Journey - Magic Link

```typescript
describe('User Journey: Magic Link Auth', () => {
  test('Request Magic Link → Click Link → Access Dashboard', async () => {
    // 1. Navigate to /auth/magic-link
    // 2. Enter email
    // 3. Submit form
    // 4. Verify email sent
    // 5. Click magic link in email
    // 6. Verify redirected to /dashboard
    // 7. Verify session is active
  })

  test('Magic link expires after 15 minutes', async () => {
    // 1. Request magic link
    // 2. Wait > 15 minutes (mock time)
    // 3. Click expired link
    // 4. Verify error message
  })
})
```

### 7.3 Complete User Journey - OAuth

```typescript
describe('User Journey: OAuth', () => {
  test('Sign in with GitHub → Access Dashboard', async () => {
    // 1. Navigate to /auth
    // 2. Click GitHub button
    // 3. Mock OAuth flow
    // 4. Verify redirected to /dashboard
  })

  test('Sign in with Google → Access Dashboard', async () => {
    // 1. Navigate to /auth
    // 2. Click Google button
    // 3. Mock OAuth flow
    // 4. Verify redirected to /dashboard
  })

  test('OAuth auto-creates verified account', async () => {
    // 1. Sign in with OAuth provider
    // 2. Check user in database
    // 3. Verify emailVerified is true
    // 4. Verify no verification email sent
  })
})
```

---

## Test Suite 8: UI/UX & Accessibility

### 8.1 Responsive Design

```typescript
describe('Responsive Design', () => {
  test('Auth pages render correctly on mobile', () => {
    // Set viewport to mobile (375px)
    // Test all auth pages
    // Verify layout is not broken
  })

  test('Auth pages render correctly on tablet', () => {
    // Set viewport to tablet (768px)
    // Test all auth pages
    // Verify layout is not broken
  })

  test('Auth pages render correctly on desktop', () => {
    // Set viewport to desktop (1440px)
    // Test all auth pages
    // Verify layout is not broken
  })

  test('Account pages render correctly on all breakpoints', () => {
    // Test /dashboard/account/* pages
    // Verify responsive behavior
  })
})
```

### 8.2 Internationalization

```typescript
describe('Internationalization', () => {
  test('All auth pages support English (en-US)', () => {
    // Set locale to en-US
    // Visit each auth page
    // Verify English translations are displayed
  })

  test('All auth pages support Dutch (nl-BE)', () => {
    // Set locale to nl-BE
    // Visit each auth page
    // Verify Dutch translations are displayed
  })

  test('Language switcher updates all text correctly', () => {
    // Start with English
    // Switch to Dutch
    // Verify all text updates
  })

  test('Validation messages are translated', () => {
    // Trigger validation errors
    // Verify errors use i18n keys
  })

  test('Email templates use correct language', async () => {
    // Set user locale preference
    // Trigger email send
    // Verify email is in correct language
    // Note: May need to implement this feature
  })
})
```

### 8.3 Loading States & Error Handling

```typescript
describe('Loading States', () => {
  test('Login shows loading state during authentication', async () => {
    // Start login
    // Verify loading prop is true
    // Verify button shows loading spinner
  })

  test('Registration shows loading state during signup', async () => {
    // Start registration
    // Verify loading state
  })

  test('Password change shows loading state', async () => {
    // Submit password change
    // Verify loading state
  })

  test('Passkey operations show loading states', async () => {
    // Add/delete passkey
    // Verify loading states
  })

  test('Account deletion shows loading state', async () => {
    // Start deletion
    // Verify isDeleting is true
  })
})

describe('Error Handling', () => {
  test('Network errors show user-friendly messages', async () => {
    // Mock network failure
    // Attempt operation
    // Verify user-friendly error message
  })

  test('Validation errors are displayed inline', () => {
    // Submit invalid form
    // Verify errors appear near fields
  })

  test('Toast notifications appear for success/error', async () => {
    // Trigger various operations
    // Verify toast.add is called
  })

  test('Auth errors don\'t expose sensitive information', async () => {
    // Trigger auth errors
    // Verify error messages are generic
  })
})
```

---

## Test Suite 9: Security Tests

### 9.1 Authentication Security

```typescript
describe('Authentication Security', () => {
  test('Passwords are hashed before storage', async () => {
    // Create user with password
    // Query database
    // Verify password field is hashed (not plaintext)
  })

  test('Email verification tokens are secure and expire', async () => {
    // Generate verification token
    // Verify token format (cryptographically secure)
    // Test token expiration logic
  })

  test('Password reset tokens are secure and expire', async () => {
    // Generate reset token
    // Verify token is secure
    // Verify 1-hour expiration
  })

  test('Magic link tokens are secure and expire', async () => {
    // Generate magic link token
    // Verify token security
    // Verify 15-minute expiration
  })

  test('Sessions are properly managed and secured', async () => {
    // Create session
    // Verify session cookie is httpOnly and secure
    // Test session expiration
  })
})
```

### 9.2 Authorization

```typescript
describe('Authorization', () => {
  test('Unauthenticated users cannot access /dashboard/*', async () => {
    // Clear session
    // Navigate to /dashboard
    // Verify redirect to /auth
  })

  test('Authenticated users are redirected from /auth pages', async () => {
    // Create active session
    // Navigate to /auth
    // Verify redirect to /dashboard
    // Note: Currently login page doesn't auto-redirect
  })

  test('Global auth middleware works correctly', () => {
    // Test middleware on protected routes
    // Verify auth checks occur
  })

  test('API endpoints require proper authentication', async () => {
    // Make API calls without auth
    // Verify 401 responses
  })
})
```

### 9.3 Input Validation

```typescript
describe('Input Validation', () => {
  test('Email format is validated', () => {
    // Enter invalid email formats
    // Verify validation errors
  })

  test('Password minimum length is enforced', () => {
    // Enter short passwords
    // Verify validation error
  })

  test('XSS attempts are sanitized', async () => {
    // Submit form with <script> tags
    // Verify content is sanitized
  })

  test('SQL injection attempts are prevented', async () => {
    // Submit SQL injection strings
    // Verify they're properly escaped
    // Note: Drizzle should handle this
  })
})
```

---

## Test Execution Priority

### Priority 1: Critical Path (Must Test First)
- ✅ Test Suite 3: User Registration & Verification
- ✅ Test Suite 4.1-4.4: Authentication Pages
- ✅ Test Suite 5.4: Danger Zone (Account Deletion)
- ✅ Test Suite 9.1: Authentication Security

**Rationale:** These tests cover core authentication flows and critical security features. Any failures here represent blocking issues for production.

### Priority 2: Core Features (Test Before Release)
- ✅ Test Suite 5.1-5.3: Account Security Features
- ✅ Test Suite 7: Integration Tests
- ✅ Test Suite 2: Email System

**Rationale:** These tests ensure the complete user experience works end-to-end and email notifications function properly.

### Priority 3: Enhancement & Polish (Test for Quality)
- ✅ Test Suite 8: UI/UX & Accessibility
- ✅ Test Suite 9.2-9.3: Additional Security Tests
- ✅ Test Suite 1: Architecture Tests

**Rationale:** These tests verify polish, accessibility, and architectural integrity. Important for long-term maintainability.

---

## Test Environment Setup

### Prerequisites
```bash
# Install dependencies
pnpm install

# Setup test database
DATABASE_URL="postgresql://test:test@localhost:5432/harmonic_test"

# Configure test environment variables
cp .env.example .env.test
```

### Environment Variables for Testing
```bash
# Email mock mode (for local testing)
MOCK_EMAIL=true

# Better Auth
BETTER_AUTH_URL=http://localhost:3000

# OAuth (optional for full tests)
GITHUB_CLIENT_ID=test_github_id
GITHUB_CLIENT_SECRET=test_github_secret
GOOGLE_CLIENT_ID=test_google_id
GOOGLE_CLIENT_SECRET=test_google_secret

# Email (use mock mode or test API key)
RESEND_API_KEY=test_key_or_leave_empty
FROM_EMAIL=test@example.com
APP_NAME="Harmonic SaaS Test"
```

### Running Tests
```bash
# Run all tests
pnpm test

# Run specific test suite
pnpm test authentication

# Run with coverage
pnpm coverage

# Run e2e tests
pnpm test:e2e

# Type checking
pnpm typecheck

# Linting
pnpm lint
```

---

## Test Coverage Goals

- **Unit Tests:** 80%+ coverage
- **Integration Tests:** All critical user journeys
- **E2E Tests:** Happy path + common error scenarios
- **Security Tests:** All auth flows + authorization checks

---

## Notes & Considerations

### Known Limitations
1. **Email Template Language:** Currently emails are sent in the default language. May need to implement user locale preference.
2. **Auto-redirect on Login Page:** Logged-in users currently see the login page briefly before redirect via watch. Consider server-side redirect.
3. **Passkey Browser Support:** WebAuthn/Passkey tests require browser with WebAuthn support.

### Testing Tools Recommended
- **Unit/Integration:** Vitest (already configured)
- **E2E:** Playwright or Cypress
- **API Testing:** Supertest or Vitest with happy-dom
- **Email Testing:** Use mock mode or email testing service like Mailpit

### Future Enhancements to Test
- Two-factor authentication (2FA)
- Session management across devices
- Account recovery options
- OAuth account linking
- Team/organization management

---

## Appendix: File References

### Modified Files
- `app/composables/auth.ts`
- `app/pages/auth/index.vue`
- `app/pages/dashboard/account/index.vue`
- `app/pages/dashboard/account/settings.vue`
- `app/utils/auth-client.ts`
- `app/utils/auth.ts`
- `server/api/[...auth].ts`
- `server/utils/auth.ts`
- `i18n/locales/en-US.json`
- `i18n/locales/nl-BE.json`
- `nuxt.config.ts`
- `package.json`

### New Files
- `app/components/Account/DangerZone.vue`
- `app/components/Account/EmailVerificationBanner.vue`
- `app/components/Account/PasskeyManager.vue`
- `app/pages/auth/forgot-password.vue`
- `app/pages/auth/magic-link.vue`
- `app/pages/auth/register.vue`
- `app/pages/auth/reset-password.vue`
- `app/pages/dashboard/account/security.vue`
- `server/api/user/delete.delete.ts`
- `server/utils/email.ts`

---

**Last Updated:** 2025-10-15
**Version:** 1.0
**Status:** Ready for Implementation
