Identify and avoid Supabase anti-patterns and common integration mistakes. Use when reviewing Supabase code for issues, onboarding new developers, or auditing existing Supabase integrations for best practices violations. Trigger with phrases like "supabase mistakes", "supabase anti-patterns", "supabase pitfalls", "supabase what not to do", "supabase code review".
/plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills/plugin install supabase-pack@claude-code-plugins-plusThis skill is limited to using the following tools:
Common mistakes and anti-patterns when integrating with Supabase.
// User waits for Supabase API call
app.post('/checkout', async (req, res) => {
const payment = await supabaseClient.processPayment(req.body); // 2-5s latency
const notification = await supabaseClient.sendEmail(payment); // Another 1-2s
res.json({ success: true }); // User waited 3-7s
});
// Return immediately, process async
app.post('/checkout', async (req, res) => {
const jobId = await queue.enqueue('process-checkout', req.body);
res.json({ jobId, status: 'processing' }); // 50ms response
});
// Background job
async function processCheckout(data) {
const payment = await supabaseClient.processPayment(data);
await supabaseClient.sendEmail(payment);
}
// Blast requests, crash on 429
for (const item of items) {
await supabaseClient.process(item); // Will hit rate limit
}
import pLimit from 'p-limit';
const limit = pLimit(5); // Max 5 concurrent
const rateLimiter = new RateLimiter({ tokensPerSecond: 10 });
for (const item of items) {
await rateLimiter.acquire();
await limit(() => supabaseClient.process(item));
}
// In frontend code (visible to users!)
const client = new SupabaseClient({
apiKey: 'sk_live_ACTUAL_KEY_HERE', // Anyone can see this
});
// In git history
git commit -m "add API key" // Exposed forever
// Backend only, environment variable
const client = new SupabaseClient({
apiKey: process.env.SUPABASE_API_KEY,
});
// Use .gitignore
.env
.env.local
.env.*.local
// Network error on response = duplicate charge!
try {
await supabaseClient.charge(order);
} catch (error) {
if (error.code === 'NETWORK_ERROR') {
await supabaseClient.charge(order); // Charged twice!
}
}
const idempotencyKey = `order-${order.id}-${Date.now()}`;
await supabaseClient.charge(order, {
idempotencyKey, // Safe to retry
});
// Trust any incoming request
app.post('/webhook', (req, res) => {
processWebhook(req.body); // Attacker can send fake events
res.sendStatus(200);
});
app.post('/webhook',
express.raw({ type: 'application/json' }),
(req, res) => {
const signature = req.headers['x-supabase-signature'];
if (!verifySupabaseSignature(req.body, signature)) {
return res.sendStatus(401);
}
processWebhook(JSON.parse(req.body));
res.sendStatus(200);
}
);
// Crashes on any error
const result = await supabaseClient.get(id);
console.log(result.data.nested.value); // TypeError if missing
try {
const result = await supabaseClient.get(id);
console.log(result?.data?.nested?.value ?? 'default');
} catch (error) {
if (error instanceof SupabaseNotFoundError) {
return null;
}
if (error instanceof SupabaseRateLimitError) {
await sleep(error.retryAfter);
return this.get(id); // Retry
}
throw error; // Rethrow unknown errors
}
const client = new SupabaseClient({
timeout: 5000, // Too short for some operations
baseUrl: 'https://api.supabase.com', // Can't change for staging
});
const client = new SupabaseClient({
timeout: parseInt(process.env.SUPABASE_TIMEOUT || '30000'),
baseUrl: process.env.SUPABASE_BASE_URL || 'https://api.supabase.com',
});
// When Supabase is down, every request hangs
for (const user of users) {
await supabaseClient.sync(user); // All timeout sequentially
}
import CircuitBreaker from 'opossum';
const breaker = new CircuitBreaker(supabaseClient.sync, {
timeout: 10000,
errorThresholdPercentage: 50,
resetTimeout: 30000,
});
// Fails fast when circuit is open
for (const user of users) {
await breaker.fire(user).catch(handleFailure);
}
console.log('Request:', JSON.stringify(request)); // Logs API key, PII
console.log('User:', user); // Logs email, phone
const redacted = {
...request,
apiKey: '[REDACTED]',
user: { id: user.id }, // Only non-sensitive fields
};
console.log('Request:', JSON.stringify(redacted));
// Entire feature broken if Supabase is down
const recommendations = await supabaseClient.getRecommendations(userId);
return renderPage({ recommendations }); // Page crashes
let recommendations;
try {
recommendations = await supabaseClient.getRecommendations(userId);
} catch (error) {
recommendations = await getFallbackRecommendations(userId);
reportDegradedService('supabase', error);
}
return renderPage({ recommendations, degraded: !recommendations });
Scan codebase for each pitfall pattern.
Address security issues first, then performance.
Replace anti-patterns with recommended patterns.
Set up linting and CI checks to prevent recurrence.
| Issue | Cause | Solution |
|---|---|---|
| Too many findings | Legacy codebase | Prioritize security first |
| Pattern not detected | Complex code | Manual review |
| False positive | Similar code | Whitelist exceptions |
| Fix breaks tests | Behavior change | Update tests |
# Check for common pitfalls
grep -r "sk_live_" --include="*.ts" src/ # Key leakage
grep -r "console.log" --include="*.ts" src/ # Potential PII logging
| Pitfall | Detection | Prevention |
|---|---|---|
| Sync in request | High latency | Use queues |
| Rate limit ignore | 429 errors | Implement backoff |
| Key leakage | Git history scan | Env vars, .gitignore |
| No idempotency | Duplicate records | Idempotency keys |
| Unverified webhooks | Security audit | Signature verification |
| Missing error handling | Crashes | Try-catch, types |
| Hardcoded config | Code review | Environment variables |
| No circuit breaker | Cascading failures | opossum, resilience4j |
| Logging PII | Log audit | Redaction middleware |
| No degradation | Total outages | Fallback systems |