英語で読みたい方はこちら
My first impression of Supabase - The better version of Firebase!? - DEV Community 👩💻👨💻
Supabaseとは
ウェブサイトでは以下の様に書いてあります。
The Open Source Firebase Alternative
つまり
オープンソースなFirebase代替プロダクト
といったところでしょうか。
The Open Source Alternative to Firebase. | The Open Source Firebase Alternative | Supabase
Firebaseと同じように認証、データベース、ストレージ(Coming soon)、function(Coming soon)といった機能があります。
FirebaseのプロジェクトをSupabaseプロジェジェクトに書き換えてみたので、感想等を書いていこうともいます ✍️
認証
Supabaseの認証機能はFirebaseと同じくらい便利で使いやすいです。
サードパーティアプリでのサインアップもできます。
- Github
- Gitlab
- Azure
- Bitbucket
自分は、GitHubアカウントで試してみました。
GitHubアプリを作成して、CLIENT ID
、SECRET
を入力します。
そして、GitHunアプリ側にSupabaseが用意してくれているCall back URLを入力します。Firebaseと同じ手順ですね ✌️
https://<your-project>.supabase.co/auth/v1/callback
ウェブアプリにGitHubサインインを実装したい場合は以下のように書いてあげればOKです。
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での実装と同じくらい簡単ですね。
データベース
多くの人が、FirebaseでNoSQLではなくRDB(リレーショナルデータベース)を使いたいと思ったことが一度はあると思います。
そしてSupabaseにはPostgreSQLが付いてます!
おそらくデータベースの違いが、SupabaseとFirebaseの最も大きな差異とも言えます。
ここ数年、Firebaseを多くのプロジェクトに使ってきました。RDBがあればなーと感じたこともありました。なので、Supabaseはまさに私にとって理想のプロダクトと言えるかもしれません。
新規ユーザーがサインアップする毎に、ユーザー情報をデータベースに保存したい場合、予めtriggerを作っておくことで、簡単に実現できます。
1.public.userテーブル
を作る
create table users (
id uuid references auth.users not null primary key,
email text
);
2.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.functionをトリガーする
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();
上記を実行した結果、auth.users
テーブル(Supabaseが自動で作成するテーブルで、一般に公開することはできない。FirebaseのAuth管理画面にあるユーザーリストと同じだと思ってもらえると分かりやすいです。)とpublis.users
(さっきSQLを実行して作ったもの)がユーザー情報を持つことになります。
DB操作の制限
Firestoreにはルール機能がありました。
データの読み書きというアクションを、限られたユーザーのみが実行できるようにするなど、セキュリティ上大事な機能です。
allow write: if request.auth.uid == userId;
SupabaseではPoliciesを使うことで実現できます。 SQLまたはダッシュボード上での操作で作成できます。
create policy "Individuals can update their own data." on users for
update using (auth.uid() = id);
このSQLを実行することで、users
テーブルが1つのpolicyを持つようになりました。
テーブルをロックしておく (Row Level Securityをオンにする)のを忘れないようにしてください。
複雑なクエリを実行する
やっていきましょう。
セキュリティの問題上、いくつかの種類のクエリはJavaScriptのライブラリから直接実行することはできません。
ただ、通常のPostgreSQLと同じように、Viewを作成することができます。
そしてそのViewをフロントエンドから使うことができます。
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
Viewを使ってみる
const response = await supabase
.from('events_by_month')
.select('*')
実際に自分は、joinなどを使用するクエリのViewをあらがじめ作成おき、Reactから実行してみたりしました。楽ちん。
参考: Complicated PSQL Queries · Issue #190 · supabase/supabase
まとめ
Supabaseは、Firebaseと同じレベルの使いやすさを提供してくれています。それに加えて、RDBを使うことができます。
FirebaseのようなMBaaSプロダクトが大好きな自分にとって、Supabaseが開発の必須ツールはどう考えても必須ツールになると思います。
もし今までに一度でも、FirebaseでRDBが使えたらなと思った方はぜひ試してみてください!現在ベータ公開中で、無料で使えます!