supabase-auth-fixed-rooms-foundation

name	supabase-auth-fixed-rooms-foundation
description	Vue + Vite の WebRTC アプリで Supabase 認証と固定ルーム基盤を最小差分で追加・拡張するときに使う。Google ログインに加えて Discord OAuth と Email OTP を扱い、session 管理、rooms / profiles / banned_users、join 前 BAN 判定、RLS 前提の browser client を整理する。routing 導線や room_kind UI 分岐、Poker 固有機能には広げない。

supabase-auth-fixed-rooms-foundation

Purpose

Vue + Vite ベースの WebRTC アプリに、Supabase を使った認証と固定ルーム管理の土台を最小差分で追加・拡張する。

この skill は以下を担当する。

• Google OAuth
• Discord OAuth
• Email OTP
• auth session 管理
• fixed rooms の取得基盤
• profiles / banned_users の扱い
• browser client 前提の安全な Supabase 利用

この skill 自体は、画面遷移や room_kind ごとの UI 分岐は担当しない。 それらは別 skill に分離する。

Common guardrails

• 最小差分で実装する
• 既存の WebRTC ロジックを全消ししない
• src/components/WebRTC_UI.vue は作業部屋で再利用する
• 作業部屋用に WebRTC_UI.vue を複製しない
• ポーカー部屋は別 view / 別 UI に分ける
• 認証前に部屋画面へ入れない
• room join 前に BAN 判定を行う
• フロントに service_role を置かない
• コメントや日本語 UI 文言は不必要に変えない
• Poker のゲーム状態同期は今は入れない。入れる時は webrtc-poker-room-extension で扱う

Use this skill when

• Supabase client を追加したい
• Google ログインを追加したい
• Discord OAuth を追加したい
• Email OTP を追加したい
• profiles / rooms / banned_users の基盤を追加したい
• 固定ルーム一覧を DB 管理にしたい
• room join 前の BAN 判定を導入したい
• profiles.nickname を表示名の正本にしたい

Do not use this skill when

• LoginView / RoomSelectView / route guard の UI 導線を作りたいだけ
• work room / poker room の UI 差分を設計したい
• Poker 固有 UI や game state を追加したい
• WebRTC の media / publication / late join の問題を直したい

Architecture intent

• Supabase は認証と固定ルーム定義を持つ
• rooms テーブルは固定ルームのマスタ
• profiles は auth user に対応する公開プロフィール
• banned_users は入室拒否判定用
• フロントは anon key のみを使う
• service_role は絶対にフロントへ出さない
• 表示用 nickname と SkyWay join 用内部名は分離して扱う
• Email OTP は code 入力型を基本にする
• 認証 provider ごとの差異は SupabaseService.js と useAuthSession.js に閉じ込める

Hard constraints

• 最小差分で実装する
• 既存の WebRTC ロジックを全消しして書き換えない
• service_role key をブラウザに置かない
• public schema のテーブルは RLS 前提で扱う
• banned_users の client 書き込みを許可しない
• rooms は client から更新しない
• auth callback 内で重い非同期処理を連鎖させない
• 日本語 UI 文言や既存コメントは不必要に変更しない
• 既存 public API shape を無意味に変えない
• profiles.nickname をそのまま SkyWay の member.name に渡さない
• Email OTP は magic link 前提で広げない
• provider 追加のために router / room UI / WebRTC core まで抱え込まない

Current product assumptions

• ルームは固定で 2 つ
• work-room
• poker-room
• room_kind は work と poker
• 認証後に部屋選択画面へ進む
• room join 前に BAN 判定を行う
• LoginView では複数認証手段を選べる
• RoomSelectView で nickname 未設定 user を止める

Recommended auth providers

OAuth providers

• Google
• Discord

Email auth

• Email OTP
• code 入力型を基本とする
• OTP expiration と桁数は Dashboard 側設定に従う
• LoginView 上で送信と検証を完結させてよい

Recommended schema scope

• rooms
  • slug
  • display_name
  • room_kind
  • skyway_room_name
  • media_mode
  • sort_order
  • is_active
  • ui_config
• profiles
  • id
  • display_name
  • nickname
  • avatar_url
  • created_at
  • updated_at
• banned_users
  • user_id
  • reason
  • banned_until
  • created_at

RLS intent

• rooms
  • authenticated user の select のみ
• profiles
  • 本人のみ select / insert / update
• banned_users
  • 本人の row の select のみ
  • client から insert / update / delete しない

Nickname profile policy

Source of truth

• UI 表示名の正本は public.profiles.nickname とする
• localStorage は正本にしない
• OAuth provider の表示名や auth.users の値を UI の最終正本にしない
• nickname は auth user に 1:1 で紐づく profile 情報として扱う

Recommended schema update

• profiles に nickname 列を持たせる
• nickname は初期段階では nullable でよい
• 既存 user への backfill は原則不要
• nickname = 'user' のような一律埋めは推奨しない
• profile 読み出し時は id, display_name, avatar_url, nickname を基本項目とする

Auth and profile behavior

• Google / Discord / Email OTP のいずれかでログイン成功後は current user の id を取得する
• その id に対応する public.profiles を読む
• nickname 未設定なら RoomSelectView で設定させる前提にする
• nickname 更新は本人の profile row に対する update または upsert のみ許可する
• profiles.nickname は UI 表示名の正本として上位へ渡す
• profiles.nickname をそのまま room join 用内部名の正本にしない

RLS intent addendum

