How to Build Security monitoring with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a security monitoring system:
3// 1. security_events table: id (uuid PK), event_type (text NOT NULL — 'login_failed', 'permission_change', 'rate_limit', 'suspicious_ip'), severity (text — 'low', 'medium', 'high', 'critical'), user_id (uuid FK nullable), ip_address (inet), user_agent (text), metadata (jsonb), created_at (timestamptz DEFAULT now())
4// 2. alert_rules table: id (uuid PK), name (text), event_type (text), threshold (int), window_minutes (int), notify_email (text), is_active (boolean DEFAULT true)
5// 3. blocked_ips table: id (uuid PK), ip_address (inet UNIQUE), reason (text), blocked_at (timestamptz), expires_at (timestamptz nullable)
6// Add indexes on event_type, severity, and created_at for security_events.
7// Add RLS so only admin users can access these tables.
8// Generate the SQL migration and seed with 50 sample security events across all severity levels.

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3
4const supabase = createClient(
5  process.env.NEXT_PUBLIC_SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function POST(req: NextRequest) {
10  const body = await req.json()
11  const { event_type, severity, user_id, ip_address, user_agent, metadata } = body
12
13  const { error } = await supabase.from('security_events').insert({
14    event_type,
15    severity: severity ?? 'low',
16    user_id,
17    ip_address,
18    user_agent,
19    metadata,
20  })
21
22  if (error) {
23    return NextResponse.json({ error: error.message }, { status: 500 })
24  }
25
26  // Check alert rules
27  const { data: rules } = await supabase
28    .from('alert_rules')
29    .select('*')
30    .eq('event_type', event_type)
31    .eq('is_active', true)
32
33  for (const rule of rules ?? []) {
34    const windowStart = new Date(
35      Date.now() - rule.window_minutes * 60000
36    ).toISOString()
37    const { count } = await supabase
38      .from('security_events')
39      .select('*', { count: 'exact', head: true })
40      .eq('event_type', event_type)
41      .gte('created_at', windowStart)
42
43    if ((count ?? 0) >= rule.threshold) {
44      await fetch(process.env.SECURITY_WEBHOOK_URL!, {
45        method: 'POST',
46        headers: { 'Content-Type': 'application/json' },
47        body: JSON.stringify({
48          text: `ALERT: ${rule.name} — ${count} ${event_type} events in ${rule.window_minutes} minutes`,
49        }),
50      }).catch(() => {})
51    }
52  }
53
54  return NextResponse.json({ success: true })
55}

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import { EventTimeline } from '@/components/event-timeline'
5import { LiveEventLog } from '@/components/live-event-log'
6
7export default async function SecurityDashboard() {
8  const supabase = await createClient()
9  const oneHourAgo = new Date(Date.now() - 3600000).toISOString()
10
11  const { count: failedLogins } = await supabase
12    .from('security_events')
13    .select('*', { count: 'exact', head: true })
14    .eq('event_type', 'login_failed')
15    .gte('created_at', oneHourAgo)
16
17  const { count: activeAlerts } = await supabase
18    .from('security_events')
19    .select('*', { count: 'exact', head: true })
20    .in('severity', ['high', 'critical'])
21    .gte('created_at', oneHourAgo)
22
23  const { count: blockedIPs } = await supabase
24    .from('blocked_ips')
25    .select('*', { count: 'exact', head: true })
26
27  const { data: recentEvents } = await supabase
28    .from('security_events')
29    .select('*')
30    .order('created_at', { ascending: false })
31    .limit(100)
32
33  return (
34    <div className="p-6 space-y-6">
35      <h1 className="text-3xl font-bold">Security Dashboard</h1>
36      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
37        <Card>
38          <CardHeader><CardTitle>Failed Logins / Hour</CardTitle></CardHeader>
39          <CardContent>
40            <p className="text-4xl font-bold">{failedLogins ?? 0}</p>
41          </CardContent>
42        </Card>
43        <Card>
44          <CardHeader><CardTitle>Active Alerts</CardTitle></CardHeader>
45          <CardContent>
46            <p className="text-4xl font-bold text-orange-500">{activeAlerts ?? 0}</p>
47          </CardContent>
48        </Card>
49        <Card>
50          <CardHeader><CardTitle>Blocked IPs</CardTitle></CardHeader>
51          <CardContent>
52            <p className="text-4xl font-bold text-red-500">{blockedIPs ?? 0}</p>
53          </CardContent>
54        </Card>
55      </div>
56      <EventTimeline events={recentEvents ?? []} />
57      <LiveEventLog initialEvents={recentEvents ?? []} />
58    </div>
59  )
60}

1'use client'
2
3import { useEffect, useState } from 'react'
4import { createClient } from '@/lib/supabase/client'
5import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
6import { Badge } from '@/components/ui/badge'
7
8type SecurityEvent = {
9  id: string
10  event_type: string
11  severity: string
12  ip_address: string
13  user_agent: string
14  created_at: string
15}
16
17const severityColors: Record<string, string> = {
18  low: 'bg-green-100 text-green-800',
19  medium: 'bg-yellow-100 text-yellow-800',
20  high: 'bg-orange-100 text-orange-800',
21  critical: 'bg-red-100 text-red-800',
22}
23
24export function LiveEventLog({ initialEvents }: { initialEvents: SecurityEvent[] }) {
25  const [events, setEvents] = useState<SecurityEvent[]>(initialEvents)
26  const supabase = createClient()
27
28  useEffect(() => {
29    const channel = supabase
30      .channel('security-events')
31      .on(
32        'postgres_changes',
33        { event: 'INSERT', schema: 'public', table: 'security_events' },
34        (payload) => {
35          setEvents((prev) => [payload.new as SecurityEvent, ...prev.slice(0, 99)])
36        }
37      )
38      .subscribe()
39
40    return () => { supabase.removeChannel(channel) }
41  }, [supabase])
42
43  return (
44    <div className="space-y-2">
45      <h2 className="text-xl font-semibold">Live Event Log</h2>
46      <Table>
47        <TableHeader>
48          <TableRow>
49            <TableHead>Time</TableHead>
50            <TableHead>Type</TableHead>
51            <TableHead>Severity</TableHead>
52            <TableHead>IP Address</TableHead>
53          </TableRow>
54        </TableHeader>
55        <TableBody>
56          {events.map((event) => (
57            <TableRow key={event.id}>
58              <TableCell className="text-sm">
59                {new Date(event.created_at).toLocaleTimeString()}
60              </TableCell>
61              <TableCell>{event.event_type}</TableCell>
62              <TableCell>
63                <Badge className={severityColors[event.severity]}>
64                  {event.severity}
65                </Badge>
66              </TableCell>
67              <TableCell className="font-mono text-sm">{event.ip_address}</TableCell>
68            </TableRow>
69          ))}
70        </TableBody>
71      </Table>
72    </div>
73  )
74}

1// Paste this prompt into V0's AI chat:
2// Build an alert rules management page at app/security/rules/page.tsx.
3// Requirements:
4// - Fetch all alert_rules from Supabase and display in a shadcn/ui Table
5// - Each row shows: rule name, event_type, threshold, window_minutes, notify_email, and a Switch for is_active toggle
6// - Add a "Create Rule" Button that opens a Dialog with a Form containing:
7//   - Input for rule name
8//   - Select for event_type (login_failed, permission_change, rate_limit, suspicious_ip)
9//   - Input type number for threshold
10//   - Input type number for window_minutes
11//   - Input for notify_email
12// - Server Action to create/update/delete rules in Supabase
13// - Use Badge to show event_type and color-code by severity association
14// - Add an AlertDialog confirmation before deleting rules
15// - Include a test button that simulates events to trigger the rule

1'use client'
2
3import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
5
6type SecurityEvent = {
7  id: string
8  severity: string
9  created_at: string
10}
11
12export function EventTimeline({ events }: { events: SecurityEvent[] }) {
13  const hourlyData = events.reduce((acc, event) => {
14    const hour = new Date(event.created_at).toLocaleTimeString([], {
15      hour: '2-digit',
16      minute: '2-digit',
17    })
18    const existing = acc.find((d) => d.time === hour)
19    if (existing) {
20      existing[event.severity] = (existing[event.severity] ?? 0) + 1
21      existing.total += 1
22    } else {
23      acc.push({ time: hour, [event.severity]: 1, total: 1 })
24    }
25    return acc
26  }, [] as Array<Record<string, any>>)
27
28  return (
29    <Card>
30      <CardHeader>
31        <CardTitle>Event Timeline</CardTitle>
32      </CardHeader>
33      <CardContent>
34        <ResponsiveContainer width="100%" height={300}>
35          <AreaChart data={hourlyData}>
36            <XAxis dataKey="time" />
37            <YAxis />
38            <Tooltip />
39            <Area type="monotone" dataKey="critical" stackId="1" fill="#ef4444" stroke="#ef4444" />
40            <Area type="monotone" dataKey="high" stackId="1" fill="#f97316" stroke="#f97316" />
41            <Area type="monotone" dataKey="medium" stackId="1" fill="#eab308" stroke="#eab308" />
42            <Area type="monotone" dataKey="low" stackId="1" fill="#22c55e" stroke="#22c55e" />
43          </AreaChart>
44        </ResponsiveContainer>
45      </CardContent>
46    </Card>
47  )
48}