chore: enhance development environment and performance optimizations

- Update docker-compose.dev.yml to include performance-related environment variables. - Modify next.config.js for SWC minification, Turbopack integration, and Sentry configuration. - Adjust package.json scripts to enable Turbopack for faster development builds. - Update EmailLogin component to improve form handling and error management.
2026-03-11 08:54:26 +00:00 · 2025-09-30 00:52:15 -04:00 · 2025-09-30 00:52:15 -04:00 · fe93a20896
commit fe93a20896
parent f2b0571bb7
11 changed files with 520 additions and 168 deletions
--- a/HANDOFF.md
+++ b/HANDOFF.md
@ -1,19 +1,22 @@
 # 🚀 Omnivore Migration Handoff - Session Complete

 ## 📊 Session Summary
+
 **Date**: Current session  
 **Duration**: Extended development session  
 **Major Achievement**: Complete NestJS authentication system with web integration

 ## ✅ What Was Accomplished

-### 1. **Complete NestJS Authentication System** 
+### 1. **Complete NestJS Authentication System**
+
 - Full authentication module with JWT, OAuth structure, and RBAC
 - Type-safe API responses with comprehensive DTO system
 - Swagger documentation for all endpoints
 - Security hardening and vulnerability fixes

 ### 2. **Web Frontend Integration**
+
 - Successfully integrated web app with NestJS API (`/api/v2` endpoints)
 - Fixed authentication flow with proper JSON responses
 - Eliminated backend redirects (anti-pattern)
@ -21,6 +24,7 @@
 - CORS and CSP optimizations

 ### 3. **Performance Optimization**
+
 - **25-50x faster cold starts**: 30-60s → 1.2s
 - **Turbopack enabled**: Next.js 13.5+ experimental bundler
 - **Sentry disabled**: Clean development logs
@ -28,6 +32,7 @@
 - **Code splitting**: Optimized bundle sizes

 ### 4. **Database Integration**
+
 - Complete TypeORM entities for User, Profile, Personalization, Roles
 - Hybrid migration approach using existing Postgrator system
 - Both Express and NestJS APIs access same database
@ -35,12 +40,14 @@
 ## 🧪 Testing Status

 ### ✅ **Working**
+
 - Email/password login
 - User registration
 - Authentication flow end-to-end
 - Web frontend integration

 ### ⏳ **Ready for Testing** (Lower Priority)
+
 - Google OAuth integration
 - Apple OAuth integration
 - Email verification (pending email service)
@ -48,13 +55,17 @@
 ## 🎯 Next Session Recommendations

 ### **Option A: Vite Migration (RECOMMENDED)**
+
 **Why**: Dramatic performance gains (50-100x faster) and optimal timing
+
 - **Effort**: 1-2 weeks
 - **Gains**: <500ms cold starts, <50ms HMR, 30-50% smaller bundles
 - **Status**: Ready to start immediately

 ### **Option B: Continue NestJS Migration**
+
 **Why**: Continue backend migration momentum
+
 - **Next**: ARC-004 GraphQL Module Setup
 - **Effort**: 2 days
 - **Status**: Ready to start
@ -62,12 +73,14 @@
 ## 🔧 Development Environment Status

 ### **Current Setup**
+
 - **NestJS API**: Running on port 4001 (`/api/v2` endpoints)
 - **Web Frontend**: Running on port 3000 (optimized with Turbopack)
 - **Database**: PostgreSQL with both APIs connected
 - **Docker**: `docker-compose.dev.yml` for development

 ### **Performance Metrics**
+
 - **Cold Start**: ~1.2 seconds (was 30-60s)
 - **HMR**: <100ms (was 2-5s)
 - **Memory Usage**: ~350MB (was 800MB+)
@ -76,34 +89,40 @@
 ## 📁 Key Files Modified

 ### **NestJS Authentication**
+
 - `packages/api-nest/src/auth/` - Complete auth system
 - `packages/api-nest/src/auth/dto/auth-responses.dto.ts` - Type-safe responses
 - `packages/api-nest/src/user/` - User entities and services

 ### **Web Integration**
+
 - `packages/web/lib/appConfig.ts` - Updated API endpoints
 - `packages/web/components/templates/auth/EmailLogin.tsx` - Fixed auth flow
 - `packages/web/next.config.js` - Performance optimizations

 ### **Development Environment**
+
 - `docker-compose.dev.yml` - Streamlined development setup
 - `packages/web/sentry.*.config.ts` - Disabled for development

 ## 🚨 Important Notes

 ### **Security Considerations**
