Supabase Integration

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

Create a New Project in your Supabase account.
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
Optionally, enable the Google Auth Provider if you want to use Google login in the project:

Follow this documentation (opens in a new tab) for detailed steps to configure OAuth Credentials in the Google Cloud Console (opens in a new tab) & enabling the Auth Provider in the Supabase Dashboard (opens in a new tab).

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).

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.

Go to the Table Editor (opens in a new tab).
Select the table where you want to add a new column.
Click on the Insert dropdown and then Insert Column.

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.

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.
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.

Sync the Table Schema with the Project

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

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.
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
```
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.

QR Code Generator Pinecone