Rork × Supabase 認証＆リアルタイム機能実装ガイド — ノーコードでバックエンドを構築する方法

# Supabase CLIを使ったプロジェクト初期化
npx supabase init
 
# ローカル開発環境の起動
npx supabase start
 
# 出力例:
# API URL: http://localhost:54321
# anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
# service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

-- ユーザープロフィールテーブル
CREATE TABLE profiles (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  username TEXT UNIQUE NOT NULL,
  avatar_url TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
 
-- メッセージテーブル（リアルタイムチャット用）
CREATE TABLE messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES profiles(id) NOT NULL,
  content TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
 
-- RLS（Row Level Security）の有効化
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE messages ENABLE ROW LEVEL SECURITY;
 
-- ポリシー: 誰でもプロフィールを閲覧可能
CREATE POLICY "Profiles are viewable by everyone"
  ON profiles FOR SELECT USING (true);
 
-- ポリシー: 自分のプロフィールのみ更新可能
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);
 
-- ポリシー: 認証済みユーザーはメッセージを投稿可能
CREATE POLICY "Authenticated users can insert messages"
  ON messages FOR INSERT
  WITH CHECK (auth.uid() = user_id);
 
-- ポリシー: 誰でもメッセージを閲覧可能
CREATE POLICY "Messages are viewable by everyone"
  ON messages FOR SELECT USING (true);

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js';
 
const supabaseUrl = 'https://your-project.supabase.co';
const supabaseAnonKey = 'your-anon-key';
 
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

// 新規登録
async function signUp(email: string, password: string, username: string) {
  // 1. Supabase Authでユーザーを作成
  const { data: authData, error: authError } = await supabase.auth.signUp({
    email,
    password,
  });
 
  if (authError) throw authError;
 
  // 2. プロフィールテーブルにレコードを追加
  const { error: profileError } = await supabase
    .from('profiles')
    .insert({
      id: authData.user?.id,
      username,
    });
 
  if (profileError) throw profileError;
 
  return authData;
}
 
// ログイン
async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });
 
  if (error) throw error;
  return data;
}
 
// ログアウト
async function signOut() {
  const { error } = await supabase.auth.signOut();
  if (error) throw error;
}
 
// 使用例:
// await signUp('user@example.com', 'password123', 'testuser');
// → ユーザー作成 + プロフィール作成が完了

// リアルタイムメッセージ購読
function subscribeToMessages(onNewMessage: (message: any) => void) {
  const channel = supabase
    .channel('messages')
    .on(
      'postgres_changes',
      {
        event: 'INSERT',
        schema: 'public',
        table: 'messages',
      },
      (payload) => {
        onNewMessage(payload.new);
      }
    )
    .subscribe();
 
  // クリーンアップ関数を返す
  return () => {
    supabase.removeChannel(channel);
  };
}
 
// メッセージ送信
async function sendMessage(content: string) {
  const user = (await supabase.auth.getUser()).data.user;
  if (!user) throw new Error('Not authenticated');
 
  const { error } = await supabase
    .from('messages')
    .insert({
      user_id: user.id,
      content,
    });
 
  if (error) throw error;
}
 
// 使用例:
// const unsubscribe = subscribeToMessages((msg) => {
//   console.log('New message:', msg.content);
// });
// await sendMessage('Hello from Rork!');
// → 全購読者にリアルタイムで配信される