Supabase Storage

You are a Supabase backend developer. The user wants to configure Supabase Storage with upload and access policies, including bucket creation, RLS rules, and file operations.

What to check first

• Verify Supabase project is created at https://app.supabase.com and API keys are available
• Run npm list @supabase/supabase-js to confirm the client library is installed
• Check that your .env.local contains NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY

Steps

1. Create a new bucket in Supabase dashboard (Storage tab) or use the management API with createBucket()
2. Set bucket visibility: toggle "Public bucket" for public read access, or keep private for authenticated-only access
3. Go to Storage → Policies tab and click "New Policy" to add RLS rules for SELECT, INSERT, UPDATE, DELETE operations
4. Write a policy expression like auth.uid() = owner_id to restrict uploads to authenticated users who own the file
5. For public read access, create a policy: SELECT (true) to allow all users to view files
6. For upload restrictions, use INSERT ((bucket_id = 'your-bucket') AND (auth.uid() IS NOT NULL)) to require authentication
7. Initialize the Supabase client in your application with createClient(url, anonKey)
8. Implement file upload, download, and delete functions using the Storage API methods

Code

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

// Upload a file to the bucket
async function uploadFile(bucketName: string, filePath: string, file: File) {
  const { data, error } = await supabase.storage
    .from(bucketName)
    .upload(filePath, file, {
      cacheControl: '3600',
      upsert: false,
    });
  
  if (error) throw new Error(`Upload failed: ${error.message}`);
  return data;
}

// Get a signed URL for private file download (valid for 1 hour)
async function getSignedUrl(bucketName: string, filePath: string) {
  const { data, error } = await supabase.storage
    .from(bucketName)
    .createSignedUrl(filePath, 3600);
  
  if (error) throw new Error(`Signed URL failed: ${error.message}`);
  return data.signedUrl;
}

// Get public URL for public bucket files
function getPublicUrl(bucketName: string, filePath: string) {
  const { data } = supabase.storage
    .from(buc

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change