PostgreSQLが使えるFirebase!?噂のSupabaseを使ってみた感想

Supabase

英語で読みたい方はこちら

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と同じくらい便利で使いやすいです。

サードパーティアプリでのサインアップもできます。

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

自分は、GitHubアカウントで試してみました。

GitHubアプリを作成して、CLIENT IDSECRETを入力します。

GitHub settings

そして、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();

参考: Database error saving new user when using trigger w/ public.users table · Issue #563 · supabase/supabase

上記を実行した結果、auth.usersテーブル(Supabaseが自動で作成するテーブルで、一般に公開することはできない。FirebaseのAuth管理画面にあるユーザーリストと同じだと思ってもらえると分かりやすいです。)とpublis.users(さっきSQLを実行して作ったもの)がユーザー情報を持つことになります。

public.users

public.users

auth.users

auth.users

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を持つようになりました。

policy

テーブルをロックしておく (Row Level Securityをオンにする)のを忘れないようにしてください。

RLS is on

複雑なクエリを実行する

やっていきましょう。

セキュリティの問題上、いくつかの種類のクエリは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が使えたらなと思った方はぜひ試してみてください!現在ベータ公開中で、無料で使えます!