fix(e2e): cherry-pick auth test fixes from TASK_12013 eval (models A+B)

Best-of-both from the A/B evaluation: Model B's dual-network Docker
setup, dynamic auth origin matching, and scoped test assertions combined
with Model A's admin UUID migration fix and container-aware seed script.

Key fixes:
- supabase-up.sh writes Docker service name to .env.supabase.local
- e2e-tests container gets NEXT_PUBLIC_SUPABASE_URL for test-user-factory
- Dockerfile.e2e pnpm version updated for lockfile compatibility
- auth.setup.ts uses dynamic BASE_URL origin instead of hardcoded localhost

Verified: 405 passed, 11 failed (firefox NS_BINDING_ABORTED), 13 flaky
(webkit timeouts). Chromium and all mobile projects clean.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Dev User

docker/Dockerfile.e2e

@@ -2,7 +2,7 @@
 FROM mcr.microsoft.com/playwright:v1.48.0-focal
 
 # Install pnpm
-RUN npm install -g pnpm@8
+RUN npm install -g pnpm@latest
 
 WORKDIR /app
 

docker/docker-compose.e2e.yml

@@ -4,6 +4,10 @@
 #
 # Discover dynamically assigned ports:
 # docker compose -f docker/docker-compose.e2e.yml port spoketowork 3000
+#
+# The spoketowork-net external network is created by the main docker-compose.yml
+# (network name: ${COMPOSE_PROJECT_NAME:-spoketowork}_SpokeToWork).
+# Both services join it so e2e-tests can reach supabase-kong for admin API calls.
 
 services:
   # Main application service
@@ -20,17 +24,22 @@ services:
       - ..:/app
       - /app/node_modules
       - /app/.next
+    env_file:
+      - ../.env
+      - path: ../.env.supabase.local
+        required: false
     environment:
       - WATCHPACK_POLLING=true
       - CHOKIDAR_USEPOLLING=true
     healthcheck:
-      test: ['CMD', 'curl', '-f', 'http://localhost:3000/SpokeToWork']
+      test: ['CMD', 'curl', '-f', 'http://localhost:3000/']
       interval: 30s
       timeout: 10s
       retries: 3
       start_period: 40s
     networks:
       - e2e-network
+      - spoketowork-net
 
   # E2E testing service with Playwright
   e2e-tests:
@@ -44,12 +53,18 @@ services:
       - ../tests/e2e:/app/tests/e2e
       - ../test-results:/app/test-results
       - ../playwright-report:/app/playwright-report
+    env_file:
+      - ../.env
     environment:
-      - BASE_URL=http://spoketowork:3000/SpokeToWork
+      - BASE_URL=http://spoketowork:3000
       - CI=false
       - PWDEBUG=${PWDEBUG:-0}
+      # Override to use Docker service name (container→container, not host-mapped port)
+      - NEXT_PUBLIC_SUPABASE_URL=http://supabase-kong:8000
+      - SUPABASE_INTERNAL_URL=http://supabase-kong:8000
     networks:
       - e2e-network
+      - spoketowork-net
     command: pnpm test:e2e
 
   # Optional: Playwright UI mode service
@@ -66,18 +81,27 @@ services:
       - ../tests/e2e:/app/tests/e2e
       - ../test-results:/app/test-results
       - ../playwright-report:/app/playwright-report
+    env_file:
+      - ../.env
     environment:
-      - BASE_URL=http://spoketowork:3000/SpokeToWork
+      - BASE_URL=http://spoketowork:3000
       - DISPLAY=:99
+      - NEXT_PUBLIC_SUPABASE_URL=http://supabase-kong:8000
+      - SUPABASE_INTERNAL_URL=http://supabase-kong:8000
     networks:
       - e2e-network
+      - spoketowork-net
     command: pnpm test:e2e:ui
     profiles:
       - ui
 
 networks:
   e2e-network:
     driver: bridge
