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.
- Github
- Gitlab
- Azure
- 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
Hi all - I just tried with a new project and didn't have any errors here. Here were the steps:
- Create a public.users table:
create table users (
id uuid references auth.users not null primary key,
email text
);
- 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;
- 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();
- Invite a user via the UI
- See the user with email in the table:
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.
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
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!
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!
Top comments (1)
Thanks for writing Taishi! Let us know what features you’d like to see next!