DEV Community

loading...
Cover image for My first impression of Supabase - The better version of Firebase!?

My first impression of Supabase - The better version of Firebase!?

Taishi
Love making apps and JavaScript-related technology
Updated on ・4 min read

Supabase

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.

GitHub settings

Supabase takes care of the call back URL ✌️

https://<your-project>.supabase.co/auth/v1/callback
Enter fullscreen mode Exit fullscreen mode

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',
  })
}
Enter fullscreen mode Exit fullscreen mode

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
);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

3.Trigger the function

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

Reference:

Comment for #563

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
);
Enter fullscreen mode Exit fullscreen mode
  1. 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;
Enter fullscreen mode Exit fullscreen mode
  1. 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();
Enter fullscreen mode Exit fullscreen mode
  1. Invite a user via the UI

image

  1. See the user with email in the table:

image

Let me know if I'm missing anything

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.

public.users

public.users

auth.users

auth.users

Rules for DB

Firestore has a rule functionality.

I use it to restrict database manipulation.

allow write: if request.auth.uid == userId;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Now my users table has one policy.
policy

Make sure the users table is locked (Row Level Security is on).
RLS 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
Enter fullscreen mode Exit fullscreen mode

Use the view

const response = await supabase
    .from('events_by_month')
    .select('*')
Enter fullscreen mode Exit fullscreen mode

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

Reference:

Comment for #190

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
Enter fullscreen mode Exit fullscreen mode

then you can query it with supabase-js:

const response = await supabase
    .from('events_by_month')
    .select('*')
Enter fullscreen mode Exit fullscreen mode

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

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!

Discussion (1)

Collapse
awalias profile image
awalias

Thanks for writing Taishi! Let us know what features you’d like to see next!