+
 - Authentication system has been hardened
 - Fixed localStorage/JWT token vulnerabilities
 - Implemented proper CORS and CSP
 - **TODO**: Consider implementing CSRF protection

 ### **Performance Notes**
+
 - Sentry completely disabled in development
 - Turbopack provides significant speed improvements
 - Filesystem caching enabled for instant restarts
 - **TODO**: Consider Vite migration for even better performance

 ### **Testing Notes**
+
 - OAuth integrations are ready but need testing
 - Email verification pending email service integration
 - All core authentication flows working
@ -111,27 +130,32 @@
 ## 🎯 Handoff Instructions

 ### **To Continue NestJS Migration**
+
 1. Start with ARC-004 GraphQL Module Setup
 2. Reference `docs/architecture/unified-migration-backlog.md`
 3. Use existing authentication system as foundation

 ### **To Start Vite Migration**
+
 1. Begin with ARC-004B Frontend Performance Optimization
 2. Create new Vite configuration alongside Next.js
 3. Migrate components incrementally
 4. Maintain authentication integration throughout

 ### **To Test OAuth**
+
 1. Set up Google/Apple OAuth credentials
 2. Test OAuth flows in development
 3. Verify token handling and user creation

 ## 📚 Documentation References
+
 - `docs/architecture/unified-migration-backlog.md` - Complete migration plan
 - `packages/api-nest/README.md` - NestJS setup guide
 - `packages/api-nest/SETUP.md` - Development environment setup

 ## 🔄 Session Continuity
+
 This session established a solid foundation for continued development. The authentication system is complete and working, performance is dramatically improved, and the next steps are clearly defined. Choose between continuing the NestJS migration or pursuing the Vite frontend optimization based on priorities.

 **Recommendation**: Start with Vite migration for maximum impact, then return to NestJS GraphQL setup.
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@ -111,6 +111,14 @@ services:
      - NEXT_PUBLIC_DEV_SERVER_BASE_URL=http://localhost:4001
      - NEXT_PUBLIC_HIGHLIGHTS_BASE_URL=http://localhost:3000

+      # Performance optimizations
+      - NEXT_TELEMETRY_DISABLED=1
+      - SENTRY_IGNORE_API_RESOLUTION_ERROR=1
+      - GENERATE_SOURCEMAP=false
+      - SENTRY_DISABLE_AUTO_INSTRUMENTATION=1
+      - SENTRY_DISABLE_SERVER_WEBPACK_PLUGIN=1
+      - SENTRY_DISABLE_CLIENT_WEBPACK_PLUGIN=1
+
      # Server-side Environment
      - SERVER_BASE_URL=http://api-nest:4001
      - BASE_URL=http://localhost:3000
@ -136,6 +144,7 @@ services:
    volumes:
      - ./packages/web:/app/packages/web
      - /app/packages/web/node_modules
+      - /app/packages/web/.next # Cache Next.js builds
    command: sh -c "cd packages/web && yarn dev:dev"
    restart: unless-stopped

--- a/docs/architecture/unified-migration-backlog.md
+++ b/docs/architecture/unified-migration-backlog.md
@ -7,6 +7,7 @@ This backlog consolidates the simplified and original migration strategies into
 ## 🎯 Current Status & Next Steps

 ### ✅ **COMPLETED** (Major Milestone Achieved)
+
 - **ARC-001**: NestJS Package Setup - Complete infrastructure
 - **ARC-002**: Health Checks & Observability - Monitoring ready
 - **ARC-003**: Authentication Module - Full auth system with web integration
@ -14,15 +15,18 @@ This backlog consolidates the simplified and original migration strategies into
 - **Performance Optimization**: 25-50x faster development (Next.js + Turbopack)

 ### 🔄 **READY TO START** (Choose One)
+
 1. **ARC-004**: GraphQL Module Setup (2 days) - Continue NestJS migration
 2. **ARC-004B**: Vite Migration (1-2 weeks) - Dramatic frontend performance boost

 ### ⏳ **PENDING TESTING** (Lower Priority)
+
 - Google OAuth integration testing
- Apple OAuth integration testing  
+- Apple OAuth integration testing
 - Email verification (pending email service integration)

 ### 🎯 **RECOMMENDED NEXT**: ARC-004B Vite Migration
+
 Given the significant performance gains (50-100x faster) and the fact that we're rebuilding the backend, now is the optimal time to modernize the frontend stack.

 ---
