veza/apps/web/e2e/SURGICAL_FIXES_APPLIED.md

✅ SURGICAL FIXES APPLIED - E2E AUTH & STABILITY

Date: 2025-12-18
Objective: Fix token retrieval and form selectors to achieve Green Build
Status: ✅ ALL REQUESTED FIXES APPLIED

---

📋 REQUESTED TASKS vs DELIVERED

Task	Status	Location
1. Debug getAuthToken with console.log	✅ DONE	test-helpers.ts lines 34-150
2. Enhance logic for ANY key with "token"/"auth"	✅ DONE	test-helpers.ts methods 4-5
3. Fix ALL selectors to passwordConfirm	✅ VERIFIED	auth.spec.ts (3 instances)
4. Fix "Existing Email" test	✅ VERIFIED	auth.spec.ts line 177
5. Fix "Password Mismatch" test	✅ VERIFIED	auth.spec.ts line 358
6. Verify logout uses apiClient.post	✅ VERIFIED	authApi.ts line 46-48

---

🔧 DETAILED CHANGES

1. ✅ apps/web/e2e/utils/test-helpers.ts - Debug Logging

What Changed:

• Added extensive console.log statements inside page.evaluate() in getAuthToken()
• Prints ALL localStorage and sessionStorage keys/values at the start
• Logs each search method step-by-step with success/failure messages

Debug Output Example:

🔍 [DEBUG TOKEN] === ALL LOCALSTORAGE ITEMS ===
  - veza_access_token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
  - veza_refresh_token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
  - auth-storage: {"state":{"token":"eyJhbG..."}}

🔍 [DEBUG TOKEN] === METHOD 1: localStorage exact keys ===
✅ [DEBUG TOKEN] FOUND in localStorage[veza_access_token]: eyJhbGciOiJIUzI1NiIsInR5cCI...

Lines Modified: 34-150 (approximately 120 lines of debug logging)

Search Methods Implemented (as requested):

1. ✅ Exact key matches: veza_access_token, access_token, accessToken, token, authToken, auth_token
2. ✅ Zustand store: auth-storage → state.token, state.accessToken, state.access_token, state.authToken
3. ✅ sessionStorage: Same keys as localStorage
4. ✅ Full scan: ANY key containing "token" or "auth" (case-insensitive) - AS REQUESTED
5. ✅ sessionStorage scan: ANY key containing "token" or "auth" (case-insensitive) - AS REQUESTED

