feat(config): add comprehensive API URL validation across all layers

Add validation for NEXT_PUBLIC_API_URL at multiple levels to catch
configuration errors early:

- Build-time: Validate URL format and presence in Dockerfile
- Runtime: Validate URL format in docker-entrypoint.sh
- Frontend: Add URL validation with proper error handling and fallbacks
- Infrastructure: Validate URL format in CDK construct
- CI/CD: Pass API URL as explicit build argument

Additionally, fix logout functionality to use auth context action
instead of simple navigation link.

Author: chandra447

.github/workflows/deploy-infrastructure.yml

@@ -175,6 +175,8 @@ jobs:
           file: ./frontend/Dockerfile.prod
           platforms: linux/arm64
           push: true
+          build-args: |
+            NEXT_PUBLIC_API_URL=${{ secrets.FASTAPI_BACKEND || 'https://d3cp7cujulcncl.cloudfront.net' }}
           tags: |
             ${{ steps.login-ecr.outputs.registry }}/${{ env.ECR_FRONTEND_REPO }}:${{ github.sha }}
             ${{ steps.login-ecr.outputs.registry }}/${{ env.ECR_FRONTEND_REPO }}:latest

frontend/Dockerfile.prod

@@ -12,7 +12,20 @@ WORKDIR /app
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 # API URL will be injected via build-arg from CI/CD (GitHub Secrets)
-ARG NEXT_PUBLIC_API_URL=https://d3cp7cujulcncl.cloudfront.net
+ARG NEXT_PUBLIC_API_URL
+
+# Validate that NEXT_PUBLIC_API_URL is provided
+RUN if [ -z "$NEXT_PUBLIC_API_URL" ]; then \
+    echo "Error: NEXT_PUBLIC_API_URL build-arg is required but not set"; \
+    exit 1; \
+  fi
+
+# Validate URL format
+RUN if ! echo "$NEXT_PUBLIC_API_URL" | grep -E '^https?://[^ ]+$' > /dev/null; then \
+    echo "Error: Invalid NEXT_PUBLIC_API_URL format: $NEXT_PUBLIC_API_URL"; \
+    exit 1; \
+  fi
+
 ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .

frontend/components/dashboard-layout.tsx

