Prerequisites
- A Supabase project already created (see Set Up Your Database with Supabase)
- Access to your project’s SQL Editor or Storage section in the Supabase dashboard
Environment variables
Storage requires two variables in your.env.local:
Steps
1
Get your project URL and service role key
- In your Supabase project dashboard, go to Project Settings → API.
- Under Project URL, copy the URL — this is your
VITE_SUPABASE_URL. - Under Project API keys, find the
service_roleentry (labeled “secret”) and copy that value — this is yourSUPABASE_SERVICE_ROLE_KEY.
2
Create the avatars bucket
RefactKit expects a bucket named
avatars with public read access. You can create it via SQL or through the Supabase dashboard.- SQL Editor
- Supabase Dashboard
In your Supabase project, go to SQL Editor and run the following:The
ON CONFLICT clause makes the statement safe to re-run — it will not fail if the bucket already exists.3
Set the public read policy
The bucket being public controls the URL format, but you also need a storage policy that allows unauthenticated SELECT access. Run this in the SQL Editor:This policy lets anyone with the file URL retrieve avatar images — which is required for displaying user and organization avatars in the UI without requiring a signed URL on every request.
Upload operations are always authenticated and run through the server function in
src/server/storage-fns.ts using the service role key. The public policy only applies to read (GET) access.How uploads work
All file uploads go through a server function to protect the service role key:- The client sends the file as
FormDatato the server function. - The server validates file size (max 2 MB) and content type.
- A random filename is generated to prevent collisions.
- The file is uploaded to Supabase Storage via the service role client.
- The public URL is returned to the client and stored in the database.
src/server/storage-fns.ts. The Supabase client for storage is initialized in lib/supabase.ts using SUPABASE_SERVICE_ROLE_KEY.
