⚙️ Setup
Supabase

Supabase Setup

Here, you will find the setup instructions for creating or updating a table, creating a Supabase Storage Bucket, and adding an RLS policy in supabase bucket.

  1. Create a New Project in your Supabase account.

  2. Now, go to the API Settings (opens in a new tab) in the dashboard to get the Project Url, Anon Key and Service Role Key

  3. Optionally, follow the auth setup to configure authentication with supabase

Create an User Table

  • Go to the SQL Editor (opens in a new tab)

  • Enter the following SQL query to automatically create a public user table that is synced with Supabase's auth table. Whenever a new user signs up, a new entry will be added to this table via Supabase Auth.

    User Table
    -- Create a table for public users
    create table users (
        id uuid references auth.users on delete cascade not null primary key,
        created_at timestamp with time zone not null default now(),
        email text not null,
        full_name text null,
        avatar_url text null,
        constraint users_email_key unique (email)
    );
     
    -- Set up Row Level Security (RLS)
    alter table users
        enable row level security;
     
    create policy "Users can insert their own row." on users
        for insert with check (auth.uid() = id);
     
    create policy "Users can update own row" on users
        for update using (auth.uid() = id);
     
    create policy "Users can read own row" on users
        for select using (auth.uid() = id);
     
    -- This trigger automatically creates a profile entry when a new user signs up via Supabase Auth.
    create function public.handle_new_user()
    returns trigger as $$
    begin
        insert into public.users (id, email, full_name, avatar_url)
        values (new.id, new.email, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
        return new;
    end;
    $$ language plpgsql security definer;
    create trigger on_auth_user_created_trigger
        after insert on auth.users
        for each row execute procedure public.handle_new_user();

The, SQL script provided below enables the RLS policy by default for that table.

An user table should be created in your supabase project as seen below. Check here to verify (opens in a new tab).

User Table

Editing a Supabase Table

Additionally, you can add more columns to the table if required. Just add the necessary column with its type after line 7 in the script.

You can also add a new column from the dashboard.

Create a Supabase Storage Bucket (optional)

  • Go to Storage (opens in a new tab) in supabase dashboard.
  • Click on New Bucket. A modal will open a shown below.
  • Enter the bucket name, and Save. Create Storage Bucket
Add RLS policy for the Supabase storage bucket
  • Go to Storage Policies (opens in a new tab). You will find the recently created storage as shown below. Add Storage Policy
  • Click on New policy.
  • Select For full customization.
  • Now, enter a policy name and select operation as INSERT and SELECT. Leave the Policy definition field default as it is.
  • Click on Add Review. Then, Save Policy. Storage Policy Modal

Sync the Table Schema with the Project

Now that you have completed the Supabase setup, let's sync the table schema with the project.

  1. First, log in to your Supabase account:

    terminal
    supabase login

    Follow the prompts in your terminal to log in. This step ensures that your CLI can interact with your Supabase projects.

  2. Navigate to the root of your repository where you have initialized a Supabase project. If you haven't initialized one yet, you can do so by running:

    terminal
    supabase init
  3. Now, run the following command to sync the database with the project:

    terminal
    npx supabase gen types typescript --project-id [PROJECT_ID] --schema public > src/types/supabase.ts

    To get the Project ID, go to the General Settings (opens in a new tab) in the dashboard. You will find the Reference ID, which is your Project ID.