feat: comprehensive application audit and fixes

Audited codebase, fixed input validation, OAuth, error handling, type casts, and security hardening Co-authored-by: Moheeb Zara <1184415+virgilvox@users.noreply.github.com>
2026-03-11 08:18:57 +00:00
parent 2e136b5f55
commit f5697f577f
14 changed files with 704 additions and 23 deletions
@@ -0,0 +1,61 @@
+'use client'
+
+import { useEffect } from 'react'
+import { AlertTriangle, RefreshCw, ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+
+export default function AppError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('[App Section Error]', error)
+  }, [error])
+
+  return (
+    <div className="flex-1 flex items-center justify-center p-8">
+      <div className="max-w-md w-full">
+        <div className="bg-card border border-border rounded-lg p-6 text-center">
+          <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-4">
+            <AlertTriangle className="w-6 h-6 text-destructive" />
+          </div>
+          
+          <h2 className="text-lg font-semibold text-foreground mb-2">
+            Something went wrong
+          </h2>
+          
+          <p className="text-sm text-muted-foreground mb-4">
+            We encountered an error while loading this page.
+          </p>
+
+          {error.digest && (
+            <p className="text-xs text-muted-foreground/60 font-mono mb-4 bg-muted px-2 py-1 rounded inline-block">
+              {error.digest}
+            </p>
+          )}
+
+          <div className="flex gap-2 justify-center">
+            <button
+              onClick={reset}
+              className="inline-flex items-center gap-1.5 px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
+            >
+              <RefreshCw className="w-3.5 h-3.5" />
+              Retry
+            </button>
+            
+            <Link
+              href="/dashboard"
+              className="inline-flex items-center gap-1.5 px-3 py-2 rounded-md border border-border text-foreground text-sm font-medium hover:bg-accent transition-colors"
+            >
+              <ArrowLeft className="w-3.5 h-3.5" />
+              Dashboard
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -41,7 +41,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
  return (
    <div className="flex h-screen bg-background overflow-hidden">
      <AppSidebar
-        member={member as any}
+        member={member}
        taskBadge={taskCount ?? 0}
        paymentBadge={paymentCount ?? 0}
      />
@@ -0,0 +1,12 @@
+import { Loader2 } from 'lucide-react'
+
+export default function AppLoading() {
+  return (
+    <div className="flex-1 flex items-center justify-center min-h-[50vh]">
+      <div className="flex flex-col items-center gap-3">
+        <Loader2 className="w-8 h-8 text-primary animate-spin" />
+        <p className="text-sm text-muted-foreground font-mono">Loading...</p>
+      </div>
+    </div>
+  )
+}
@@ -1,5 +1,6 @@
 import { createClient } from '@/lib/supabase/server'
 import { OpsClient } from './ops-client'
+import type { Tables } from '@/types/database'

 export default async function OpsPage() {
  const supabase = await createClient()
@@ -16,17 +17,17 @@ export default async function OpsPage() {
    supabase.from('knowledge_base').select('*').eq('space_id', member.space_id).order('is_pinned', { ascending: false }).order('created_at', { ascending: false }),
    supabase.from('area_leads').select('*').eq('space_id', member.space_id).order('area_name'),
    canSeeSecrets
-      ? supabase.from('secrets').select('id, title, area, created_at').eq('space_id', member.space_id)
-      : Promise.resolve({ data: [] }),
+      ? supabase.from('secrets').select('id, title, area, created_at, label, value, description, icon, space_id, created_by, updated_at, category, notes').eq('space_id', member.space_id)
+      : Promise.resolve({ data: [] as Tables<'secrets'>[] }),
  ])

  return (
    <OpsClient
-      member={member}
+      member={member as Tables<'space_members'>}
      spaceId={member.space_id}
      kbEntries={kbEntries ?? []}
      areaLeads={areaLeads ?? []}
-      secrets={(secretsResult as any)?.data ?? []}
+      secrets={secretsResult.data ?? []}
      canSeeSecrets={canSeeSecrets}
    />
  )
@@ -0,0 +1,60 @@
+'use client'
+
+import { useEffect } from 'react'
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
+import Link from 'next/link'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('[App Error]', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <div className="max-w-md w-full text-center">
+        <div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-6">
+          <AlertTriangle className="w-8 h-8 text-destructive" />
+        </div>
+        
+        <h1 className="text-2xl font-bold text-foreground mb-2">
+          Something went wrong
+        </h1>
+        
+        <p className="text-muted-foreground mb-6">
+          An unexpected error occurred. Please try again or contact support if the problem persists.
+        </p>
+
+        {error.digest && (
+          <p className="text-xs text-muted-foreground/60 font-mono mb-6">
+            Error ID: {error.digest}
+          </p>
+        )}
+
+        <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <button
+            onClick={reset}
+            className="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-md bg-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 transition-colors"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Try again
+          </button>
+          
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-md border border-border text-foreground font-medium text-sm hover:bg-accent transition-colors"
+          >
+            <Home className="w-4 h-4" />
+            Go to Dashboard
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,62 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error('[Global Error]', error)
+  }, [error])
+
+  return (
+    <html lang="en">
+      <body className="font-sans antialiased">
+        <div className="min-h-screen bg-[#111] flex items-center justify-center p-4">
+          <div className="max-w-md w-full text-center">
+            <div className="w-16 h-16 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-6">
+              <svg
+                className="w-8 h-8 text-red-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+            </div>
+
+            <h1 className="text-2xl font-bold text-white mb-2 font-mono">
+              Critical Error
+            </h1>
+
+            <p className="text-zinc-400 mb-6">
+              A critical error occurred. Please refresh the page or try again later.
+            </p>
+
+            {error.digest && (
+              <p className="text-xs text-zinc-600 font-mono mb-6">
+                Error ID: {error.digest}
+              </p>
+            )}
+
+            <button
+              onClick={reset}
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-md bg-white text-black font-medium text-sm hover:bg-zinc-200 transition-colors"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+}
@@ -0,0 +1,18 @@
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center">
+      <div className="flex flex-col items-center gap-4">
+        <div className="w-10 h-10 rounded bg-primary flex items-center justify-center animate-pulse">
+          <span className="text-primary-foreground font-mono text-sm font-bold">
+            {'{'}<span>hs</span>{'}'}
+          </span>
+        </div>
+        <div className="flex gap-1">
+          <div className="w-2 h-2 rounded-full bg-primary animate-bounce [animation-delay:-0.3s]" />
+          <div className="w-2 h-2 rounded-full bg-primary animate-bounce [animation-delay:-0.15s]" />
+          <div className="w-2 h-2 rounded-full bg-primary animate-bounce" />
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -11,6 +11,7 @@ export default function LoginPage() {
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
+  const [oauthLoading, setOauthLoading] = useState<'github' | 'google' | null>(null)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
@@ -27,6 +28,22 @@ export default function LoginPage() {
    }
  }

+  async function handleOAuthLogin(provider: 'github' | 'google') {
+    setOauthLoading(provider)
+    setError('')
+    const supabase = createClient()
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider,
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback`,
+      },
+    })
+    if (error) {
+      setError(error.message)
+      setOauthLoading(null)
+    }
+  }
+
  return (
    <div className="min-h-screen bg-[#111] flex items-center justify-center relative overflow-hidden">
      {/* Grid background */}
@@ -102,20 +119,30 @@ export default function LoginPage() {
          </div>

          <div className="flex gap-3">
-            <button className="flex-1 flex items-center justify-center gap-2 bg-[#232323] border border-[#333] text-white font-mono text-xs py-2.5 rounded hover:border-[#555] transition">
+            <button
+              type="button"
+              onClick={() => handleOAuthLogin('github')}
+              disabled={oauthLoading !== null}
+              className="flex-1 flex items-center justify-center gap-2 bg-[#232323] border border-[#333] text-white font-mono text-xs py-2.5 rounded hover:border-[#555] transition disabled:opacity-60"
+            >
              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
              </svg>
-              GitHub
+              {oauthLoading === 'github' ? 'Redirecting...' : 'GitHub'}
            </button>
-            <button className="flex-1 flex items-center justify-center gap-2 bg-[#232323] border border-[#333] text-white font-mono text-xs py-2.5 rounded hover:border-[#555] transition">
+            <button
+              type="button"
+              onClick={() => handleOAuthLogin('google')}
+              disabled={oauthLoading !== null}
+              className="flex-1 flex items-center justify-center gap-2 bg-[#232323] border border-[#333] text-white font-mono text-xs py-2.5 rounded hover:border-[#555] transition disabled:opacity-60"
+            >
              <svg className="w-4 h-4" viewBox="0 0 24 24">
                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
              </svg>
-              Google
+              {oauthLoading === 'google' ? 'Redirecting...' : 'Google'}
            </button>
          </div>

@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { FileQuestion, Home, ArrowLeft } from 'lucide-react'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <div className="max-w-md w-full text-center">
+        <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-6">
+          <FileQuestion className="w-8 h-8 text-muted-foreground" />
+        </div>
+        
+        <h1 className="text-6xl font-bold text-foreground mb-2 font-mono">404</h1>
+        
+        <h2 className="text-xl font-semibold text-foreground mb-2">
+          Page not found
+        </h2>
+        
+        <p className="text-muted-foreground mb-8">
+          The page you're looking for doesn't exist or has been moved.
+        </p>
+
+        <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <Link
+            href="/dashboard"
+            className="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-md bg-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 transition-colors"
+          >
+            <Home className="w-4 h-4" />
+            Go to Dashboard
+          </Link>
+          
+          <Link
+            href="/"
+            className="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-md border border-border text-foreground font-medium text-sm hover:bg-accent transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}