@@ -5,13 +5,15 @@ import { cn } from "@/lib/utils"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { MicSparklesIcon } from "@/components/ui/mic-sparkles-icon"
+import { useAuth } from "@/lib/auth/auth-context"
 
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   const pathname = usePathname()
+  const { logout } = useAuth()
 
   const links = [
     {
@@ -31,8 +33,9 @@ export default function DashboardLayout({
     },
     {
       label: "Logout",
-      href: "/",
+      href: "#",
       icon: IconLogout,
+      action: logout,
     },
   ]
 
@@ -59,6 +62,28 @@ export default function DashboardLayout({
           {links.map((link, idx) => {
             const Icon = link.icon
             const active = isActive(link.href)
+            
+            if (link.action) {
+              // For logout button
+              return (
+                <button
+                  key={idx}
+                  onClick={link.action}
+                  className={cn(
+                    "h-10 w-10 rounded-xl flex items-center justify-center transition-all group relative",
+                    "text-neutral-400 hover:text-white hover:bg-neutral-800/50"
+                  )}
+                  title={link.label}
+                >
+                  <Icon className="h-5 w-5 shrink-0" />
+                  {/* Tooltip */}
+                  <span className="absolute left-14 px-2 py-1 bg-neutral-800 text-white text-xs rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity">
+                    {link.label}
+                  </span>
+                </button>
+              )
+            }
+            
             return (
               <Link
                 key={idx}

frontend/docker-entrypoint.sh

@@ -1,14 +1,32 @@
 #!/bin/sh
 set -e
 
+# Function to validate URL format
+validate_url() {
+  if ! echo "$1" | grep -E '^https?://[^ ]+$' > /dev/null; then
+    echo "Error: Invalid URL format: $1"
+    exit 1
+  fi
+}
+
 # Replace placeholder with actual API URL at runtime
 if [ -n "$NEXT_PUBLIC_API_URL" ]; then
   echo "Configuring API URL: $NEXT_PUBLIC_API_URL"
 
+  # Validate URL format
+  validate_url "$NEXT_PUBLIC_API_URL"
+  
   # Update the config.js file with the actual API URL
   cat > /app/public/config.js <<EOF
-window.NEXT_PUBLIC_API_URL = '$NEXT_PUBLIC_API_URL';
+// Runtime configuration - loaded by browser
+(function() {
+  window.NEXT_PUBLIC_API_URL = '$NEXT_PUBLIC_API_URL';
+})();
 EOF
+
+  echo "API URL configuration completed successfully"
+else
+  echo "Warning: NEXT_PUBLIC_API_URL not set, using build-time configuration"
 fi
 
 # Execute the CMD

frontend/lib/api/config.ts

@@ -2,6 +2,18 @@
  * Centralized API configuration that handles runtime URL injection
  */
 
+/**
+ * Validates if a URL is properly formatted
+ */
+function isValidUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Get the API base URL from runtime config or build-time environment variable.
  * This function checks multiple sources in order of precedence:
@@ -14,12 +26,42 @@ export function getApiBaseUrl(): string {
   if (typeof window !== 'undefined' && (window as any).NEXT_PUBLIC_API_URL) {
     const runtimeUrl = (window as any).NEXT_PUBLIC_API_URL;
     // Don't use placeholder value
-    if (runtimeUrl !== '__PLACEHOLDER__') {
+    if (runtimeUrl !== '__PLACEHOLDER__' && isValidUrl(runtimeUrl)) {
       return runtimeUrl;
     }
+    // If runtime config is invalid, log a warning
+    if (runtimeUrl !== '__PLACEHOLDER__') {
+      console.warn(`Invalid runtime API URL: ${runtimeUrl}. Falling back to build-time configuration.`);
+    }
+  }
+  
+  // Fallback to build-time environment variable
+  const buildTimeUrl = process.env.NEXT_PUBLIC_API_URL;
+  if (buildTimeUrl && isValidUrl(buildTimeUrl)) {
+    return buildTimeUrl;
+  }
+  
+  // Final fallback to localhost for development
+  const fallbackUrl = 'http://localhost:8000';
+  if (!buildTimeUrl) {
+    console.warn(`No API URL configured. Using fallback: ${fallbackUrl}`);
+  } else {
+    console.warn(`Invalid build-time API URL: ${buildTimeUrl}. Using fallback: ${fallbackUrl}`);
   }
 
-  // Fallback to build-time environment variable or localhost for dev
-  return process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+  return fallbackUrl;
 }
 
+/**
+ * Get the API base URL with validation and error handling
+ * Throws an error if no valid URL can be determined
+ */
+export function getValidatedApiBaseUrl(): string {
+  const url = getApiBaseUrl();
+  
+  if (!isValidUrl(url)) {
+    throw new Error(`Invalid API URL configuration: ${url}`);
+  }
+  
+  return url;
+}

frontend/public/config.js

@@ -1,2 +1,7 @@
 // Runtime configuration - loaded by browser
-window.NEXT_PUBLIC_API_URL = window.NEXT_PUBLIC_API_URL || '__PLACEHOLDER__';
+(function() {
+  // Initialize with a default that will be replaced by docker-entrypoint.sh
+  if (!window.NEXT_PUBLIC_API_URL) {
+    window.NEXT_PUBLIC_API_URL = '__PLACEHOLDER__';
+  }
+})();

infrastructure/cdk_constructs/ecs_frontend.py

@@ -33,6 +33,11 @@ def __init__(
     ) -> None:
         super().__init__(scope, construct_id, **kwargs)
         stack = Stack.of(self)
+        
+        # Validate backend API URL format
+        import re
+        if not re.match(r'^https?://[^ ]+$', backend_api_url):
+            raise ValueError(f"Invalid backend_api_url format: {backend_api_url}. Must be a valid HTTP/HTTPS URL.")
 
         vpc = ec2.Vpc(self, "FrontendVpc", nat_gateways=1)
         cluster = ecs.Cluster(self, "FrontendCluster", vpc=vpc)
@@ -75,6 +80,7 @@ def __init__(
                 container_port=3000,
                 environment={
                     "NEXT_PUBLIC_API_URL": backend_api_url,
+                    "NODE_ENV": "production",
                 },
             ),
         )