superbase

SvelteでSupabaseを使う例

by

今日は最近流行りのSvelteスタックで基本的な操作を理解できる例を紹介しますね。

Supabaseのセットアップ

前回のSupabaseの記事を読んでおきましょう。

次に、テーブルを準備します。

  1. Supabaseダッシュボードにサインイン:
    • Supabase にアクセスし、アカウントでサインインします。
  2. 新しいプロジェクトを作成:
    • まだプロジェクトを作成していない場合、「New Project」ボタンをクリックし、新しいプロジェクトを作成する手順に従います。プロジェクトを作成すると、データベースのプロビジョニングが開始されます。
  3. SQLエディタへアクセス:
    • データベースのプロビジョニングが開始されたら、プロジェクトダッシュボードに移動します。
  4. 「Todo List」クイックスタートを実行:
    • プロジェクトダッシュボードで、”SQL” タブまたは “SQLエディタ” タブを見つけてクリックしてSQLエディタを開きます。
    • SQLスニペットまたは例のリストをスクロールし、「TODO LIST: Build a basic todo list with Row Level Security」というスクリプトを探します。これは基本的な「Todo」テーブルを行レベルのセキュリティルールとともにセットアップする事前に用意されたSQLスクリプトです。

このスクリプトを選択します。

“Run”または “Execute” ボタンをクリックして選択したスクリプトを実行します。これにより、データベースに「Todo」テーブルが作成され、必要な行レベルのセキュリティルールも設定されます。

スクリプトが正常に実行されると、テーブルとルールが作成されたことを示す確認メッセージが表示されます。

“Data” タブに移動して、「Todo」テーブルが作成されていることを確認できます。

APIキーの取得

URLとキーの取得 プロジェクト設定に移動して（歯車アイコン）、APIタブを開き、API URLと匿名キー（anon key）を見つけてください。これらは次の手順で必要になります。

匿名キーは、クライアント側のAPIキーです。ユーザーがログインするまで、データベースへの「匿名アクセス」を許可します。ユーザーがログインしたら、キーはユーザー自身のログイントークンに切り替わります。これにより、データの行レベルのセキュリティが有効になります。

注意：サービスロールキーはセキュリティポリシーをバイパスし、データに完全なアクセス権を持っています。これらのキーは秘密に保つ必要があり、サーバー環境でのみ使用され、クライアントやブラウザ上で使用しないでください。

プロジェクトのクローン

SupabaseのプロジェクトができたらSvelteのToDoリストのサンプルリポジトリがるのでこれをクローンしましょう。

https://github.com/supabase/supabase/tree/master/examples/todo-list/sveltejs-todo-list

下記のコマンドだとSupabaseの全部のリポがクローンされてしまうのでサイズはちょっと大きいかも

mkdir svelte-todo
cd svelte-todo

git clone https://github.com/supabase/supabase.git

cd supabase/examples/todo-list/sveltejs-todo-list
npm i

ではSvelteの例があるディレクトリに移動してライブラリをインストールしましょう。同じディレクトリにNext.jsとNuxt.jsで作られたToDoリストのサンプルプロジェクトもあるようですね。

ではcode .　のコマンドでVSCodeを開きましょう。

ルートディレクトリに.env.exampleのファイルがあるので名前を.envに変更します。

次に中にある環境変数に先ほどSupabaseでとってきた値を入力します。

VITE_SUPABASE_URL=https://rcominfdsafsjrfpyeql.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3qweiJzdXBhYmFzZSIsInJlZiI6InJjb21pbmxnc2Fmc2pyZnB5ZXFsIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTgyNzUyODksImV4cCI6MjAxMzg1MTI4OX0.ll4gIpu9G5V76nCQPm-De9jeuq8-tVw4E92zlgTxJO4

アプリの起動

ではnpm run devのコマンドでSvelteアプリを起動します。

でサインアップをするとメールにちゃんとサインアップの確認メールが届きました。

そうするとToDoリストに誘導されてタスクを入力できるようになりましたね。

登録されたユーザーはAUthentication（認証）タブのユーザーから確認できますね。

でSvelteのアプリから追加したタスクもデータベースのテーブルに反映されていました。

Googleでのログインを追加する

まずは、Gooelデベロッパーコンソールからプロジェクトを作成をします。
Google Developer ConsoleからSupabaseのGoogle認証に使用するOAuthのClient IDを取得する手順は以下の通りです：

  1. Google Developer Consoleにサインイン:
    • Google Developer Consoleにアカウントでサインインします。もしGoogleアカウントを持っていない場合、アカウントを作成してください。
  2. 新しいプロジェクトを作成:
    • ダッシュボードで、新しいプロジェクトを作成します。プロジェクトの名前を入力し、必要な情報を設定します。
  3. 認証情報の設定:
    • プロジェクトを作成したら、左側のナビゲーションメニューから「APIとサービス」>「認証情報」に移動します。
  4. OAuthクライアントIDの作成:
    • 「認証情報」ページにアクセスしたら、”OAuth 2.0 クライアント IDの作成” ボタンをクリックします。
  5. アプリケーションの種類を選択:
    • “アプリケーションの種類”セクションで、”ウェブアプリケーション”を選択します。
  6. 名前を指定:
    • クライアントIDの名前を入力します。これは認識しやすい名前であるべきです。
  7. 承認リダイレクトURIを指定:
    • “承認リダイレクトURI”セクションで、SupabaseにリダイレクトされるURIを指定します。通常、これはSupabaseアプリケーションのURIで、SupabaseがGoogle認証からの応答を受け取るURIです。
  8. クライアントIDとクライアントシークレットの取得:
    • クライアントIDとクライアントシークレットが生成されます。これらはSupabaseの設定で使用するため、安全な場所に保存してください。

ではSupabaseの認証タブでキーを登録します。

これだけで、OKです。素晴らしいですね。

ではGoogleでもログインできることを確認しましょう。

今日はコードの説明なしですが、次回詳しくSvelteのファイル構成と一緒に見ていきましょう。