--- a/packages/api-nest/src/auth/auth.controller.spec.ts
+++ b/packages/api-nest/src/auth/auth.controller.spec.ts
@ -20,6 +20,10 @@ describe('AuthController', () => {
    refreshToken: jest.fn(),
  }

+  const mockResponse = {
+    cookie: jest.fn(),
+  } as any
+
  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      controllers: [AuthController],
@ -57,7 +61,7 @@ describe('AuthController', () => {
      mockAuthService.validateUser.mockResolvedValue(mockUser)
      mockAuthService.login.mockResolvedValue(mockResult)

-      const result = await controller.login(loginDto)
+      const result = await controller.login(loginDto, mockResponse)

      expect(authService.validateUser).toHaveBeenCalledWith(
        loginDto.email,
@ -70,9 +74,13 @@ describe('AuthController', () => {
    it('should throw UnauthorizedException when credentials are invalid', async () => {
      mockAuthService.validateUser.mockResolvedValue(null)

-      await expect(controller.login(loginDto)).rejects.toThrow(
-        UnauthorizedException,
-      )
+      const result = await controller.login(loginDto, mockResponse)
+
+      expect(result).toEqual({
+        success: false,
+        errorCode: 'INVALID_CREDENTIALS',
+        message: 'Invalid email or password',
+      })
      expect(authService.validateUser).toHaveBeenCalledWith(
        loginDto.email,
        loginDto.password,
--- a/packages/api-nest/src/auth/auth.controller.ts
+++ b/packages/api-nest/src/auth/auth.controller.ts
@ -9,13 +9,18 @@ import {
  HttpStatus,
  BadRequestException,
  UseGuards,
+  Res,
+  Headers,
 } from '@nestjs/common'
+import { Response } from 'express'
 import {
  ApiTags,
  ApiOperation,
  ApiBearerAuth,
  ApiBody,
  ApiConflictResponse,
+  ApiOkResponse,
+  ApiUnauthorizedResponse,
 } from '@nestjs/swagger'
 import { AuthService } from './auth.service'
 import { LoginDto } from './dto/login.dto'
@ -23,6 +28,13 @@ import { RegisterDto } from './dto/register.dto'
 import { ConfirmEmailDto } from './dto/confirm-email.dto'
 import { ResendVerificationDto } from './dto/resend-verification.dto'
 import { JwtAuthGuard } from './guards/jwt-auth.guard'
+import {
+  LoginResponse,
+  RegisterResponse,
+  AuthVerificationResponse,
+  AuthErrorCode,
+  AuthStatus,
+} from './dto/auth-responses.dto'

@ApiTags('auth')
@Controller('auth')
@ -31,24 +43,119 @@ export class AuthController {

  @ApiOperation({ summary: 'Login with email and password' })
  @ApiBody({ type: LoginDto })
+  @ApiOkResponse({
+    description: 'Login successful',
+    type: 'LoginSuccessResponse',
+  })
+  @ApiUnauthorizedResponse({
+    description: 'Invalid credentials or account issues',
+    type: 'AuthErrorResponse',
+  })
  @Post('login')
-  async login(@Body() loginDto: LoginDto) {
-    const user = await this.authService.validateUser(
-      loginDto.email,
-      loginDto.password,
-    )
-    if (!user) {
-      throw new UnauthorizedException('Invalid credentials')
+  async login(
+    @Body() loginDto: LoginDto,
+    @Res({ passthrough: true }) res: Response,
+  ): Promise<LoginResponse> {
+    try {
+      const user = await this.authService.validateUser(
+        loginDto.email,
+        loginDto.password,
+      )
+
+      if (!user) {
+        return {
+          success: false,
+          errorCode: AuthErrorCode.INVALID_CREDENTIALS,
+          message: 'Invalid email or password',
+        }
+      }
+
+      if (!user.canAccess()) {
+        // Handle pending verification or archived account
+        if (user.status === 'PENDING') {
+          return {
+            success: false,
+            errorCode: AuthErrorCode.PENDING_VERIFICATION,
+            message: 'Please verify your email address',
+          }
+        } else {
+          return {
+            success: false,
+            errorCode: AuthErrorCode.ACCOUNT_SUSPENDED,
+            message: 'Your account has been suspended',
+          }
+        }
+      }
+
+      // Generate login result
+      const loginResult = await this.authService.login(user)
+
+      // Set auth cookie for web browser compatibility
+      res.cookie('auth', loginResult.accessToken, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        maxAge: 365 * 24 * 60 * 60 * 1000, // 1 year
+        path: '/',
+        sameSite: 'lax',
+      })
+
+      return loginResult
+    } catch (error) {
+      return {
+        success: false,
+        errorCode: AuthErrorCode.AUTH_FAILED,
+        message: 'Authentication failed',
+      }
    }
-    return this.authService.login(user)
  }

  @ApiOperation({ summary: 'Register a new user account' })
  @ApiBody({ type: RegisterDto })
+  @ApiOkResponse({
+    description: 'Registration successful',
+    type: 'RegisterResponse',
+  })
  @ApiConflictResponse({ description: 'Email already exists' })
  @Post('register')
-  async register(@Body() registerDto: RegisterDto) {
-    return this.authService.register(registerDto)
+  async register(@Body() registerDto: RegisterDto): Promise<RegisterResponse> {
+    try {
+      const result = await this.authService.register(registerDto)
+
+      // Return the result directly from the service, which already has proper typing
+      return result
+    } catch (error) {
+      // Handle specific registration errors
+      if (error instanceof Error) {
+        if (error.message.includes('EMAIL_ALREADY_EXISTS')) {
+          return {
+            success: false,
+            errorCode: AuthErrorCode.EMAIL_ALREADY_EXISTS,
+            message: 'An account with this email already exists',
+          }
+        }
+        if (error.message.includes('INVALID_EMAIL')) {
+          return {
+            success: false,
+            errorCode: AuthErrorCode.INVALID_EMAIL,
+            message: 'Please provide a valid email address',
+          }
+        }
+        if (error.message.includes('WEAK_PASSWORD')) {
+          return {
+            success: false,
+            errorCode: AuthErrorCode.WEAK_PASSWORD,
+            message: 'Password does not meet security requirements',
+          }
+        }
+      }
+
+      // Generic error
+      return {
+        success: false,
+        errorCode: AuthErrorCode.REGISTRATION_FAILED,
+        message: 'Registration failed. Please try again.',
+      }
+    }
  }

  @ApiOperation({ summary: 'Get current user profile' })
@ -103,4 +210,46 @@ export class AuthController {
      throw error
    }
  }
+
+  @ApiOperation({ summary: 'Verify authentication status (for web frontend)' })
+  @ApiOkResponse({
+    description: 'Authentication status verified',
+    type: 'AuthVerificationResponse',
+  })
+  @Get('verify')
+  async verifyAuth(
+    @Request() req,
+    @Headers('authorization') authHeader?: string,
+  ): Promise<AuthVerificationResponse> {
+    try {
+      // Check for auth token in header or cookie
+      const token = authHeader || req.cookies?.auth
+
+      if (!token) {
+        return { authStatus: AuthStatus.NOT_AUTHENTICATED }
+      }
+
+      // Validate the token
+      const user = await this.authService.validateToken(token)
+
+      if (!user) {
+        return { authStatus: AuthStatus.NOT_AUTHENTICATED }
+      }
+
+      if (!user.canAccess()) {
+        if (user.status === 'PENDING') {
+          return { authStatus: AuthStatus.PENDING_USER }
+        } else {
+          return { authStatus: AuthStatus.NOT_AUTHENTICATED }
+        }
+      }
+
+      return {
+        authStatus: AuthStatus.AUTHENTICATED,
+        user: { id: user.id, email: user.email, name: user.name },
+      }
+    } catch (error) {
+      return { authStatus: AuthStatus.NOT_AUTHENTICATED }
+    }
+  }
 }
--- a/packages/api-nest/src/auth/auth.service.ts
+++ b/packages/api-nest/src/auth/auth.service.ts
@ -12,6 +12,12 @@ import { NotificationClient } from './interfaces/notification-client.interface'
 import { AnalyticsService } from '../analytics/analytics.service'
 import { PubSubService } from '../pubsub/pubsub.service'
 import { IntercomService } from '../integrations/intercom.service'
+import {
+  LoginSuccessResponse,
+  RegisterSuccessWithLoginResponse,
+  RegisterSuccessWithVerificationResponse,
+  AuthUserData,
+} from './dto/auth-responses.dto'

 export interface JwtPayload {
  sub: string
@ -42,7 +48,31 @@ export class AuthService {
    return this.userService.validateCredentials(email, password)
  }

-  async login(user: User) {
+  async validateToken(token: string): Promise<User | null> {
+    try {
+      // Remove 'Bearer ' prefix if present
+      const cleanToken = token.replace(/^Bearer\s+/, '')
+
+      // Verify and decode the JWT token
+      const payload = this.jwtService.verify(cleanToken) as JwtPayload
+
+      if (!payload.sub) {
+        return null
+      }
+
+      // Get user from database
+      const user = await this.userService.findById(payload.sub)
+
+      return user
+    } catch (error) {
+      this.logger.warn('Token validation failed', {
+        error: error instanceof Error ? error.message : 'Unknown error',
+      })
+      return null
+    }
+  }
+
+  async login(user: User): Promise<LoginSuccessResponse> {
    this.logger
      .withContext({ userId: user.id, email: user.email })
      .log('User login attempt', { status: user.status, role: user.role })
@ -81,6 +111,8 @@ export class AuthService {

    return {
      success: true,
+      message: 'Login successful',
+      redirectUrl: '/home',
      user: {
        id: user.id,
        email: user.email,
@ -95,7 +127,11 @@ export class AuthService {
    }
  }

-  async register(registerDto: RegisterDto) {
+  async register(
+    registerDto: RegisterDto,
+  ): Promise<
+    RegisterSuccessWithLoginResponse | RegisterSuccessWithVerificationResponse
+  > {
    this.logger.log('User registration started', {
      email: registerDto.email,
      hasInviteCode: !!registerDto.inviteCode,
@ -166,6 +202,9 @@ export class AuthService {

      return {
        success: true,
+        message:
+          'Registration successful. Please check your email for verification.',
+        redirectUrl: '/auth/email-login',
        pendingEmailVerification: true,
      }
    }
--- a/packages/web/components/templates/auth/EmailLogin.tsx
+++ b/packages/web/components/templates/auth/EmailLogin.tsx
@ -11,42 +11,67 @@ import { formatMessage } from '../../../locales/en/messages'
 import Link from 'next/link'
 import { Recaptcha } from '../../elements/Recaptcha'

-const LoginForm = (): JSX.Element => {
+const LoginForm = ({
+  onSubmit,
+}: {
+  onSubmit: (email: string, password: string) => void
+}): JSX.Element => {
  const [email, setEmail] = useState<string>('')
  const [password, setPassword] = useState<string>('')

-  return (
-    <VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
-      <VStack css={{ width: '100%', gap: '5px' }}>
-        <FormLabel css={{ color: '#D9D9D9' }}>Email</FormLabel>
-        <BorderedFormInput
-          autoFocus={true}
-          key="email"
-          type="email"
-          name="email"
-          value={email}
-          placeholder="Email"
-          css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
-          onChange={(e) => {
-            e.preventDefault()
-            setEmail(e.target.value)
-          }}
-        />
-      </VStack>
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit(email, password)
+  }

-      <VStack css={{ width: '100%', gap: '5px' }}>
-        <FormLabel css={{ color: '#D9D9D9' }}>Password</FormLabel>
-        <BorderedFormInput
-          key="password"
-          type="password"
-          name="password"
-          value={password}
-          placeholder="Password"
-          css={{ bg: '#2A2A2A', color: 'white', border: 'unset' }}
-          onChange={(e) => setPassword(e.target.value)}
-        />
+  return (
+    <form onSubmit={handleSubmit}>
+      <VStack
+        css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
+      >
+        <VStack css={{ width: '100%', gap: '5px' }}>
+          <FormLabel css={{ color: '#D9D9D9' }}>Email</FormLabel>
+          <BorderedFormInput
+            autoFocus={true}
+            key="email"
+            type="email"
+            name="email"
+            value={email}
+            placeholder="Email"
+            css={{
+              backgroundColor: '#2A2A2A',
+              color: 'white',
+              border: 'unset',
+            }}
+            onChange={(e) => {
+              e.preventDefault()
+              setEmail(e.target.value)
+            }}
+          />
+        </VStack>
+
+        <VStack css={{ width: '100%', gap: '5px' }}>
+          <FormLabel css={{ color: '#D9D9D9' }}>Password</FormLabel>
+          <BorderedFormInput
+            key="password"
+            type="password"
+            name="password"
+            value={password}
+            placeholder="Password"
+            css={{ bg: '#2A2A2A', color: 'white', border: 'unset' }}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </VStack>
+
+        <Button
+          type="submit"
+          style="ctaDarkYellow"
+          css={{ width: '100%', fontSize: '16px' }}
+        >
+          Login
+        </Button>
      </VStack>
-    </VStack>
+    </form>
  )
 }

@ -66,123 +91,137 @@ export function EmailLogin(): JSX.Element {
    setErrorMessage(errorMsg)
  }, [router.isReady, router.query])

+  const handleLogin = async (email: string, password: string) => {
+    try {
+      const response = await fetch(`${fetchEndpoint}/auth/login`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({ email, password }),
+      })
+
+      const result = await response.json()
+
+      if (result.success) {
+        // Store auth token and redirect to specified URL
+        if (result.accessToken) {
+          localStorage.setItem('authToken', result.accessToken)
+          localStorage.setItem('authVerified', 'true')
+        }
+        window.location.href = result.redirectUrl || '/home'
+      } else {
+        // Handle login error
+        setErrorMessage(result.message || 'Login failed')
+      }
+    } catch (error) {
+      setErrorMessage('Network error. Please try again.')
+    }
+  }
+
  return (
-    <form action={`${fetchEndpoint}/auth/login`} method="POST">
-      <VStack
+    <VStack
+      alignment="center"
+      css={{
+        padding: '20px',
+        minWidth: '340px',
+        width: '70vw',
+        maxWidth: '576px',
+        borderRadius: '8px',
+        background: '#343434',
+        border: '1px solid #6A6968',
+        boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
+      }}
+    >
+      <StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
+        Login
+      </StyledText>
+
+      <LoginForm onSubmit={handleLogin} />
+
+      {process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY && (
+        <>
+          <Recaptcha
+            setRecaptchaToken={(token) => {
+              if (recaptchaTokenRef.current) {
+                recaptchaTokenRef.current.value = token
+              } else {
+                console.log('error updating recaptcha token')
+              }
+            }}
+          />
+          <input ref={recaptchaTokenRef} type="hidden" name="recaptchaToken" />
+        </>
+      )}
+
+      {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
+
+      <HStack
        alignment="center"
+        distribution="end"
        css={{
-          padding: '20px',
-          minWidth: '340px',
-          width: '70vw',
-          maxWidth: '576px',
-          borderRadius: '8px',
-          background: '#343434',
-          border: '1px solid #6A6968',
-          boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
+          gap: '10px',
+          width: '100%',
+          height: '80px',
        }}
      >
-        <StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
-          Login
-        </StyledText>
-
-        <LoginForm />
-
-        {process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY && (
-          <>
-            <Recaptcha
-              setRecaptchaToken={(token) => {
-                if (recaptchaTokenRef.current) {
-                  recaptchaTokenRef.current.value = token
-                } else {
-                  console.log('error updating recaptcha token')
-                }
-              }}
-            />
-            <input
-              ref={recaptchaTokenRef}
-              type="hidden"
-              name="recaptchaToken"
-            />
-          </>
-        )}
-
-        {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
-
-        <HStack
-          alignment="center"
-          distribution="end"
-          css={{
-            gap: '10px',
-            width: '100%',
-            height: '80px',
+        <Button
+          style={'cancelAuth'}
+          type="button"
+          onClick={async (event) => {
+            window.localStorage.removeItem('authVerified')
+            window.localStorage.removeItem('authToken')
+            try {
+              await logoutMutation()
+            } catch (e) {
+              console.log('error logging out', e)
+            }
+            window.location.href = '/'
          }}
        >
-          <Button
-            style={'cancelAuth'}
-            type="button"
-            onClick={async (event) => {
-              window.localStorage.removeItem('authVerified')
-              window.localStorage.removeItem('authToken')
-              try {
-                await logoutMutation()
-              } catch (e) {
-                console.log('error logging out', e)
-              }
-              window.location.href = '/'
-            }}
+          Cancel
+        </Button>
+      </HStack>
+      <StyledText
+        style="action"
+        css={{
+          m: '0px',
+          pt: '16px',
+          width: '100%',
+          color: '$omnivoreLightGray',
+          textAlign: 'center',
+          whiteSpace: 'normal',
+        }}
+      >
+        Don&apos;t have an account?{' '}
+        <Link href="/auth/email-signup" passHref legacyBehavior>
+          <StyledTextSpan style="actionLink" css={{ color: '$ctaBlue' }}>
+            Sign up
+          </StyledTextSpan>
+        </Link>
+      </StyledText>
+      <StyledText
+        style="action"
+        css={{
+          mt: '0px',
+          pt: '4px',
+          width: '100%',
+          color: '$omnivoreLightGray',
+          textAlign: 'center',
+          whiteSpace: 'normal',
+        }}
+      >
+        Forgot your password?{' '}
+        <Link href="/auth/forgot-password" passHref legacyBehavior>
+          <StyledTextSpan
+            style="actionLink"
+            css={{ color: '$omnivoreLightGray' }}
          >
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            style="ctaBlue"
-            css={{
-              padding: '10px 50px',
-            }}
-          >
-            Login
-          </Button>
-        </HStack>
-        <StyledText
-          style="action"
-          css={{
-            m: '0px',
-            pt: '16px',
-            width: '100%',
-            color: '$omnivoreLightGray',
-            textAlign: 'center',
-            whiteSpace: 'normal',
-          }}
-        >
-          Don&apos;t have an account?{' '}
-          <Link href="/auth/email-signup" passHref legacyBehavior>
-            <StyledTextSpan style="actionLink" css={{ color: '$ctaBlue' }}>
-              Sign up
-            </StyledTextSpan>
-          </Link>
-        </StyledText>
-        <StyledText
-          style="action"
-          css={{
-            mt: '0px',
-            pt: '4px',
-            width: '100%',
-            color: '$omnivoreLightGray',
-            textAlign: 'center',
-            whiteSpace: 'normal',
-          }}
-        >
-          Forgot your password?{' '}
-          <Link href="/auth/forgot-password" passHref legacyBehavior>
-            <StyledTextSpan
-              style="actionLink"
-              css={{ color: '$omnivoreLightGray' }}
-            >
-              Click here
-            </StyledTextSpan>
-          </Link>
-        </StyledText>
-      </VStack>
-    </form>
+            Click here
+          </StyledTextSpan>
+        </Link>
+      </StyledText>
+    </VStack>
  )
 }
--- a/packages/web/next.config.js
+++ b/packages/web/next.config.js
@ -1,13 +1,19 @@
 const ContentSecurityPolicy = `
  default-src 'self';
  base-uri 'self';
-  connect-src 'self' ${process.env.NEXT_PUBLIC_SERVER_BASE_URL} https://proxy-prod.omnivore-image-cache.app https://accounts.google.com https://proxy-demo.omnivore-image-cache.app https://storage.googleapis.com https://widget.intercom.io https://api-iam.intercom.io https://static.intercomassets.com https://downloads.intercomcdn.com https://platform.twitter.com wss://nexus-websocket-a.intercom.io wss://nexus-websocket-b.intercom.io wss://nexus-europe-websocket.intercom.io wss://nexus-australia-websocket.intercom.io https://uploads.intercomcdn.com https://tools.applemediaservices.com wss://www.tiktok.com *.sentry.io 127.0.0.1 http://localhost:1010 http://localhost:9000; 
+  connect-src 'self' ${
+    process.env.NEXT_PUBLIC_SERVER_BASE_URL
+  } https://proxy-prod.omnivore-image-cache.app https://accounts.google.com https://proxy-demo.omnivore-image-cache.app https://storage.googleapis.com https://widget.intercom.io https://api-iam.intercom.io https://static.intercomassets.com https://downloads.intercomcdn.com https://platform.twitter.com wss://nexus-websocket-a.intercom.io wss://nexus-websocket-b.intercom.io wss://nexus-europe-websocket.intercom.io wss://nexus-australia-websocket.intercom.io https://uploads.intercomcdn.com https://tools.applemediaservices.com wss://www.tiktok.com *.sentry.io 127.0.0.1 http://localhost:1010 http://localhost:9000 http://localhost:4001; 
  font-src 'self' data: https://cdn.jsdelivr.net https://js.intercomcdn.com https://fonts.intercomcdn.com;
-  form-action 'self' ${process.env.NEXT_PUBLIC_SERVER_BASE_URL} https://getpocket.com/auth/authorize https://intercom.help https://api-iam.intercom.io https://api-iam.eu.intercom.io https://api-iam.au.intercom.io https://www.notion.so https://api.notion.com;
+  form-action 'self' ${
+    process.env.NEXT_PUBLIC_SERVER_BASE_URL
+  } https://getpocket.com/auth/authorize https://intercom.help https://api-iam.intercom.io https://api-iam.eu.intercom.io https://api-iam.au.intercom.io https://www.notion.so https://api.notion.com;
  frame-ancestors 'none';
  frame-src 'self' https://accounts.google.com https://platform.twitter.com https://www.youtube.com https://www.youtube-nocookie.com https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/ https://www.recaptcha.net https://www.tiktok.com;
  manifest-src 'self';
-  script-src 'self' 'unsafe-inline' 'unsafe-eval' accounts.google.com https://widget.intercom.io https://js.intercomcdn.com https://platform.twitter.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://www.recaptcha.net https://www.gstatic.cn/ https://*.neutral.ttwstatic.com https://www.tiktok.com/embed.js https://browser.sentry-cdn.com https://js.sentry-cdn.com;
+  script-src 'self' 'unsafe-inline' ${
+    process.env.NODE_ENV === 'development' ? "'unsafe-eval'" : ''
+  } accounts.google.com https://widget.intercom.io https://js.intercomcdn.com https://platform.twitter.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://www.recaptcha.net https://www.gstatic.cn/ https://*.neutral.ttwstatic.com https://www.tiktok.com/embed.js https://browser.sentry-cdn.com https://js.sentry-cdn.com;
  style-src 'self' 'unsafe-inline' https://accounts.google.com https://cdnjs.cloudflare.com https://*.neutral.ttwstatic.com;
  img-src 'self' blob: data: https:;
  worker-src 'self' blob:;
@ -15,6 +21,78 @@ const ContentSecurityPolicy = `
 `

 const moduleExports = {
+  // Enable SWC minification for faster builds
+  swcMinify: true,
+
+  // Disable Sentry for development
+  sentry: {
+    disableServerWebpackPlugin: true,
+    disableClientWebpackPlugin: true,
+    hideSourceMaps: true,
+  },
+
+  // Experimental Turbopack for faster development
+  experimental: {
+    turbo: {
+      rules: {
+        '*.svg': ['@svgr/webpack'],
+      },
+    },
+  },
+
+  // Webpack optimizations for development
+  webpack: (config, { dev, isServer }) => {
+    if (dev && !isServer) {
+      // Faster development builds with better chunking
+      config.optimization = {
+        ...config.optimization,
+        splitChunks: {
+          chunks: 'all',
+          cacheGroups: {
+            vendor: {
+              test: /[\\/]node_modules[\\/]/,
+              name: 'vendors',
+              chunks: 'all',
+              priority: 10,
+            },
+            radix: {
+              test: /[\\/]node_modules[\\/]@radix-ui[\\/]/,
+              name: 'radix-ui',
+              chunks: 'all',
+              priority: 20,
+            },
+            phosphor: {
+              test: /[\\/]node_modules[\\/]@phosphor-icons[\\/]/,
+              name: 'phosphor-icons',
+              chunks: 'all',
+              priority: 20,
+            },
+          },
+        },
+      }
+
+      // Enable persistent caching
+      config.cache = {
+        type: 'filesystem',
+        buildDependencies: {
+          config: [__filename],
+        },
+      }
+    }
+
+    return config
+  },
+
+  // Optimize imports to reduce bundle size
+  modularizeImports: {
+    '@phosphor-icons/react': {
+      transform: '@phosphor-icons/react/dist/icons/{{member}}',
+    },
+    '@radix-ui/react-icons': {
+      transform: '@radix-ui/react-icons/dist/{{member}}',
+    },
+  },
+
  images: {
    formats: ['image/avif', 'image/webp'],
    domains: [
--- a/packages/web/package.json
+++ b/packages/web/package.json
@ -3,10 +3,10 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "dev": "NEXT_PUBLIC_APP_ENV=local next dev",
-    "dev:demo": "NEXT_PUBLIC_APP_ENV=demo next dev",
-    "dev:dev": "NEXT_PUBLIC_APP_ENV=dev next dev",
-    "dev:prod": "next dev",
+    "dev": "NEXT_PUBLIC_APP_ENV=local next dev --turbo",
+    "dev:demo": "NEXT_PUBLIC_APP_ENV=demo next dev --turbo",
+    "dev:dev": "NEXT_PUBLIC_APP_ENV=dev next dev --turbo",
+    "dev:prod": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
--- a/packages/web/sentry.client.config.ts
+++ b/packages/web/sentry.client.config.ts
@ -5,7 +5,8 @@
 import * as Sentry from '@sentry/nextjs'
 import { sentryDSN } from './lib/appConfig'

-if (sentryDSN) {
+// Disable Sentry in development
+if (sentryDSN && process.env.NODE_ENV !== 'development') {
  Sentry.init({
    dsn: sentryDSN,

--- a/packages/web/sentry.server.config.ts
+++ b/packages/web/sentry.server.config.ts
@ -5,7 +5,8 @@
 import * as Sentry from '@sentry/nextjs'
 import { sentryDSN } from './lib/appConfig'

-if (sentryDSN) {
+// Disable Sentry in development
+if (sentryDSN && process.env.NODE_ENV !== 'development') {
  Sentry.init({
    dsn: sentryDSN,