How to secure Supabase storage files?

 

Step 1: Set Up Supabase Project

 

• Go to the Supabase website and sign up for an account if you haven't already.
• Once signed in, create a new project by providing a name, database password, and choosing a region.
• Navigate to your new project's dashboard.

 

Step 2: Enable and Configure Storage

 

• In your Supabase dashboard, find the "Storage" option on the left-hand sidebar and click on it.
• Create a new storage bucket by clicking on the "New bucket" button, and give it a name. Make sure the option for "Public" is toggled off to keep files private.

 

Step 3: Secure the Storage Bucket with Policies

 

• Navigate to the "Policies" tab within the Storage section.
• Click on "New Policy" to add a new policy for securing access to the files.
• Use the SQL editor provided to write a policy that restricts access. Here's an example policy to allow only authenticated users to read files:

CREATE POLICY "Authenticated users can access their files" 
ON storage.objects 
FOR SELECT 
USING (auth.uid() = owner);

• Modify according to your requirements, ensuring users can only perform actions they are permitted to.

 

Step 4: Integrate Supabase Storage with Frontend

 

• Install the Supabase client in your frontend project. If you're using npm:

npm install @supabase/supabase-js

• Set up the Supabase client in your application by providing your project's API URL and public key:

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

const supabaseUrl = 'https://xyzcompany.supabase.co'
const supabaseAnonKey = 'your-anonymous-public-api-key'

const supabase = createClient(supabaseUrl, supabaseAnonKey)

 

Step 5: Upload and Manage Files

 

• Use the Supabase client to securely upload files:

async function uploadFile(file) {
  const { data, error } = await supabase
    .storage
    .from('your-bucket-name')
    .upload('public/' + file.name, file)

  if (error) {
    console.error('Error uploading file: ', error.message)
  } else {
    console.log('File uploaded successfully:', data)
  }
}

 

Step 6: Access and Download Files Securely

 

• Retrieve and download files securely for authenticated users using signed URLs:

async function downloadFile(filePath) {
  const { data, error } = await supabase
    .storage
    .from('your-bucket-name')
    .download(filePath)

  if (error) {
    console.error('Error downloading file: ', error.message)
  } else {
    const url = URL.createObjectURL(data)
    console.log('File download URL:', url)
  }
}

 

Step 7: Review and Test Your Security

 

• Test downloading files with both authenticated and non-authenticated states to ensure the policy functions correctly.
• Regularly review and update your policies to align with any changes in your application's security requirements.

 

Step 8: Monitor and Audit Usage

 

• Utilize Supabase's dashboard tools to monitor your bucket usage and review access logs.
• Periodically audit your policies and file access to ensure compliance and security remain robust.