実装 level: 中級

Supabaseで認証付きアプリの土台を作る — DB設計からRLSまで

個人開発で最初の壁になる「ユーザー登録・ログイン・データ保護」をSupabaseで最短構築する実装ガイドです。

この記事で作るもの

「ユーザーがログインして、自分のデータだけを読み書きできる」というWebアプリの土台。ToDoアプリでもメモアプリでも、あらゆるサービスの共通部分です。

手順1: プロジェクトとテーブル

supabase.comでプロジェクトを作成(リージョンはTokyo推奨)し、SQL Editorで:

create table notes (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users(id) not null,
  content text not null,
  created_at timestamptz default now()
);

auth.users はSupabaseが自動管理するユーザーテーブルです。自分のテーブルから参照するだけで認証と紐づきます。

手順2: RLS — 個人開発で一番大事なセキュリティ

Row Level Security(RLS)は「誰がどの行を読み書きできるか」をDB側で強制する仕組みです。これを設定しないと、APIキーを知っている人は全ユーザーのデータを読めてしまいます。

alter table notes enable row level security;

create policy "own rows" on notes
  for all using (auth.uid() = user_id)
  with check (auth.uid() = user_id);

この2文で「自分の行だけ読める・書ける・自分のuser_idでしか作れない」が完成します。

手順3: フロントエンドから使う

import { createClient } from '@supabase/supabase-js'
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

// サインアップ / ログイン
await supabase.auth.signUp({ email, password })
await supabase.auth.signInWithPassword({ email, password })

// データ操作(RLSにより自動で自分の行だけが対象になる)
await supabase.from('notes').insert({ content: '初メモ', user_id: user.id })
const { data } = await supabase.from('notes').select()

Googleログイン等のソーシャルログインも、ダッシュボードのAuthentication → Providersで有効化するだけで追加できます。

AIに任せるときのコツ

Claude CodeやCursorに「Supabaseで認証付きの◯◯を作って」と依頼するときは、「RLSポリシーも必ず書いて」と明示してください。CLAUDE.mdに「全テーブルにRLS必須」と書いておくのが確実です。Supabase MCPを導入しておくと、AIがスキーマ確認やSQL実行まで直接行えるようになります。