supabaseで簡単なTodoアプリを構築した話 - ポリシー設定

はじめに

Baas(Backend As A Service)で何かサービスを構築してみたいと思い、
firebaseを触ってみようと思ったところ、Firebase の代替と謳われているsupabaseを発見。

こちらの方が面白そうだと感じたため、構築してみることに

使ったもの

• Vite + Svelte + Typescript

  • @supabase/supabase-js
  • tailwind css

• supabase

  • auth
  • db
  • realtime

これまで

1. フロント側でsupabaseを呼び出せるところように

   https://qiita.com/doyaseizin/items/8820a095a433d09f300d

2. データ取得・操作

   https://qiita.com/doyaseizin/items/d6e0237b700448cc1826

tasksテーブル

項目	型
id	uuid
user_id	uuid
content	text
is_done	boolean
created_at	date

前回まででこのテーブルからTodoの取得や新規登録ができるようになった。

今回

前回まででデータの取得・操作が行えるようになったが、
このままだと自分が作ったTodo以外まで取得・操作できてしまうため、
自分が作ったものだけを操作できるようなポリシーの設定をしていく。

1. RLS(Row Level Security)の有効化

1. サイドメニューより、Authenticationタブを開く
2. Policiesを選択し、tasksテーブルEnable RLSからRLSを有効化する
3. テーブル名の隣にRLS enabledとなっていたら有効化になっている。

2. Policy作成

このままだと誰も閲覧・操作できないので、
例として、自分のTodoのみ閲覧可能にするようなポリシーを設定してみる。

1. New Policyからポリシーを設定する
2. テンプレートはいろいろ用意されているが、今回はFor full customizationを選択。
3. Policy nameには分かりやすい名前を設定。（日本語OK）
4. Allowed operationはSELECTを選択
5. Target rolesはログイン済みのユーザーのみにしたいため、authenticatedを選択
6. USING expressionにはどういった条件を満たした時に、というものを記述する。
   今回の場合は、ログインしてアクセスしてきているユーザーauth.uid()と、
   tasksテーブルのuser_idが一致しているという条件にしたいため、
   auth.uid() = user_idと記述すればOK。

これを設定ことで自分のタスクのみ閲覧することができるようになるため、
↓のようにフロント側でわざわざ条件を付ける必要がない。

const listTodo = async () => {
  const user_id = session.user.id
  const query = supabase
    .from('tasks')
    .select()
    .match({'user_id': user_id})  // ユーザーIDで絞り込み

  const { data, error } = await query
}

同様にINSERT UPDATE DELETEに関してもポリシーを設定し、
自分のTodoしか閲覧・操作できないようにすることができた。

ここまででもTodoアプリとしては機能するが、共同作業などを行っているときは、
他の人が作成したTodoが即座に自分の画面に表示された方が都合がいい場合が多い。

次回はリアルタイム機能を使って、DBの操作が行われたときに、
即座に画面に反映されるようにしていく。

supabase、とってもいい感じですね