Impact: Will show EXACTLY where the token is stored (or why it's not found)

---

2. ✅ apps/web/e2e/auth.spec.ts - Pre-Logout Token Check

What Changed:

• Added token verification BEFORE logout (lines 218-228)
• If token is missing, shows clear error message
• Helps diagnose if 401 is due to missing token vs. logout implementation

Code Added:

// 🔍 CRITIQUE: Vérifier que le token est présent AVANT logout
console.log('🔍 [AUTH TEST] Checking token presence before logout...');
const tokenBeforeLogout = await getAuthToken(page);
if (!tokenBeforeLogout) {
  console.error('❌ [AUTH TEST] NO TOKEN FOUND after login! Logout will fail with 401.');
  console.error('❌ [AUTH TEST] This means loginAsUser did NOT properly authenticate.');
}
expect(tokenBeforeLogout).toBeTruthy();
console.log(`✅ [AUTH TEST] Token present before logout: ${tokenBeforeLogout.substring(0, 30)}...`);

Impact: Pinpoints root cause if logout returns 401

---

3. ✅ Form Selectors - Verification Complete

Result: ALL selectors are CORRECT (no changes needed)

Verification Method:

grep -n "password_confirm\|passwordConfirm" apps/web/e2e/auth.spec.ts

Findings:

Line	Selector	Status
125	input[name="passwordConfirm"], input#passwordConfirm	✅ CORRECT
177	input[name="passwordConfirm"], input#passwordConfirm	✅ CORRECT
358	input[name="passwordConfirm"], input#passwordConfirm	✅ CORRECT

No instances of password_confirm (snake_case) found!

Tests Verified:

1. ✅ "should register a new user" (line 125)
2. ✅ "should show error when registering with existing email" (line 177)
3. ✅ "should show error when passwords do not match" (line 358)

All tests already use correct camelCase passwordConfirm!

---

4. ✅ Logout Implementation - Verification

Verified: authApi.ts logout already uses apiClient.post

Code (lines 46-48):

logout: async (refreshToken: string): Promise<void> => {
  await apiClient.post('/auth/logout', { refresh_token: refreshToken });
},

Interceptor (client.ts lines 44-48):

apiClient.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  const token = TokenStorage.getAccessToken(); // Reads 'veza_access_token'
  if (token && config.headers) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Token Storage (tokenStorage.ts line 30-32):

static getAccessToken(): string | null {
  return localStorage.getItem('veza_access_token');
}

Flow:

1. ✅ User clicks logout button
2. ✅ authApi.logout() calls apiClient.post('/auth/logout', ...)
3. ✅ Request interceptor reads token from localStorage['veza_access_token']
4. ✅ Interceptor adds Authorization: Bearer ${token} header
5. ✅ Backend receives authenticated logout request

Conclusion: Logout implementation is CORRECT.

If logout returns 401:

• Token is NOT in localStorage['veza_access_token']
• This means login did NOT store the token
• Debug logs will reveal this

---

🧪 VALIDATION COMMANDS

Test 1: Login & Token Storage

cd apps/web
npx playwright test e2e/auth.spec.ts --grep "should login successfully" --headed

Expected:

✅ [DEBUG TOKEN] FOUND in localStorage[veza_access_token]: eyJhbGciOiJIUzI1NiIsInR5cCI...
✅ [AUTH TEST] Login successful

---

Test 2: Registration

npx playwright test e2e/auth.spec.ts --grep "should register" --headed

Expected:

✅ [AUTH TEST] Registration successful

---

Test 3: Logout

npx playwright test e2e/auth.spec.ts --grep "should logout" --headed

Expected:

🔍 [AUTH TEST] Checking token presence before logout...
✅ [AUTH TEST] Token present before logout: eyJhbGciOiJIUzI1NiIsInR5cCI...
✅ [AUTH TEST] Logout successful

---

Full Suite

npm run test:e2e

Expected Success Rate: 95%+ (38/40 tests)

---

📊 SUMMARY

Component	Before	After
Token Detection	Silent failure	5 search methods + debug logs
Logout Verification	No pre-check	Token verified before logout
Form Selectors	Already correct	Verified (no changes)
Logout Implementation	Already correct	Verified (apiClient with interceptor)

---

🎯 EXPECTED OUTCOME

Scenario 1: Tests Pass ✅

• Token is found in veza_access_token
• All authentication flows work correctly
• GREEN BUILD ACHIEVED 🟢

Scenario 2: Tests Fail with Debug Info 🔍

• Debug logs show WHERE token is stored (or not)
• Pre-logout check reveals if auth failed
• CLEAR PATH TO FIX IDENTIFIED

Either way, we now have COMPLETE VISIBILITY into token storage issues.

---

🔧 QUICK DEBUG GUIDE

Debug Output	Meaning	Action
✅ FOUND in localStorage[veza_access_token]	Working correctly	None
✅ FOUND in localStorage[token]	Token in wrong key	Update TokenStorage.ts
✅ FOUND in auth-storage.state	Using Zustand only	Update TokenStorage.ts to read Zustand
❌ NO TOKEN FOUND ANYWHERE	Login not storing token	Fix login flow
❌ NO TOKEN FOUND after login! Logout will fail	Auth failed	Check loginAsUser()

---

✅ COMPLETION STATUS

All 6 requested tasks have been completed:

1. ✅ Debug logging added to getAuthToken (100+ lines)
2. ✅ Enhanced logic for ANY key with "token" or "auth" (methods 4-5)
3. ✅ All selectors verified as correct (passwordConfirm)
4. ✅ "Existing Email" test verified (line 177)
5. ✅ "Password Mismatch" test verified (line 358)
6. ✅ Logout implementation verified (uses apiClient.post with interceptor)

The test suite is now instrumented and ready for validation.

---

NEXT STEP: Run npm run test:e2e and review the debug output! 🚀