auth

apps/website/app/auth/forgot-password/page.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useState, FormEvent, type ChangeEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import {
+  Mail,
+  ArrowLeft,
+  AlertCircle,
+  Flag,
+  Shield,
+  CheckCircle2,
+} from 'lucide-react';
+
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Heading from '@/components/ui/Heading';
+
+interface FormErrors {
+  email?: string;
+  submit?: string;
+}
+
+interface SuccessState {
+  message: string;
+  magicLink?: string;
+}
+
+export default function ForgotPasswordPage() {
+  const router = useRouter();
+  
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [success, setSuccess] = useState<SuccessState | null>(null);
+  const [formData, setFormData] = useState({
+    email: '',
+  });
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!formData.email.trim()) {
+      newErrors.email = 'Email is required';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Invalid email format';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (loading) return;
+
+    if (!validateForm()) return;
+
+    setLoading(true);
+    setErrors({});
+    setSuccess(null);
+
+    try {
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      const result = await authService.forgotPassword({ email: formData.email });
+
+      setSuccess({
+        message: result.message,
+        magicLink: result.magicLink,
+      });
+    } catch (error) {
+      setErrors({
+        submit: error instanceof Error ? error.message : 'Failed to send reset link. Please try again.',
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+        }} />
+      </div>
+
+      <div className="relative w-full max-w-md">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
+            <Flag className="w-8 h-8 text-primary-blue" />
+          </div>
+          <Heading level={1} className="mb-2">Reset Password</Heading>
+          <p className="text-gray-400">
+            Enter your email and we'll send you a reset link
+          </p>
+        </div>
+
+        <Card className="relative overflow-hidden">
+          {/* Background accent */}
+          <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
+
+          {!success ? (
+            <form onSubmit={handleSubmit} className="relative space-y-5">
+              {/* Email */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
+                  Email Address
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Input
+                    id="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, email: e.target.value })}
+                    error={!!errors.email}
+                    errorMessage={errors.email}
+                    placeholder="you@example.com"
+                    disabled={loading}
+                    className="pl-10"
+                    autoComplete="email"
+                  />
+                </div>
+              </div>
+
+              {/* Error Message */}
+              {errors.submit && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
+                >
+                  <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-red-400">{errors.submit}</p>
+                </motion.div>
+              )}
+
+              {/* Submit Button */}
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={loading}
+                className="w-full flex items-center justify-center gap-2"
+              >
+                {loading ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <Shield className="w-4 h-4" />
+                    Send Reset Link
+                  </>
+                )}
+              </Button>
+
+              {/* Back to Login */}
+              <div className="text-center">
+                <Link
+                  href="/auth/login"
+                  className="text-sm text-primary-blue hover:underline flex items-center justify-center gap-1"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                  Back to Login
+                </Link>
+              </div>
+            </form>
+          ) : (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="relative space-y-4"
+            >
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-performance-green/10 border border-performance-green/30">
+                <CheckCircle2 className="w-6 h-6 text-performance-green flex-shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm text-performance-green font-medium">{success.message}</p>
+                  {success.magicLink && (
+                    <div className="mt-2">
+                      <p className="text-xs text-gray-400 mb-1">Development Mode - Magic Link:</p>
+                      <div className="bg-iron-gray p-2 rounded border border-charcoal-outline">
+                        <code className="text-xs text-primary-blue break-all">
+                          {success.magicLink}
+                        </code>
+                      </div>
+                      <p className="text-[10px] text-gray-500 mt-1">
+                        In production, this would be sent via email
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => router.push('/auth/login')}
+                className="w-full"
+              >
+                Return to Login
+              </Button>
+            </motion.div>
+          )}
+        </Card>
+
+        {/* Trust Indicators */}
+        <div className="mt-6 flex items-center justify-center gap-6 text-sm text-gray-500">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4" />
+            <span>Secure reset process</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <CheckCircle2 className="w-4 h-4" />
+            <span>15 minute expiration</span>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-gray-500">
+          Need help?{' '}
+          <Link href="/support" className="text-gray-400 hover:underline">
+            Contact support
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

apps/website/app/auth/login/page.tsx

@@ -73,20 +73,14 @@ export default function LoginPage() {
     setErrors({});
 
     try {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email: formData.email,
-          password: formData.password,
-        }),
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      
+      await authService.login({
+        email: formData.email,
+        password: formData.password,
       });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Login failed');
-      }
       
       // Refresh session in context so header updates immediately
       await refreshSession();
@@ -102,8 +96,12 @@ export default function LoginPage() {
   const handleDemoLogin = async () => {
     setLoading(true);
     try {
-      // Demo: Set cookie to indicate driver mode (works without OAuth)
-      document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      
+      await authService.demoLogin({ role: 'driver' });
+      
       await new Promise(resolve => setTimeout(resolve, 500));
       router.push(returnTo);
     } catch (error) {
@@ -299,7 +297,7 @@ export default function LoginPage() {
               className="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-deep-graphite to-iron-gray border border-charcoal-outline text-gray-300 hover:border-primary-blue/30 transition-all disabled:opacity-50 group"
             >
               <Gamepad2 className="w-5 h-5 text-primary-blue" />
-              <span>Demo Login (iRacing)</span>
+              <span>Demo Login</span>
               <ChevronRight className="w-4 h-4 text-gray-500 group-hover:translate-x-0.5 transition-transform" />
             </motion.button>
 
@@ -315,6 +313,16 @@ export default function LoginPage() {
             </p>
           </Card>
 
+          {/* Name Immutability Notice */}
+          <div className="mt-6 p-4 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
+            <div className="flex items-start gap-3">
+              <AlertCircle className="w-5 h-5 text-gray-400 flex-shrink-0 mt-0.5" />
+              <div className="text-xs text-gray-400">
+                <strong>Note:</strong> Your display name cannot be changed after signup. Please ensure it's correct when creating your account.
+              </div>
+            </div>
+          </div>
+
           {/* Footer */}
           <p className="mt-6 text-center text-xs text-gray-500">
             By signing in, you agree to our{' '}

apps/website/app/auth/reset-password/page.tsx

@@ -0,0 +1,356 @@
+'use client';
+
+import { useState, FormEvent, type ChangeEvent, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import {
+  Lock,
+  Eye,
+  EyeOff,
+  AlertCircle,
+  Flag,
+  Shield,
+  CheckCircle2,
+  ArrowLeft,
+} from 'lucide-react';
+
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Heading from '@/components/ui/Heading';
+
+interface FormErrors {
+  newPassword?: string;
+  confirmPassword?: string;
+  submit?: string;
+}
+
+interface PasswordStrength {
+  score: number;
+  label: string;
+  color: string;
+}
+
+function checkPasswordStrength(password: string): PasswordStrength {
+  let score = 0;
+  if (password.length >= 8) score++;
+  if (password.length >= 12) score++;
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
+  if (/\d/.test(password)) score++;
+  if (/[^a-zA-Z\d]/.test(password)) score++;
+
+  if (score <= 1) return { score, label: 'Weak', color: 'bg-red-500' };
+  if (score <= 2) return { score, label: 'Fair', color: 'bg-warning-amber' };
+  if (score <= 3) return { score, label: 'Good', color: 'bg-primary-blue' };
+  return { score, label: 'Strong', color: 'bg-performance-green' };
+}
+
+export default function ResetPasswordPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [success, setSuccess] = useState<string | null>(null);
+  const [formData, setFormData] = useState({
+    newPassword: '',
+    confirmPassword: '',
+  });
+  const [token, setToken] = useState<string>('');
+
+  // Extract token from URL on mount
+  useEffect(() => {
+    const tokenParam = searchParams.get('token');
+    if (tokenParam) {
+      setToken(tokenParam);
+    }
+  }, [searchParams]);
+
+  const passwordStrength = checkPasswordStrength(formData.newPassword);
+
+  const passwordRequirements = [
+    { met: formData.newPassword.length >= 8, label: 'At least 8 characters' },
+    { met: /[a-z]/.test(formData.newPassword) && /[A-Z]/.test(formData.newPassword), label: 'Upper and lowercase letters' },
+    { met: /\d/.test(formData.newPassword), label: 'At least one number' },
+    { met: /[^a-zA-Z\d]/.test(formData.newPassword), label: 'At least one special character' },
+  ];
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!formData.newPassword) {
+      newErrors.newPassword = 'New password is required';
+    } else if (formData.newPassword.length < 8) {
+      newErrors.newPassword = 'Password must be at least 8 characters';
+    } else if (!/[a-z]/.test(formData.newPassword) || !/[A-Z]/.test(formData.newPassword) || !/\d/.test(formData.newPassword)) {
+      newErrors.newPassword = 'Password must contain uppercase, lowercase, and number';
+    }
+
+    if (!formData.confirmPassword) {
+      newErrors.confirmPassword = 'Please confirm your password';
+    } else if (formData.newPassword !== formData.confirmPassword) {
+      newErrors.confirmPassword = 'Passwords do not match';
+    }
+
+    if (!token) {
+      newErrors.submit = 'Invalid reset token. Please request a new reset link.';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (loading) return;
+
+    if (!validateForm()) return;
+
+    setLoading(true);
+    setErrors({});
+    setSuccess(null);
+
+    try {
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      const result = await authService.resetPassword({
+        token,
+        newPassword: formData.newPassword,
+      });
+
+      setSuccess(result.message);
+    } catch (error) {
+      setErrors({
+        submit: error instanceof Error ? error.message : 'Failed to reset password. Please try again.',
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+        }} />
+      </div>
+
+      <div className="relative w-full max-w-md">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
+            <Lock className="w-8 h-8 text-primary-blue" />
+          </div>
+          <Heading level={1} className="mb-2">Set New Password</Heading>
+          <p className="text-gray-400">
+            Create a strong password for your account
+          </p>
+        </div>
+
+        <Card className="relative overflow-hidden">
+          {/* Background accent */}
+          <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
+
+          {!success ? (
+            <form onSubmit={handleSubmit} className="relative space-y-5">
+              {/* New Password */}
+              <div>
+                <label htmlFor="newPassword" className="block text-sm font-medium text-gray-300 mb-2">
+                  New Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Input
+                    id="newPassword"
+                    type={showPassword ? 'text' : 'password'}
+                    value={formData.newPassword}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, newPassword: e.target.value })}
+                    error={!!errors.newPassword}
+                    errorMessage={errors.newPassword}
+                    placeholder="••••••••"
+                    disabled={loading}
+                    className="pl-10 pr-10"
+                    autoComplete="new-password"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+                  >
+                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </button>
+                </div>
+
+                {/* Password Strength */}
+                {formData.newPassword && (
+                  <div className="mt-3 space-y-2">
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1 h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
+                        <motion.div
+                          className={`h-full ${passwordStrength.color}`}
+                          initial={{ width: 0 }}
+                          animate={{ width: `${(passwordStrength.score / 5) * 100}%` }}
+                          transition={{ duration: 0.3 }}
+                        />
+                      </div>
+                      <span className={`text-xs font-medium ${
+                        passwordStrength.score <= 1 ? 'text-red-400' :
+                        passwordStrength.score <= 2 ? 'text-warning-amber' :
+                        passwordStrength.score <= 3 ? 'text-primary-blue' :
+                        'text-performance-green'
+                      }`}>
+                        {passwordStrength.label}
+                      </span>
+                    </div>
+                    <div className="grid grid-cols-2 gap-1">
+                      {passwordRequirements.map((req, index) => (
+                        <div key={index} className="flex items-center gap-1.5 text-xs">
+                          {req.met ? (
+                            <CheckCircle2 className="w-3 h-3 text-performance-green" />
+                          ) : (
+                            <AlertCircle className="w-3 h-3 text-gray-500" />
+                          )}
+                          <span className={req.met ? 'text-gray-300' : 'text-gray-500'}>
+                            {req.label}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Confirm Password */}
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
+                  Confirm Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Input
+                    id="confirmPassword"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    value={formData.confirmPassword}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, confirmPassword: e.target.value })}
+                    error={!!errors.confirmPassword}
+                    errorMessage={errors.confirmPassword}
+                    placeholder="••••••••"
+                    disabled={loading}
+                    className="pl-10 pr-10"
+                    autoComplete="new-password"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+                  >
+                    {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </button>
+                </div>
+                {formData.confirmPassword && formData.newPassword === formData.confirmPassword && (
+                  <p className="mt-1 text-xs text-performance-green flex items-center gap-1">
+                    <CheckCircle2 className="w-3 h-3" /> Passwords match
+                  </p>
+                )}
+              </div>
+
+              {/* Error Message */}
+              {errors.submit && (
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
+                >
+                  <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-red-400">{errors.submit}</p>
+                </motion.div>
+              )}
+
+              {/* Submit Button */}
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={loading}
+                className="w-full flex items-center justify-center gap-2"
+              >
+                {loading ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    Resetting...
+                  </>
+                ) : (
+                  <>
+                    <Lock className="w-4 h-4" />
+                    Reset Password
+                  </>
+                )}
+              </Button>
+
+              {/* Back to Login */}
+              <div className="text-center">
+                <Link
+                  href="/auth/login"
+                  className="text-sm text-primary-blue hover:underline flex items-center justify-center gap-1"
+                >
+                  <ArrowLeft className="w-4 h-4" />
+                  Back to Login
+                </Link>
+              </div>
+            </form>
+          ) : (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="relative space-y-4"
+            >
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-performance-green/10 border border-performance-green/30">
+                <CheckCircle2 className="w-6 h-6 text-performance-green flex-shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm text-performance-green font-medium">{success}</p>
+                  <p className="text-xs text-gray-400 mt-1">
+                    Your password has been successfully reset
+                  </p>
+                </div>
+              </div>
+
+              <Button
+                type="button"
+                variant="primary"
+                onClick={() => router.push('/auth/login')}
+                className="w-full"
+              >
+                Login with New Password
+              </Button>
+            </motion.div>
+          )}
+        </Card>
+
+        {/* Trust Indicators */}
+        <div className="mt-6 flex items-center justify-center gap-6 text-sm text-gray-500">
+          <div className="flex items-center gap-2">
+            <Shield className="w-4 h-4" />
+            <span>Encrypted & secure</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <CheckCircle2 className="w-4 h-4" />
+            <span>Instant update</span>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <p className="mt-6 text-center text-xs text-gray-500">
+          Need help?{' '}
+          <Link href="/support" className="text-gray-400 hover:underline">
+            Contact support
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

apps/website/app/auth/signup/page.tsx

@@ -32,7 +32,8 @@ import Heading from '@/components/ui/Heading';
 import { useAuth } from '@/lib/auth/AuthContext';
 
 interface FormErrors {
-  displayName?: string;
+  firstName?: string;
+  lastName?: string;
   email?: string;
   password?: string;
   confirmPassword?: string;
@@ -101,7 +102,8 @@ export default function SignupPage() {
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [errors, setErrors] = useState<FormErrors>({});
   const [formData, setFormData] = useState({
-    displayName: '',
+    firstName: '',
+    lastName: '',
     email: '',
     password: '',
     confirmPassword: '',
@@ -138,10 +140,32 @@ export default function SignupPage() {
   const validateForm = (): boolean => {
     const newErrors: FormErrors = {};
 
-    if (!formData.displayName.trim()) {
-      newErrors.displayName = 'Display name is required';
-    } else if (formData.displayName.trim().length < 3) {
-      newErrors.displayName = 'Display name must be at least 3 characters';
+    // First name validation
+    const firstName = formData.firstName.trim();
+    if (!firstName) {
+      newErrors.firstName = 'First name is required';
+    } else if (firstName.length < 2) {
+      newErrors.firstName = 'First name must be at least 2 characters';
+    } else if (firstName.length > 25) {
+      newErrors.firstName = 'First name must be no more than 25 characters';
+    } else if (!/^[A-Za-z\-']+$/.test(firstName)) {
+      newErrors.firstName = 'First name can only contain letters, hyphens, and apostrophes';
+    } else if (/^(user|test|demo|guest|player)/i.test(firstName)) {
+      newErrors.firstName = 'Please use your real first name, not a nickname';
+    }
+
+    // Last name validation
+    const lastName = formData.lastName.trim();
+    if (!lastName) {
+      newErrors.lastName = 'Last name is required';
+    } else if (lastName.length < 2) {
+      newErrors.lastName = 'Last name must be at least 2 characters';
+    } else if (lastName.length > 25) {
+      newErrors.lastName = 'Last name must be no more than 25 characters';
+    } else if (!/^[A-Za-z\-']+$/.test(lastName)) {
+      newErrors.lastName = 'Last name can only contain letters, hyphens, and apostrophes';
+    } else if (/^(user|test|demo|guest|player)/i.test(lastName)) {
+      newErrors.lastName = 'Please use your real last name, not a nickname';
     }
 
     if (!formData.email.trim()) {
@@ -150,10 +174,13 @@ export default function SignupPage() {
       newErrors.email = 'Invalid email format';
     }
 
+    // Password strength validation
     if (!formData.password) {
       newErrors.password = 'Password is required';
     } else if (formData.password.length < 8) {
       newErrors.password = 'Password must be at least 8 characters';
+    } else if (!/[a-z]/.test(formData.password) || !/[A-Z]/.test(formData.password) || !/\d/.test(formData.password)) {
+      newErrors.password = 'Password must contain uppercase, lowercase, and number';
     }
 
     if (!formData.confirmPassword) {
@@ -176,21 +203,18 @@ export default function SignupPage() {
     setErrors({});
 
     try {
-      const response = await fetch('/api/auth/signup', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email: formData.email,
-          password: formData.password,
-          displayName: formData.displayName,
-        }),
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      
+      // Combine first and last name into display name
+      const displayName = `${formData.firstName} ${formData.lastName}`.trim();
+      
+      await authService.signup({
+        email: formData.email,
+        password: formData.password,
+        displayName,
       });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Signup failed');
-      }
       
       // Refresh session in context so header updates immediately
       await refreshSession();
@@ -206,8 +230,12 @@ export default function SignupPage() {
   const handleDemoLogin = async () => {
     setLoading(true);
     try {
-      // Demo: Set cookie to indicate driver mode (works without OAuth)
-      document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
+      const { ServiceFactory } = await import('@/lib/services/ServiceFactory');
+      const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3001');
+      const authService = serviceFactory.createAuthService();
+      
+      await authService.demoLogin({ role: 'driver' });
+      
       await new Promise(resolve => setTimeout(resolve, 500));
       router.push(returnTo === '/onboarding' ? '/dashboard' : returnTo);
     } catch {
@@ -337,27 +365,57 @@ export default function SignupPage() {
             <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
 
             <form onSubmit={handleSubmit} className="relative space-y-4">
-              {/* Display Name */}
+              {/* First Name */}
               <div>
-                <label htmlFor="displayName" className="block text-sm font-medium text-gray-300 mb-2">
-                  Display Name
+                <label htmlFor="firstName" className="block text-sm font-medium text-gray-300 mb-2">
+                  First Name
                 </label>
                 <div className="relative">
                   <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                   <Input
-                    id="displayName"
+                    id="firstName"
                     type="text"
-                    value={formData.displayName}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, displayName: e.target.value })}
-                    error={!!errors.displayName}
-                    errorMessage={errors.displayName}
-                    placeholder="SpeedyRacer42"
+                    value={formData.firstName}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, firstName: e.target.value })}
+                    error={!!errors.firstName}
+                    errorMessage={errors.firstName}
+                    placeholder="John"
                     disabled={loading}
                     className="pl-10"
-                    autoComplete="username"
+                    autoComplete="given-name"
                   />
                 </div>
-                <p className="mt-1 text-xs text-gray-500">This is how other drivers will see you</p>
+              </div>
+
+              {/* Last Name */}
+              <div>
+                <label htmlFor="lastName" className="block text-sm font-medium text-gray-300 mb-2">
+                  Last Name
+                </label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Input
+                    id="lastName"
+                    type="text"
+                    value={formData.lastName}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFormData({ ...formData, lastName: e.target.value })}
+                    error={!!errors.lastName}
+                    errorMessage={errors.lastName}
+                    placeholder="Smith"
+                    disabled={loading}
+                    className="pl-10"
+                    autoComplete="family-name"
+                  />
+                </div>
+                <p className="mt-1 text-xs text-gray-500">Your name will be used as-is and cannot be changed later</p>
+              </div>
+
+              {/* Name Immutability Warning */}
+              <div className="flex items-start gap-3 p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
+                <AlertCircle className="w-5 h-5 text-warning-amber flex-shrink-0 mt-0.5" />
+                <div className="text-sm text-warning-amber">
+                  <strong>Important:</strong> Your name cannot be changed after signup. Please ensure it's correct.
+                </div>
               </div>
 
               {/* Email */}
@@ -529,7 +587,7 @@ export default function SignupPage() {
               </div>
             </div>
 
-            {/* iRacing Signup */}
+            {/* Demo Login */}
             <motion.button
               type="button"
               onClick={handleDemoLogin}
@@ -539,7 +597,7 @@ export default function SignupPage() {
               className="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-deep-graphite to-iron-gray border border-charcoal-outline text-gray-300 hover:border-primary-blue/30 transition-all disabled:opacity-50 group"
             >
               <Gamepad2 className="w-5 h-5 text-primary-blue" />
-              <span>Demo Login (iRacing)</span>
+              <span>Demo Login</span>
               <ChevronRight className="w-4 h-4 text-gray-500 group-hover:translate-x-0.5 transition-transform" />
             </motion.button>
 

apps/website/app/layout.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
-import type { Metadata, Viewport } from 'next';
+import AlphaFooter from '@/components/alpha/AlphaFooter';
+import { AlphaNav } from '@/components/alpha/AlphaNav';
+import DevToolbar from '@/components/dev/DevToolbar';
+import NotificationProvider from '@/components/notifications/NotificationProvider';
+import { AuthProvider } from '@/lib/auth/AuthContext';
+import { getAppMode } from '@/lib/mode';
+import { ServiceProvider } from '@/lib/services/ServiceProvider';
+import { Metadata, Viewport } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
+import React from 'react';
 import './globals.css';
-import { getAppMode } from '@/lib/mode';
-import { AlphaNav } from '@/components/alpha/AlphaNav';
-import AlphaBanner from '@/components/alpha/AlphaBanner';
-import AlphaFooter from '@/components/alpha/AlphaFooter';
-import { AuthProvider } from '@/lib/auth/AuthContext';
-import NotificationProvider from '@/components/notifications/NotificationProvider';
-import DevToolbar from '@/components/dev/DevToolbar';
-import { ServiceProvider } from '@/lib/services/ServiceProvider';
 
 export const dynamic = 'force-dynamic';
 
@@ -23,8 +22,8 @@ export const viewport: Viewport = {
 };
 
 export const metadata: Metadata = {
-  title: 'GridPilot - iRacing League Racing Platform',
-  description: 'The dedicated home for serious iRacing leagues. Automatic results, standings, team racing, and professional race control.',
+  title: 'GridPilot - SimRacing Platform',
+  description: 'The dedicated home for serious sim racing leagues. Automatic results, standings, team racing, and professional race control.',
   themeColor: '#0a0a0a',
   appleWebApp: {
     capable: true,
@@ -66,7 +65,6 @@ export default async function RootLayout({
             <AuthProvider initialSession={session}>
               <NotificationProvider>
                 <AlphaNav />
-                <AlphaBanner />
                 <main className="flex-1 max-w-7xl mx-auto px-6 py-8 w-full">
                   {children}
                 </main>

apps/website/components/dev/DevToolbar.tsx

@@ -102,7 +102,7 @@ const urgencyOptions: UrgencyOption[] = [
   },
 ];
 
-type LoginMode = 'none' | 'driver' | 'sponsor';
+type LoginMode = 'none' | 'driver' | 'sponsor' | 'league-owner' | 'league-steward' | 'league-admin' | 'system-owner' | 'super-admin';
 
 export default function DevToolbar() {
   const router = useRouter();
@@ -118,48 +118,92 @@ export default function DevToolbar() {
   
   const currentDriverId = useEffectiveDriverId();
 
-  // Sync login mode with actual cookie state on mount
+  // Sync login mode with actual session state on mount
   useEffect(() => {
     if (typeof document !== 'undefined') {
+      // Check for actual session cookie first
       const cookies = document.cookie.split(';');
-      const demoModeCookie = cookies.find(c => c.trim().startsWith('gridpilot_demo_mode='));
-      if (demoModeCookie) {
-        const value = demoModeCookie.split('=')[1]?.trim();
-        if (value === 'sponsor') {
-          setLoginMode('sponsor');
-        } else if (value === 'driver') {
-          setLoginMode('driver');
-        } else {
-          setLoginMode('none');
-        }
+      const sessionCookie = cookies.find(c => c.trim().startsWith('gp_session='));
+      
+      if (sessionCookie) {
+        // User has a session cookie, check if it's valid by calling the API
+        fetch('/api/auth/session', {
+          method: 'GET',
+          credentials: 'include'
+        })
+          .then(res => {
+            if (res.ok) {
+              return res.json();
+            }
+            throw new Error('No valid session');
+          })
+          .then(session => {
+            if (session && session.user) {
+              // Determine login mode based on user email patterns
+              const email = session.user.email?.toLowerCase() || '';
+              const displayName = session.user.displayName?.toLowerCase() || '';
+              
+              let mode: LoginMode = 'none';
+              if (email.includes('sponsor') || displayName.includes('sponsor')) {
+                mode = 'sponsor';
+              } else if (email.includes('league-owner') || displayName.includes('owner')) {
+                mode = 'league-owner';
+              } else if (email.includes('league-steward') || displayName.includes('steward')) {
+                mode = 'league-steward';
+              } else if (email.includes('league-admin') || displayName.includes('admin')) {
+                mode = 'league-admin';
+              } else if (email.includes('system-owner') || displayName.includes('system owner')) {
+                mode = 'system-owner';
+              } else if (email.includes('super-admin') || displayName.includes('super admin')) {
+                mode = 'super-admin';
+              } else if (email.includes('driver') || displayName.includes('demo')) {
+                mode = 'driver';
+              }
+              
+              setLoginMode(mode);
+            } else {
+              setLoginMode('none');
+            }
+          })
+          .catch(() => {
+            // Session invalid or expired
+            setLoginMode('none');
+          });
       } else {
-        // Default to driver mode if no cookie (for demo purposes)
-        setLoginMode('driver');
+        // No session cookie means not logged in
+        setLoginMode('none');
       }
     }
   }, []);
 
-  const handleLoginAsDriver = async () => {
+  const handleDemoLogin = async (role: LoginMode) => {
+    if (role === 'none') return;
+    
     setLoggingIn(true);
     try {
-      // Demo: Set cookie to indicate driver mode
-      document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
-      setLoginMode('driver');
-      // Refresh to update all components that depend on demo mode
-      window.location.reload();
-    } finally {
-      setLoggingIn(false);
-    }
-  };
+      // Use the demo login API
+      const response = await fetch('/api/auth/demo-login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ role }),
+      });
 
-  const handleLoginAsSponsor = async () => {
-    setLoggingIn(true);
-    try {
-      // Demo: Set cookie to indicate sponsor mode
-      document.cookie = 'gridpilot_demo_mode=sponsor; path=/; max-age=86400';
-      setLoginMode('sponsor');
-      // Navigate to sponsor dashboard
-      window.location.href = '/sponsor/dashboard';
+      if (!response.ok) {
+        throw new Error('Demo login failed');
+      }
+
+      setLoginMode(role);
+      
+      // Navigate based on role
+      if (role === 'sponsor') {
+        window.location.href = '/sponsor/dashboard';
+      } else {
+        // For driver and league roles, go to dashboard
+        window.location.href = '/dashboard';
+      }
+    } catch (error) {
+      console.error('Demo login failed:', error);
+      alert('Demo login failed. Please check the console for details.');
     } finally {
       setLoggingIn(false);
     }
@@ -168,11 +212,15 @@ export default function DevToolbar() {
   const handleLogout = async () => {
     setLoggingIn(true);
     try {
-      // Demo: Clear demo mode cookie
-      document.cookie = 'gridpilot_demo_mode=; path=/; max-age=0';
+      // Call logout API
+      await fetch('/api/auth/logout', { method: 'POST' });
+      
       setLoginMode('none');
       // Refresh to update all components
       window.location.href = '/';
+    } catch (error) {
+      console.error('Logout failed:', error);
+      alert('Logout failed. Please check the console for details.');
     } finally {
       setLoggingIn(false);
     }
@@ -561,8 +609,9 @@ export default function DevToolbar() {
             </div>
 
             <div className="space-y-2">
+              {/* Driver Login */}
               <button
-                onClick={handleLoginAsDriver}
+                onClick={() => handleDemoLogin('driver')}
                 disabled={loggingIn || loginMode === 'driver'}
                 className={`
                   w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
@@ -574,11 +623,63 @@ export default function DevToolbar() {
                 `}
               >
                 <User className="w-4 h-4" />
-                {loginMode === 'driver' ? 'Logged in as Driver' : 'Login as Driver'}
+                {loginMode === 'driver' ? '✓ Driver' : 'Login as Driver'}
               </button>
 
+              {/* League Owner Login */}
               <button
-                onClick={handleLoginAsSponsor}
+                onClick={() => handleDemoLogin('league-owner')}
+                disabled={loggingIn || loginMode === 'league-owner'}
+                className={`
+                  w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
+                  ${loginMode === 'league-owner'
+                    ? 'bg-purple-500/20 border-purple-500/50 text-purple-400'
+                    : 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
+                  }
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                `}
+              >
+                <span className="text-xs">👑</span>
+                {loginMode === 'league-owner' ? '✓ League Owner' : 'Login as League Owner'}
+              </button>
+
+              {/* League Steward Login */}
+              <button
+                onClick={() => handleDemoLogin('league-steward')}
+                disabled={loggingIn || loginMode === 'league-steward'}
+                className={`
+                  w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
+                  ${loginMode === 'league-steward'
+                    ? 'bg-amber-500/20 border-amber-500/50 text-amber-400'
+                    : 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
+                  }
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                `}
+              >
+                <Shield className="w-4 h-4" />
+                {loginMode === 'league-steward' ? '✓ Steward' : 'Login as Steward'}
+              </button>
+
+              {/* League Admin Login */}
+              <button
+                onClick={() => handleDemoLogin('league-admin')}
+                disabled={loggingIn || loginMode === 'league-admin'}
+                className={`
+                  w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
+                  ${loginMode === 'league-admin'
+                    ? 'bg-red-500/20 border-red-500/50 text-red-400'
+                    : 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
+                  }
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                `}
+              >
+                <span className="text-xs">⚙️</span>
+                {loginMode === 'league-admin' ? '✓ Admin' : 'Login as Admin'}
+              </button>
+
+              {/* Sponsor Login */}
+              <button
+                onClick={() => handleDemoLogin('sponsor')}
                 disabled={loggingIn || loginMode === 'sponsor'}
                 className={`
                   w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
@@ -590,7 +691,41 @@ export default function DevToolbar() {
                 `}
               >
                 <Building2 className="w-4 h-4" />
-                {loginMode === 'sponsor' ? 'Logged in as Sponsor' : 'Login as Sponsor'}
+                {loginMode === 'sponsor' ? '✓ Sponsor' : 'Login as Sponsor'}
+              </button>
+
+              {/* System Owner Login */}
+              <button
+                onClick={() => handleDemoLogin('system-owner')}
+                disabled={loggingIn || loginMode === 'system-owner'}
+                className={`
+                  w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
+                  ${loginMode === 'system-owner'
+                    ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-400'
+                    : 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
+                  }
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                `}
+              >
+                <span className="text-xs">👑</span>
+                {loginMode === 'system-owner' ? '✓ System Owner' : 'Login as System Owner'}
+              </button>
+
+              {/* Super Admin Login */}
+              <button
+                onClick={() => handleDemoLogin('super-admin')}
+                disabled={loggingIn || loginMode === 'super-admin'}
+                className={`
+                  w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
+                  ${loginMode === 'super-admin'
+                    ? 'bg-pink-500/20 border-pink-500/50 text-pink-400'
+                    : 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
+                  }
+                  disabled:opacity-50 disabled:cursor-not-allowed
+                `}
+              >
+                <span className="text-xs">⚡</span>
+                {loginMode === 'super-admin' ? '✓ Super Admin' : 'Login as Super Admin'}
               </button>
 
               {loginMode !== 'none' && (
@@ -606,7 +741,7 @@ export default function DevToolbar() {
             </div>
 
             <p className="text-[10px] text-gray-600 mt-2">
-              Switch between driver and sponsor views for demo purposes.
+              Test different user roles for demo purposes. Dashboard works for all roles.
             </p>
           </div>
         </div>

apps/website/components/profile/UserPill.tsx

@@ -28,6 +28,43 @@ function useSponsorMode(): boolean {
   return isSponsor;
 }
 
+// Hook to detect demo user mode
+function useDemoUserMode(): { isDemo: boolean; demoRole: string | null } {
+  const { session } = useAuth();
+  const [demoMode, setDemoMode] = useState({ isDemo: false, demoRole: null as string | null });
+  
+  useEffect(() => {
+    if (!session?.user) {
+      setDemoMode({ isDemo: false, demoRole: null });
+      return;
+    }
+
+    const email = session.user.email?.toLowerCase() || '';
+    const displayName = session.user.displayName?.toLowerCase() || '';
+    const primaryDriverId = (session.user as any).primaryDriverId || '';
+
+    // Check if this is a demo user
+    if (email.includes('demo') ||
+        displayName.includes('demo') ||
+        primaryDriverId.startsWith('demo-')) {
+      
+      let role = 'driver';
+      if (email.includes('sponsor')) role = 'sponsor';
+      else if (email.includes('league-owner') || displayName.includes('owner')) role = 'league-owner';
+      else if (email.includes('league-steward') || displayName.includes('steward')) role = 'league-steward';
+      else if (email.includes('league-admin') || displayName.includes('admin')) role = 'league-admin';
+      else if (email.includes('system-owner') || displayName.includes('system owner')) role = 'system-owner';
+      else if (email.includes('super-admin') || displayName.includes('super admin')) role = 'super-admin';
+      
+      setDemoMode({ isDemo: true, demoRole: role });
+    } else {
+      setDemoMode({ isDemo: false, demoRole: null });
+    }
+  }, [session]);
+  
+  return demoMode;
+}
+
 // Sponsor Pill Component - matches the style of DriverSummaryPill
 function SponsorSummaryPill({ 
   onClick, 
@@ -88,16 +125,17 @@ export default function UserPill() {
   const [driver, setDriver] = useState<DriverViewModel | null>(null);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const isSponsorMode = useSponsorMode();
+  const { isDemo, demoRole } = useDemoUserMode();
   const shouldReduceMotion = useReducedMotion();
 
-
   const primaryDriverId = useEffectiveDriverId();
 
+  // Load driver data only for non-demo users
   useEffect(() => {
     let cancelled = false;
 
     async function loadDriver() {
-      if (!primaryDriverId) {
+      if (!primaryDriverId || isDemo) {
         if (!cancelled) {
           setDriver(null);
         }
@@ -115,10 +153,25 @@ export default function UserPill() {
     return () => {
       cancelled = true;
     };
-  }, [primaryDriverId, driverService]);
+  }, [primaryDriverId, driverService, isDemo]);
 
   const data = useMemo(() => {
-    if (!session?.user || !primaryDriverId || !driver) {
+    if (!session?.user) {
+      return null;
+    }
+
+    // Demo users don't have real driver data
+    if (isDemo) {
+      return {
+        isDemo: true,
+        demoRole,
+        displayName: session.user.displayName,
+        email: session.user.email,
+        avatarUrl: session.user.avatarUrl,
+      };
+    }
+
+    if (!primaryDriverId || !driver) {
       return null;
     }
 
@@ -134,8 +187,10 @@ export default function UserPill() {
       avatarSrc,
       rating,
       rank,
+      isDemo: false,
+      demoRole: null,
     };
-  }, [session, driver, primaryDriverId]);
+  }, [session, driver, primaryDriverId, isDemo, demoRole]);
 
   // Close menu when clicking outside
   useEffect(() => {
@@ -151,6 +206,143 @@ export default function UserPill() {
     return () => document.removeEventListener('click', handleClickOutside);
   }, [isMenuOpen]);
 
+  // Logout handler for demo users
+  const handleLogout = async () => {
+    try {
+      // Call the logout API
+      await fetch('/api/auth/logout', { method: 'POST' });
+      // Clear any demo mode cookies
+      document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+      // Redirect to home
+      window.location.href = '/';
+    } catch (error) {
+      console.error('Logout failed:', error);
+      window.location.href = '/';
+    }
+  };
+
+  // Demo user UI
+  if (isDemo && data?.isDemo) {
+    const roleLabel = {
+      'driver': 'Driver',
+      'sponsor': 'Sponsor',
+      'league-owner': 'League Owner',
+      'league-steward': 'League Steward',
+      'league-admin': 'League Admin',
+      'system-owner': 'System Owner',
+      'super-admin': 'Super Admin',
+    }[demoRole || 'driver'];
+
+    const roleColor = {
+      'driver': 'text-primary-blue',
+      'sponsor': 'text-performance-green',
+      'league-owner': 'text-purple-400',
+      'league-steward': 'text-amber-400',
+      'league-admin': 'text-red-400',
+      'system-owner': 'text-indigo-400',
+      'super-admin': 'text-pink-400',
+    }[demoRole || 'driver'];
+
+    return (
+      <div className="relative inline-flex items-center" data-user-pill>
+        <motion.button
+          onClick={() => setIsMenuOpen((open) => !open)}
+          className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-primary-blue/50 transition-all duration-200"
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          {/* Avatar */}
+          <div className="relative">
+            {data.avatarUrl ? (
+              <div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
+                <img
+                  src={data.avatarUrl}
+                  alt={data.displayName}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            ) : (
+              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
+                <span className="text-xs font-bold text-primary-blue">DEMO</span>
+              </div>
+            )}
+            <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary-blue border-2 border-deep-graphite" />
+          </div>
+
+          {/* Info */}
+          <div className="hidden sm:flex flex-col items-start">
+            <span className="text-xs font-semibold text-white truncate max-w-[100px]">
+              {data.displayName}
+            </span>
+            <span className={`text-[10px] ${roleColor} font-medium`}>
+              {roleLabel}
+            </span>
+          </div>
+
+          {/* Chevron */}
+          <ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
+        </motion.button>
+
+        <AnimatePresence>
+          {isMenuOpen && (
+            <motion.div
+              className="absolute right-0 top-full mt-2 w-56 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
+              initial={{ opacity: 0, y: -10, scale: 0.95 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: -10, scale: 0.95 }}
+              transition={{ duration: 0.15 }}
+            >
+              {/* Header */}
+              <div className="p-4 bg-gradient-to-r from-primary-blue/10 to-transparent border-b border-charcoal-outline">
+                <div className="flex items-center gap-3">
+                  {data.avatarUrl ? (
+                    <div className="w-10 h-10 rounded-lg overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
+                      <img
+                        src={data.avatarUrl}
+                        alt={data.displayName}
+                        className="w-full h-full object-cover"
+                      />
+                    </div>
+                  ) : (
+                    <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
+                      <span className="text-xs font-bold text-primary-blue">DEMO</span>
+                    </div>
+                  )}
+                  <div>
+                    <p className="text-sm font-semibold text-white">{data.displayName}</p>
+                    <p className={`text-xs ${roleColor}`}>{roleLabel}</p>
+                  </div>
+                </div>
+                <div className="mt-2 text-xs text-gray-500">
+                  Development account - not for production use
+                </div>
+              </div>
+
+              {/* Menu Items */}
+              <div className="py-1 text-sm text-gray-200">
+                <div className="px-4 py-2 text-xs text-gray-500 italic">
+                  Demo users have limited profile access
+                </div>
+              </div>
+
+              {/* Footer */}
+              <div className="border-t border-charcoal-outline">
+                <button
+                  type="button"
+                  onClick={handleLogout}
+                  className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
+                >
+                  <span>Logout</span>
+                  <LogOut className="h-4 w-4" />
+                </button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  }
+
   // Sponsor mode UI
   if (isSponsorMode) {
     return (
@@ -280,7 +472,12 @@ export default function UserPill() {
     );
   }
 
-  if (!data) {
+  if (!data || data.isDemo) {
+    return null;
+  }
+
+  // Type guard to ensure data has the required properties for regular driver
+  if (!data.driver || data.rating === undefined || data.rank === undefined) {
     return null;
   }
 

apps/website/lib/api/auth/AuthApiClient.ts

@@ -4,6 +4,9 @@ import { LoginParamsDTO } from '../../types/generated/LoginParamsDTO';
 import { SignupParamsDTO } from '../../types/generated/SignupParamsDTO';
 import { LoginWithIracingCallbackParamsDTO } from '../../types/generated/LoginWithIracingCallbackParamsDTO';
 import { IracingAuthRedirectResultDTO } from '../../types/generated/IracingAuthRedirectResultDTO';
+import { ForgotPasswordDTO } from '../../types/generated/ForgotPasswordDTO';
+import { ResetPasswordDTO } from '../../types/generated/ResetPasswordDTO';
+import { DemoLoginDTO } from '../../types/generated/DemoLoginDTO';
 
 /**
  * Auth API Client
@@ -58,4 +61,19 @@ export class AuthApiClient extends BaseApiClient {
     }
     return this.get<AuthSessionDTO>(`/auth/iracing/callback?${query.toString()}`);
   }
+
+  /** Forgot password - send reset link */
+  forgotPassword(params: ForgotPasswordDTO): Promise<{ message: string; magicLink?: string }> {
+    return this.post<{ message: string; magicLink?: string }>('/auth/forgot-password', params);
+  }
+
+  /** Reset password with token */
+  resetPassword(params: ResetPasswordDTO): Promise<{ message: string }> {
+    return this.post<{ message: string }>('/auth/reset-password', params);
+  }
+
+  /** Demo login (development only) */
+  demoLogin(params: DemoLoginDTO): Promise<AuthSessionDTO> {
+    return this.post<AuthSessionDTO>('/auth/demo-login', params);
+  }
 }

apps/website/lib/mode.ts

@@ -63,7 +63,24 @@ export function isAlpha(): boolean {
  * Get list of public routes that are always accessible
  */
 export function getPublicRoutes(): readonly string[] {
-  return ['/', '/api/signup'] as const;
+  return [
+    '/',
+    '/api/signup',
+    '/api/auth/signup',
+    '/api/auth/login',
+    '/api/auth/forgot-password',
+    '/api/auth/reset-password',
+    '/api/auth/demo-login',
+    '/api/auth/session',
+    '/api/auth/logout',
+    '/auth/login',
+    '/auth/signup',
+    '/auth/forgot-password',
+    '/auth/reset-password',
+    '/auth/iracing',
+    '/auth/iracing/start',
+    '/auth/iracing/callback',
+  ] as const;
 }
 
 /**

apps/website/lib/services/auth/AuthService.ts

@@ -3,6 +3,9 @@ import { SessionViewModel } from '../../view-models/SessionViewModel';
 import type { LoginParamsDTO } from '../../types/generated/LoginParamsDTO';
 import type { SignupParamsDTO } from '../../types/generated/SignupParamsDTO';
 import type { LoginWithIracingCallbackParamsDTO } from '../../types/generated/LoginWithIracingCallbackParamsDTO';
+import type { ForgotPasswordDTO } from '../../types/generated/ForgotPasswordDTO';
+import type { ResetPasswordDTO } from '../../types/generated/ResetPasswordDTO';
+import type { DemoLoginDTO } from '../../types/generated/DemoLoginDTO';
 
 /**
  * Auth Service
@@ -68,4 +71,38 @@ export class AuthService {
       throw error;
     }
   }
+
+  /**
+   * Forgot password - send reset link
+   */
+  async forgotPassword(params: ForgotPasswordDTO): Promise<{ message: string; magicLink?: string }> {
+    try {
+      return await this.apiClient.forgotPassword(params);
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  /**
+   * Reset password with token
+   */
+  async resetPassword(params: ResetPasswordDTO): Promise<{ message: string }> {
+    try {
+      return await this.apiClient.resetPassword(params);
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  /**
+   * Demo login (development only)
+   */
+  async demoLogin(params: DemoLoginDTO): Promise<SessionViewModel> {
+    try {
+      const dto = await this.apiClient.demoLogin(params);
+      return new SessionViewModel(dto.user);
+    } catch (error) {
+      throw error;
+    }
+  }
 }

apps/website/lib/types/generated/AuthenticatedUserDTO.ts

@@ -9,4 +9,6 @@ export interface AuthenticatedUserDTO {
   userId: string;
   email: string;
   displayName: string;
+  primaryDriverId?: string;
+  avatarUrl?: string | null;
 }

apps/website/lib/types/generated/DemoLoginDTO.ts

@@ -0,0 +1,3 @@
+export interface DemoLoginDTO {
+  role: 'driver' | 'sponsor';
+}

apps/website/lib/types/generated/ForgotPasswordDTO.ts

@@ -0,0 +1,3 @@
+export interface ForgotPasswordDTO {
+  email: string;
+}

apps/website/lib/types/generated/ResetPasswordDTO.ts

@@ -0,0 +1,4 @@
+export interface ResetPasswordDTO {
+  token: string;
+  newPassword: string;
+}

apps/website/lib/view-models/SessionViewModel.ts

@@ -4,18 +4,22 @@ export class SessionViewModel {
   userId: string;
   email: string;
   displayName: string;
+  avatarUrl?: string | null;
 
   constructor(dto: AuthenticatedUserDTO) {
     this.userId = dto.userId;
     this.email = dto.email;
     this.displayName = dto.displayName;
 
-    const anyDto = dto as unknown as { primaryDriverId?: unknown; driverId?: unknown };
+    const anyDto = dto as unknown as { primaryDriverId?: unknown; driverId?: unknown; avatarUrl?: unknown };
     if (typeof anyDto.primaryDriverId === 'string' && anyDto.primaryDriverId) {
       this.driverId = anyDto.primaryDriverId;
     } else if (typeof anyDto.driverId === 'string' && anyDto.driverId) {
       this.driverId = anyDto.driverId;
     }
+    if (anyDto.avatarUrl !== undefined) {
+      this.avatarUrl = anyDto.avatarUrl as string | null;
+    }
   }
 
   // Note: The generated DTO doesn't have these fields
@@ -32,12 +36,14 @@ export class SessionViewModel {
     email: string;
     displayName: string;
     primaryDriverId?: string | null;
+    avatarUrl?: string | null;
   } {
     return {
       userId: this.userId,
       email: this.email,
       displayName: this.displayName,
       primaryDriverId: this.driverId ?? null,
+      avatarUrl: this.avatarUrl,
     };
   }
 

apps/website/middleware.ts

@@ -3,14 +3,13 @@ import type { NextRequest } from 'next/server';
 import { getAppMode, isPublicRoute } from './lib/mode';
 
 /**
- * Next.js middleware for route protection based on application mode
+ * Next.js middleware for route protection
  *
- * In pre-launch mode:
- * - Only allows access to public routes (/, /api/signup)
- * - Returns 404 for all other routes
- *
- * In alpha mode:
- * - All routes are accessible
+ * Features:
+ * - Public routes are always accessible
+ * - Protected routes require authentication
+ * - Demo mode allows access to all routes
+ * - Returns 401 for unauthenticated access to protected routes
  */
 export function middleware(request: NextRequest) {
   const mode = getAppMode();
@@ -20,18 +19,39 @@ export function middleware(request: NextRequest) {
   if (pathname === '/404' || pathname === '/500' || pathname === '/_error') {
     return NextResponse.next();
   }
-  
-  // In alpha mode, allow all routes
-  if (mode === 'alpha') {
+
+  // Always allow static assets and API routes (API handles its own auth)
+  if (
+    pathname.startsWith('/_next/') ||
+    pathname.startsWith('/api/') ||
+    pathname.match(/\.(svg|png|jpg|jpeg|gif|webp|ico|css|js)$/)
+  ) {
     return NextResponse.next();
   }
-  
-  // In pre-launch mode, check if route is public
+
+  // Public routes are always accessible
   if (isPublicRoute(pathname)) {
     return NextResponse.next();
   }
-  
-  // Protected route in pre-launch mode - return 404
+
+  // Check for authentication cookie
+  const cookies = request.cookies;
+  const hasAuthCookie = cookies.has('gp_session');
+
+  // In demo/alpha mode, allow access if session cookie exists
+  if (mode === 'alpha' && hasAuthCookie) {
+    return NextResponse.next();
+  }
+
+  // In demo/alpha mode without auth, redirect to login
+  if (mode === 'alpha' && !hasAuthCookie) {
+    const loginUrl = new URL('/auth/login', request.url);
+    loginUrl.searchParams.set('returnTo', pathname);
+    return NextResponse.redirect(loginUrl);
+  }
+
+  // In pre-launch mode, only public routes are accessible
+  // Protected routes return 404 (non-disclosure)
   return new NextResponse(null, {
     status: 404,
     statusText: 'Not Found',

apps/website/next.config.mjs

@@ -45,9 +45,8 @@ const nextConfig = {
     contentDispositionType: 'inline',
   },
   async rewrites() {
-    // Always use the internal Docker API URL in development
-    // This ensures the website container can fetch images during optimization
-    const baseUrl = 'http://api:3000';
+    // Use API_BASE_URL if set, otherwise use internal Docker URL
+    const baseUrl = process.env.API_BASE_URL || 'http://api:3000';
 
     return [
       {
@@ -76,4 +75,4 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+export default nextConfig;