How to Build a API Backend with Lovable

1Create an API backend management system with Supabase. Set up these tables:
2
3- api_keys: id, user_id (references auth.users), name, key_hash (text, unique), key_prefix (text, first 8 chars for display), scopes (text array: read|write|admin), rate_limit (int, requests per minute, default 60), is_active (bool default true), last_used_at, created_at
4- rate_limit_log: id, api_key_id, endpoint, requested_at (timestamptz), response_status (int), response_time_ms (int)
5- api_endpoints: id, method (GET|POST|PUT|DELETE|PATCH), path, description, request_schema (jsonb), response_schema (jsonb), is_public (bool), scopes_required (text array), created_at
6
7RLS:
8- api_keys: users can read/write their own keys only (user_id = auth.uid())
9- rate_limit_log: service role only (no user-facing RLS policies)
10- api_endpoints: public SELECT, admin-only INSERT/UPDATE/DELETE
11
12Generate a function generate_api_key() that creates a secure random key, stores its SHA-256 hash in key_hash, and returns the plaintext key ONCE (it is never stored in plaintext).

1Create a shared middleware module at supabase/functions/_shared/auth.ts.
2
3The module should export an async function authenticateRequest(req: Request, requiredScope: string): Promise<{ apiKey: ApiKey } | Response>.
4
5Logic:
61. Read the Authorization header. Expect format: 'Bearer sk_YOUR_KEY'
72. If missing, return new Response(JSON.stringify({ error: 'Missing API key' }), { status: 401 })
83. Hash the provided key using SubtleCrypto SHA-256
94. Query the api_keys table (using SUPABASE_SERVICE_ROLE_KEY from Deno.env) WHERE key_hash = hash AND is_active = true
105. If not found, return 401 with { error: 'Invalid API key' }
116. Check if requiredScope is in the key's scopes array. If not, return 403 { error: 'Insufficient scope' }
127. Count rows in rate_limit_log WHERE api_key_id = key.id AND requested_at > now() - interval '1 minute'
138. If count >= key.rate_limit, return 429 { error: 'Rate limit exceeded', retry_after: 60 }
149. Insert a new row into rate_limit_log with api_key_id, endpoint, and requested_at = now()
1510. Update api_keys.last_used_at = now() for this key
1611. Return { apiKey: key }

1// supabase/functions/api-items/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4import { authenticateRequest } from '../_shared/auth.ts'
5
6const corsHeaders = {
7  'Access-Control-Allow-Origin': '*',
8  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
9  'Content-Type': 'application/json',
10}
11
12serve(async (req: Request) => {
13  if (req.method === 'OPTIONS') {
14    return new Response('ok', { headers: corsHeaders })
15  }
16
17  const start = Date.now()
18  const url = new URL(req.url)
19
20  try {
21    const scope = req.method === 'GET' ? 'read' : 'write'
22    const authResult = await authenticateRequest(req, scope)
23    if (authResult instanceof Response) return authResult
24
25    const supabase = createClient(
26      Deno.env.get('SUPABASE_URL') ?? '',
27      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
28    )
29
30    if (req.method === 'GET') {
31      const page = parseInt(url.searchParams.get('page') ?? '1')
32      const limit = Math.min(parseInt(url.searchParams.get('limit') ?? '20'), 100)
33      const from = (page - 1) * limit
34
35      const { data, count, error } = await supabase
36        .from('items')
37        .select('*', { count: 'exact' })
38        .range(from, from + limit - 1)
39
40      if (error) throw error
41
42      return new Response(JSON.stringify({
43        data,
44        meta: { page, limit, total: count },
45      }), { headers: corsHeaders })
46    }
47
48    if (req.method === 'POST') {
49      const body = await req.json()
50      const { data, error } = await supabase.from('items').insert(body).select().single()
51      if (error) throw error
52      return new Response(JSON.stringify({ data }), { status: 201, headers: corsHeaders })
53    }
54
55    return new Response(JSON.stringify({ error: 'Method not allowed' }), { status: 405, headers: corsHeaders })
56
57  } catch (err) {
58    const message = err instanceof Error ? err.message : 'Internal server error'
59    return new Response(JSON.stringify({ error: message }), { status: 500, headers: corsHeaders })
60  }
61})

1Build an API key management page at src/pages/ApiKeys.tsx.
2
3Requirements:
4- Show existing keys from api_keys_safe view as Cards (not a table — cards show more info)
5- Each Card shows: key name, key_prefix + '...' (e.g. 'sk_live_ab12...'), scopes as Badges, rate_limit, last_used_at relative time, and a 'Revoke' Button (destructive variant)
6- Add a 'Create New Key' Button that opens a Dialog
7- Dialog form fields (react-hook-form + zod):
8  - Key name (required, text)
9  - Scopes (Checkbox group: read, write, admin)
10  - Rate limit (Select: 30/min, 60/min, 120/min, 300/min)
11- On form submit, call the generate_api_key() Supabase RPC function
12- After creation, show the full key in an Alert component with a copy-to-clipboard Button. Tell the user: 'Save this key now. It will not be shown again.'
13- Revoking a key sets is_active = false via supabase.from('api_keys').update({ is_active: false })
14- Show a usage Sparkline (mini bar chart) per card using Recharts showing last 7 days of request counts

1Build an API documentation page at src/pages/ApiDocs.tsx.
2
3Requirements:
4- Fetch all rows from api_endpoints table
5- Render as a shadcn/ui DataTable (TanStack Table) with columns: Method Badge (GET=green, POST=blue, PUT=yellow, DELETE=red, PATCH=orange), Path (monospace font), Description, Scopes Required Badges, Is Public Badge
6- Clicking a row expands an inline section below the row (not a separate page)
7- Expanded section has three Tabs: 'Request', 'Response', 'Try It'
8- Request tab: renders request_schema jsonb as a formatted JSON code block
9- Response tab: renders response_schema jsonb as a formatted JSON code block
10- Try It tab: shows a Textarea pre-filled with a curl command using the endpoint path, method, and a placeholder API key. Add a Copy button.
11- Add a search Input above the table that filters by path or description
12- Non-authenticated endpoints show a green 'Public' Badge instead of scopes