What is Supabase!?

On the website, it says The Open Source Firebase Alternative

The Open Source Alternative to Firebase. | The Open Source Firebase Alternative | Supabase

It has Authentication, Database, storage(coming soon), and function(coming soon) just like Firebase does.

I converted my Firebase project into Supabase one and I am gonna write down my impression of it ✍️

Authentication

The authentication feature of Supabase is as easy and handy as Firebase.

We can sign up with the third parties too.

• Google
• Github
• Gitlab
• Azure
• Facebook
• Bitbucket

I tried with GitHub and the procedure of setting is the same as Firebase.

We have to create a GitHub app and put App Client Id, secret and call back URL.

Supabase takes care of the call back URL ✌️

https://<your-project>.supabase.co/auth/v1/callback

If you want users to sign up/sign in with a GitHub account, you can simply put the code below.

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

const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)

const handleSignUp = async () => {
  const { user, session, error } = await supabase.auth.signIn({
    // provider can be 'github', 'google', 'gitlab', or 'bitbucket'
    provider: 'github',
  })
}

Firebase's Authentication feature is very easy to use and so convenient.
What I am impressed with is that Supabase's Authentication feature has the same level as Firebase's.

This is really amazing.

Database

I bet many of you have wished that Firebase has a relational database, not No SQL.

And Supabase comes with PostgreSQL!!
I think this is the biggest difference between Firebase and Supabase.

You can execute complex queries.

Firebase has Database but that's a NO SQL (Firestore) which is not good at fetching data with complex queries.

I have been waiting for the product that is like Firebase with RDB, thus Supabase is my ideal 😻

If you want to save a user's data on a database every time a user signs up, you can create a function and trigger it!

1.Create the public.user table

create table users (
  id uuid references auth.users not null primary key,
  email text
);

2.Create the function

create or replace function public.handle_new_user() 
returns trigger as $$
begin
  insert into public.users (id, email)
  values (new.id, new.email);
  return new;
end;
$$ language plpgsql security definer;

3.Trigger the function

create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

Reference:

Comment for #563

kiwicopple commented on Feb 04, 2021

Hi all - I just tried with a new project and didn't have any errors here. Here were the steps:

1. Create a public.users table:

create table users (
  id uuid references auth.users not null primary key,
  email text
);

2. create a trigger:

create or replace function public.handle_new_user() 
returns trigger as $$
begin
  insert into public.users (id, email)
  values (new.id, new.email);
  return new;
end;
$$ language plpgsql security definer;

3. Trigger the function on invite:

-- trigger the function every time a user is created
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

4. Invite a user via the UI

5. See the user with email in the table:

Let me know if I'm missing anything

View on GitHub

As a result, auth.users(that Supabase automatically creates and not accessible for the public) and publis.users (that you created with the SQL!) have the user information.

Rules for DB

Firestore has a rule functionality.

I use it to restrict database manipulation.

allow write: if request.auth.uid == userId;

With Supabase, we can do the same thing with Policies.
You can create politics from a dashboard or with SQL.

create policy "Individuals can update their own data." on users for
    update using (auth.uid() = id);

Now my users table has one policy.

Make sure the users table is locked (Row Level Security is on).

Wanna use a complicated query?

Of curse, you can.

Because of security risk, you can't use some type of query with Supabase's npm library.
But just same as normal PostgreSQL, you can create a view and use it from the front-end.

Create a view

CREATE VIEW public.events_by_month AS
SELECT to_char(generate_series(event_months.min, event_months.max, '1 month'), 'Mon-YY') AS months
FROM (
  SELECT
    date_trunc('month', min(start_date)) AS min,
    date_trunc('month', max(start_date)) AS max
  FROM events
) event_months

Use the view

const response = await supabase
    .from('events_by_month')
    .select('*')

I used the view feature to execute the query with the join clause and it worked 🤩

Reference:

Comment for #190

kiwicopple commented on Sep 09, 2020

Unfortunately you can't do it that way as it would probably open up the possibility of SQL injection.

But it can be done! You can just create a view on your data, and you can select() that. Something like this:

CREATE VIEW public.events_by_month AS
SELECT to_char(generate_series(event_months.min, event_months.max, '1 month'), 'Mon-YY') AS months
FROM (
  SELECT
    date_trunc('month', min(start_date)) AS min,
    date_trunc('month', max(start_date)) AS max
  FROM events
) event_months

then you can query it with supabase-js:

const response = await supabase
    .from('events_by_month')
    .select('*')

Let me know if that works for your use-case!

View on GitHub

Summary

When compared to Firebase, Supabase offers the same ease of use as Firebase. This is great.
In addition to that, you can use Relational Database.

In my case, I wanted to create a Tinder-like app and it's easy to imagine that the RDB feature is essential for data fetching. And I just went for Supabase 🚀

It's not hard for Supabase to become a must-have for my app development.

If you are a developer who uses Firebase a lot, and you need a relational database, Supabase will surely help you!