• profiles は本人のみ select / insert / update
• nickname 更新は本人 row のみ許可する
• 他人の nickname を client から変更できない
• service_role を使わず anon + authenticated + RLS 前提で成立させる

SkyWay member name separation policy

Display nickname and join name are different

• public.profiles.nickname は UI 表示用の名前として扱う
• profiles.nickname は日本語を許可してよい
• ただし profiles.nickname を SkyWay の member.name にそのまま使わない
• SkyWay join 用の member.name は ASCII 安全な内部名を別で生成する
• 表示名の正本と、WebRTC 接続用の内部名を分離する

Why this separation is required

• SkyWay の member.name には利用可能文字の制約がある
• 日本語 nickname をそのまま member.name に渡すと join が失敗する
• nickname のバリデーションと SkyWay join 名のバリデーションを同一視しない

Recommended join name source

• SkyWay join 用の内部名は auth user の id から生成してよい
• 例:
  • u_${user.id.replace(/-/g, '')}
  • u_${user.id.replace(/-/g, '').slice(0, 16)}
• 内部名は UI に積極表示しない
• nickname 未設定時の UI 導線と、SkyWay join 用内部名の生成責務を混ぜない

Profile behavior addendum

• RoomSelectView では profiles.nickname を表示・編集する
• room join 時には profiles.nickname ではなく、別で生成した SkyWay 用内部名を渡す
• 参加者表示の正本は profiles.nickname とする
• publisher.name や SkyWay の内部名を UI 表示の正本にしない

Recommended implementation order

1. Supabase browser client を追加または確認
2. Google ログイン関数を確認
3. Discord OAuth 関数を追加
4. Email OTP の送信関数を追加
5. Email OTP の検証関数を追加
6. session / current user 取得を整理
7. rooms / profiles / banned_users の SQL を追加または確認
8. fixed rooms 読み出し関数を追加または確認
9. BAN 判定関数を追加または確認
10. profiles.nickname 読み出しと更新関数を追加または確認
11. SkyWay join 用内部名の生成関数を追加または確認
12. 最後に routing 側へ接続する

Recommended files

• src/services/SupabaseService.js
• src/composables/useAuthSession.js
• src/composables/useLobbyRooms.js
• src/composables/useRoomJoinGuard.js
• sql/supabase/*.sql

Recommended service API examples

• signInWithGoogle(redirectTo?)
• signInWithDiscord(redirectTo?)
• signInWithEmailOtp(email)
• verifyEmailOtp(email, token)
• getAuthSession()
• getCurrentUser()
• onAuthStateChange(handler)
• getProfileNickname(userId)
• saveProfileNickname(userId, nickname)
• checkUserBanStatus(userId)
• buildSkywayMemberName(userId)

Dashboard prerequisites

• Supabase Site URL を設定する
• Redirect URLs に localhost / Vercel URL を追加する
• Google provider を有効化する
• Discord provider を有効化する
• Email provider を有効化する
• Email OTP expiration / length を決める
• Discord provider の Client ID / Client Secret / callback URL を整合させる

Do not touch unless explicitly required

• src/components/WebRTC_UI.vue の通話ロジック本体
• existing SkyWay service / composable の大規模分割
• late join / screen share / mute の既存挙動
• LoginView / router / RoomSelectView の UI 詳細
• Poker 固有 UI

Verification checklist

• 未ログイン時に current user が null になる
• Google ログイン後に session が取れる
• Discord ログイン後に session が取れる
• Email OTP 送信後にエラーなく code 入力待ち状態へ入れる
• Email OTP 検証後に session が取れる
• rooms が取得できる
• room_kind が work / poker の 2 件で扱える
• BAN されていないユーザーは join 前チェックを通る
• BAN されたユーザーは join 前に止まる
• service_role がフロントコードに存在しない
• rooms / profiles / banned_users が RLS 前提になっている

Verification checklist addendum

• profiles.nickname が取得できる
• nickname 未設定 user を判定できる
• 本人だけが nickname を更新できる
• nickname 更新後に再読込しても同じ値が取れる
• profiles.nickname に日本語を保存できる
• 日本語 nickname の user でも room join が失敗しない
• SkyWay join 用の内部名が ASCII 安全な値になっている
• UI 上の表示名と SkyWay 内部名が分離されている
• Google / Discord / Email OTP のどれでログインしても /rooms 導線へ入れる

Anti-patterns

• service_role を Vite env に置く
• auth.users を UI データ置き場として直接使う
• banned_users を client から自由に更新する
• routing や view 実装までこの skill で抱え込む
• 認証追加のついでに WebRTC ロジックを大規模改造する
• profiles.nickname をそのまま SkyWay join 名に渡す
• Email OTP を magic link 前提で実装して LoginView 導線を複雑化する
• provider ごとの差分を各 view にばら撒く

Prompt template

この skill を使って、Supabase 認証と fixed rooms の土台だけを最小差分で追加・拡張してください。 画面遷移や room_kind ごとの UI 分岐は別 skill の責務なので広げないでください。 Google OAuth、Discord OAuth、Email OTP、rooms / profiles / banned_users、BAN 判定、RLS 前提の browser client、profiles.nickname の管理、SkyWay join 用内部名の分離に限定してください。 Email 認証は code 入力型 OTP を前提にし、magic link 前提へ広げないでください。

Do not expand scope

この skill で routing 実装、room_kind UI 分岐、Poker state 同期、WebRTC core の大規模整理まで広げない。