+  # External network created by the main docker-compose.yml Supabase stack
+  spoketowork-net:
+    external: true
+    name: ${COMPOSE_PROJECT_NAME:-spoketowork}_SpokeToWork
 
 volumes:
   test-results:

scripts/seed-test-users.ts

@@ -23,7 +23,10 @@
 import { createClient } from '@supabase/supabase-js';
 import * as crypto from 'crypto';
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+// Prefer SUPABASE_INTERNAL_URL when running inside Docker (container→container)
+// Fall back to NEXT_PUBLIC_SUPABASE_URL for host-based runs
+const supabaseUrl =
+  process.env.SUPABASE_INTERNAL_URL ?? process.env.NEXT_PUBLIC_SUPABASE_URL;
 const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
 
 // Get credentials from env vars - REQUIRED, no fallbacks
@@ -139,6 +142,7 @@ async function setupAdminUser(): Promise<boolean> {
       console.log('  🔐 Creating admin auth user...');
       const { data: authData, error: authError } =
         await supabase.auth.admin.createUser({
+          id: ADMIN_USER.id, // Fixed UUID for consistent welcome message sender
           email: ADMIN_USER.email,
           password: 'AdminPassword123!', // Not used - no login needed
           email_confirm: true,

scripts/supabase-up.sh

@@ -30,9 +30,12 @@ if [ -z "$KONG_PORT" ]; then
   exit 1
 fi
 
-# Write dynamic Supabase config for the app container
+# Write Supabase config for the app container.
+# Use the Docker service name (supabase-kong:8000) so that Playwright/Next.js
+# running INSIDE the container can reach Supabase via the internal network.
+# Host-side browser access uses the host-mapped port printed at the end.
 cat > .env.supabase.local <<EOF
-NEXT_PUBLIC_SUPABASE_URL=http://localhost:$KONG_PORT
+NEXT_PUBLIC_SUPABASE_URL=http://supabase-kong:8000
 NEXT_PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY
 EOF
 

supabase/migrations/20251006_complete_monolithic_setup.sql

@@ -1285,11 +1285,11 @@ COMMENT ON TABLE group_keys IS 'Encrypted symmetric group keys per member per ve
 -- ============================================================================
 
 -- Admin profile for system welcome messages (Feature 002)
--- Fixed UUID: a30ac480-9050-4853-b0ae-4e3d9e24259d
+-- Fixed UUID: 00000000-0000-0000-0000-000000000001 (matches seed-test-users.ts)
 -- Only insert if admin user exists in auth.users (created via Supabase Auth)
 INSERT INTO user_profiles (id, username, display_name, welcome_message_sent)
-SELECT 'a30ac480-9050-4853-b0ae-4e3d9e24259d', 'spoketowork', 'SpokeToWork', TRUE
-WHERE EXISTS (SELECT 1 FROM auth.users WHERE id = 'a30ac480-9050-4853-b0ae-4e3d9e24259d')
+SELECT '00000000-0000-0000-0000-000000000001', 'spoketowork', 'SpokeToWork', TRUE
+WHERE EXISTS (SELECT 1 FROM auth.users WHERE id = '00000000-0000-0000-0000-000000000001')
 ON CONFLICT (id) DO NOTHING;
 
 -- ============================================================================

tests/e2e/auth.setup.ts

@@ -49,12 +49,23 @@ function isAuthStateValid(): boolean {
 
     const state = JSON.parse(fs.readFileSync(AUTH_FILE, 'utf-8'));
 
-    // Find origin for localhost (support both 3000 and 3001)
-    const origin = state.origins?.find(
-      (o: { origin: string }) =>
-        o.origin.includes('localhost:3000') ||
-        o.origin.includes('localhost:3001')
-    );
+    // Find origin matching the base URL host (localhost or Docker service name).
+    // BASE_URL may be http://localhost:3000 or http://spoketowork:3000 etc.
+    const baseHost = (() => {
+      try {
+        return new URL(process.env.BASE_URL || 'http://localhost:3000').host;
+      } catch {
+        return 'localhost:3000';
+      }
+    })();
+
+    const origin = state.origins?.find((o: { origin: string }) => {
+      try {
+        return new URL(o.origin).host === baseHost;
+      } catch {
+        return false;
+      }
+    });
 
     if (!origin) {
       console.log('No localhost origin found in auth state');

tests/e2e/auth/session-persistence.spec.ts

@@ -136,8 +136,11 @@ test.describe('Session Persistence E2E', () => {
 
     // Tokens might be same if not near expiry, but refresh mechanism should exist
     // The important part is that navigation doesn't break authentication
-    await expect(page).toHaveURL('/profile');
-    await expect(page.getByText(testUser.email)).toBeVisible();
+    await expect(page).toHaveURL(/\/profile/);
+    // Email appears in multiple places (nav, card title, card body) — target heading
+    await expect(
+      page.getByRole('heading', { name: testUser.email })
+    ).toBeVisible();
 
     // Sign out
     await signOut(page);
@@ -173,8 +176,10 @@ test.describe('Session Persistence E2E', () => {
     await newPage.goto('/profile');
 
     // Verify still authenticated
-    await expect(newPage).toHaveURL('/profile');
-    await expect(newPage.getByText(testUser.email)).toBeVisible();
+    await expect(newPage).toHaveURL(/\/profile/);
+    await expect(
+      newPage.getByRole('heading', { name: testUser.email })
+    ).toBeVisible();
 
     await newContext.close();
   });
@@ -195,6 +200,8 @@ test.describe('Session Persistence E2E', () => {
 
     // Sign out (with verify: false since we verify manually below)
     await signOut(page, { verify: false });
+    // Wait for page to fully settle after sign-out navigation (window.location.href = '/')
+    await page.waitForLoadState('networkidle');
 
     // Verify session cleared from storage
     const afterSignOut = await page.evaluate(() =>
@@ -232,17 +239,22 @@ test.describe('Session Persistence E2E', () => {
 
     // Page 2 should also be authenticated (shared storage)
     await page2.goto('/profile');
-    await expect(page2).toHaveURL('/profile');
-    await expect(page2.getByText(testUser.email)).toBeVisible();
+    await expect(page2).toHaveURL(/\/profile/);
+    await expect(
+      page2.getByRole('heading', { name: testUser.email })
+    ).toBeVisible();
 
     // Sign out on page 1 (using signOut helper with page1)
     await signOut(page1, { verify: false });
 
-    // Page 2 should detect sign out (if using realtime sync)
-    // Note: This depends on implementation - may require page reload
-    await page2.reload();
-    await page2.waitForURL(/\/sign-in/);
-    await expect(page2).toHaveURL(/\/sign-in/);
+    // Page 2 detects sign out via cross-tab SIGNED_OUT event (FR-009)
+    // AuthContext.onAuthStateChange redirects to home '/', not '/sign-in'
+    await page2.waitForURL(
+      (url) => url.pathname === '/' || url.pathname.includes('/sign-in'),
+      { timeout: 10000 }
+    );
+    // Verify we're no longer on the profile page
+    await expect(page2).not.toHaveURL(/\/profile/);
 
     await context.close();
   });
@@ -260,12 +272,14 @@ test.describe('Session Persistence E2E', () => {
     // Reload page
     await page.reload();
 
-    // Verify still authenticated
-    await expect(page.getByText(testUser.email)).toBeVisible();
+    // Verify still authenticated (email appears in nav, card title, card body — target heading)
+    await expect(
+      page.getByRole('heading', { name: testUser.email })
+    ).toBeVisible();
 
     // Navigate to another protected route
     await page.goto('/account');
-    await expect(page).toHaveURL('/account');
+    await expect(page).toHaveURL(/\/account/);
 
     // Sign out
     await signOut(page);

tests/e2e/auth/user-registration.spec.ts

@@ -21,21 +21,24 @@ test.describe('User Registration E2E', () => {
   }) => {
     // Step 1: Navigate to sign-up page
     await page.goto('/sign-up');
-    await expect(page).toHaveURL('/sign-up');
-    await expect(page.getByRole('heading', { name: 'Sign Up' })).toBeVisible();
+    await expect(page).toHaveURL(/\/sign-up/);
+    // Page heading is "Create Account"
+    await expect(
+      page.getByRole('heading', { name: 'Create Account' })
+    ).toBeVisible();
 
-    // Step 2: Fill sign-up form
+    // Step 3: Fill sign-up form
     await page.getByLabel('Email').fill(testEmail);
     await page.getByLabel('Password', { exact: true }).fill(testPassword);
     await page.getByLabel('Confirm Password').fill(testPassword);
 
-    // Step 3: Check Remember Me (optional)
+    // Step 4: Check Remember Me (optional)
     await page.getByLabel('Remember me').check();
 
-    // Step 4: Submit sign-up form
+    // Step 5: Submit sign-up form
     await page.getByRole('button', { name: 'Sign Up' }).click();
 
-    // Step 5: Verify redirected to verify-email or profile
+    // Step 6: Verify redirected to verify-email or profile
     // Note: In production, email verification is required
     await page.waitForURL(/\/(verify-email|profile)/);
 
@@ -74,16 +77,18 @@ test.describe('User Registration E2E', () => {
   test('should show validation errors for invalid email', async ({ page }) => {
     await page.goto('/sign-up');
 
-    // Fill with invalid email
-    await page.getByLabel('Email').fill('not-an-email');
+    // Use email that passes HTML5 validation but fails app's TLD validation
+    await page.getByLabel('Email').fill('user@invalid.badtld');
     await page.getByLabel('Password', { exact: true }).fill(testPassword);
     await page.getByLabel('Confirm Password').fill(testPassword);
 
     // Submit form
     await page.getByRole('button', { name: 'Sign Up' }).click();
 
-    // Verify validation error shown
-    await expect(page.getByText(/invalid email/i)).toBeVisible();
+    // Verify validation error shown (TLD validation message)
+    await expect(
+      page.getByText(/invalid|missing.*TLD|top-level domain/i)
+    ).toBeVisible();
   });
 
   test('should show validation errors for weak password', async ({ page }) => {
@@ -121,8 +126,8 @@ test.describe('User Registration E2E', () => {
   test('should navigate to sign-in from sign-up page', async ({ page }) => {
     await page.goto('/sign-up');
 
-    // Click sign-in link
-    await page.getByRole('link', { name: /already have an account/i }).click();
+    // Click inline sign-in link (text is "Sign in", not "Already have an account")
+    await page.getByRole('link', { name: 'Sign in', exact: true }).click();
 
     // Verify navigated to sign-in
     await expect(page).toHaveURL(/\/sign-in/);
@@ -131,12 +136,12 @@ test.describe('User Registration E2E', () => {
   test('should display OAuth buttons on sign-up page', async ({ page }) => {
     await page.goto('/sign-up');
 
-    // Verify OAuth buttons present
+    // Verify OAuth buttons present (text is "Continue with GitHub/Google")
     await expect(
-      page.getByRole('button', { name: /sign up with github/i })
+      page.getByRole('button', { name: /continue with github/i })
     ).toBeVisible();
     await expect(
-      page.getByRole('button', { name: /sign up with google/i })
+      page.getByRole('button', { name: /continue with google/i })
     ).toBeVisible();
   });
 });

tests/e2e/utils/auth-helpers.ts

@@ -48,7 +48,8 @@ export async function loginAndVerify(
   credentials: LoginCredentials,
   options: LoginOptions = {}
 ): Promise<void> {
-  const { urlTimeout = 10000, elementTimeout = 15000 } = options;
+  // Use longer timeouts for local Supabase which can be slow under concurrent load
+  const { urlTimeout = 30000, elementTimeout = 30000 } = options;
 
   // Navigate to sign-in page
   await page.goto('/sign-in');