Authenticated Supabase Storage With Policies

In today's digital age, managing and storing files efficiently is a fundamental part of application development. Supabase, an open-source platform, offers a powerful solution with Supabase Storage. In this blog, I will guide you through the essential operations of file management, from insertion to deletion, in Supabase Storage. Additionally, we'll delve into understanding and creating custom policies to tailor your file management system to your specific needs.

Create New Project

Visit https://supabase.com/dashboard/sign-in and SignUp. Verify your email and sign-in to Supabase Dashboard.

Create a New Project under your Organization. Click on Settings and choose API in the project settings.

For your created project, Supabase will provide a unique Project URL and Project API keys. These credentials are important to connect your React project with Supabase.

Copy them and store it in an .env file in your React project.

Supabase Client Configuration

Wrap your <App> with <SessionContextProvider> by passing Supabase client property.

Simple Sign-in With Supabase Authentication

In the dashboard menu, click on Authentication. You can create a new user with a valid email address. After successful email verification, your new user is ready to access Supabase.

Include this in the return scope of your Application. It will display a simple Sign-in Page with Supabase Theme. We can also customize it as necessary.

Storage - Bucket

In the dashboard, click on Storage. Create a new bucket.

Additional Configurations are optional and can be used as per your project requirements.

Understanding Supabase Storage Policies

Supabase Storage provides you with fine-grained control over who can access and manipulate your files. These access controls are managed through policies. Policies define who has read, write, and delete permissions within your storage. By default, only authenticated users can read and write their own files, but you can customize these policies.

Building Custom Policies

1. Access Control: Define who can access the files and under what conditions. For example, you can create a policy that allows users to read public files but restricts write access to administrators.
2. Conditions: Policies can be made conditional. For instance, you might want to allow users to modify their uploaded files within the first 24 hours, but not afterwards.
3. Row-Level Security: Customize your policies to enforce rules on specific files or directories. This is particularly useful in multi-tenant applications where each user or organization should have their own isolated storage.
4. Roles and Groups: Supabase allows you to create roles and groups, streamlining the assignment of policies to multiple users simultaneously. This is valuable for large applications with various user roles.

After creating your bucket click on Policies in the Storage menu. Click on New Policy for your bucket. Choose any policy from the template or create your own.

File Operations with Supabase Storage

1. File Insertion

Adding files to your Supabase Storage is a breeze. Use the Supabase Client to upload files directly from your frontend. For instance, you can effortlessly upload user profile pictures, documents, or any other content.

const { data, error } = await supabase.storage.from('your-bucket').upload('your-file-name', yourFile);

2. File Selection

Selecting files from your storage is equally straightforward. You can filter files based on metadata, retrieve specific files, or fetch all files within a bucket. This flexibility allows you to integrate file selection seamlessly into your application.

--> Fetch a specific file by name
const { data, error } = await supabase.storage.from('your-bucket').download('your-file-name');

--> Fetch all files within the bucket
const { data, error } = await supabase.storage.from('your-bucket').list();

--> Filter files based on metadata (e.g., filter by user ID)
const { data, error } = await supabase.storage.from('your-bucket').list({ metadata: { userId: yourUserId } });

3. File Update

Supabase Storage allows you to update files as well. For instance, you might want to replace a user's profile picture with an updated version. Simply upload the new file with the same name, and it will automatically replace the old one.

To update a file, simply upload a new one with the same name. It will overwrite the existing file.
const { data, error } = await supabase.storage.from('your-bucket').upload('your-file-name', yourUpdatedFile);

4. File Deletion

Deleting files from your storage is an essential operation. Whether it's user-generated content that needs to be removed or outdated documents, you can use the remove method to delete files securely.

const { data, error } = await supabase.storage.from('your-bucket').remove('your-file-name');

Sign Out button will redirect you to the Sign In page. Choose File button will open a dialog to upload image files.

Delete button will perform the delete operation. After every operation, the change will be reflected in the Supabase Storage Bucket. There will be no significant delay, which makes it a best choice for your web applications.

In summary, Supabase Storage empowers developers with a robust platform for efficient file management. Its flexibility and customizable policies ensure your application's file handling aligns with your specific requirements. Whether you're building a personal project or a complex enterprise application, Supabase Storage simplifies the management of files while providing powerful control over data security.

Imagine. Innovate. Impact.