[Logto](https://logto.io/) は、セキュアで包括的かつユーザーフレンドリーなログインサポートを提供するモダンなアイデンティティ認証サービスです。また、複数のフレームワークやプログラミング言語に対応した膨大な SDK や統合ガイドを提供し、エンタープライズグレードのアイデンティティ認証サービスを数分でアプリケーションにシームレスに統合できます。この記事は主に、Logto と Supabase を統合する方法について詳しく説明します。 ## Supabase の基本 Supabase は、[Postgres の行レベルセキュリティ](https://www.postgresql.org/docs/current/ddl-rowsecurity.html) を利用してデータアクセスの権限を管理します。簡単に言うと、データベース内のテーブルに行レベルセキュリティポリシーを作成することで、誰がそのテーブルのデータを読み取り、書き込み、更新できるかを制限し管理できます。ここでは、データベースに「posts」という名前のテーブルがあり、次のような内容が含まれていると仮定します。 Posts table

このテーブル内の `user_id` フィールドは、各投稿データがどのユーザーに属するかを表します。`user_id` フィールドに基づいて、各ユーザーが自分の投稿データだけにアクセスできるように制限できます。ただし、これを実装する前に、Supabase が現在データベースにアクセスしているユーザーを識別できる必要があります。 ### Supabase リクエストにユーザーデータを追加する Supabase の JWT サポートのおかげで、アプリケーションが Supabase と連携する際に、Supabase によって提供された JWT シークレットを使用してユーザーデータを含む JWT を生成できます。次に、この JWT をリクエスト時の認証ヘッダーとして使用します。Supabase はリクエストを受信すると、この JWT の有効性を自動的に検証し、その後のプロセス全体で含まれるデータへのアクセスを許可します。まず、Supabase ダッシュボードの「Project Settings」から Supabase によって提供された JWT シークレットを取得できます： Supabase API settings page

次に、Supabase SDK を使用して Supabase にリクエストを行う際に、このシークレットを使用して JWT を生成し、これを認証ヘッダーとしてリクエストに添付します。（なお、この処理はアプリケーションのバックエンドサービス内で実行されるものであり、JWT シークレットを第三者に公開することは許されません）。 ```jsx import { createClient } from '@supabase/supabase-js'; import { sign } from 'jsonwebtoken'; /* * 注記： * SUPABASE_URL と SUPABASE_ANON_KEY は JWT シークレットと同じ場所で見つかります。 */ const SUPABASE_URL = process.env.SUPABASE_URL; const SUPABASE_ANON_KEY = process.env.SUPABASE_ANON_KEY; const SUPABASE_JWT_SECRET = process.env.SUPABASE_JWT_SECRET; export const getSupabaseClient = (userId) => { const jwtPayload = { userId, }; const jwt = sign(jwtPayload, SUPABASE_JWT_SECRET, { expiresIn: '1h', // あくまでデモ用 }); const client = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, { global: { headers: { Authorization: `Bearer ${jwt}`, }, }, }); return client; }; ``` 次に、Supabase ダッシュボードの SQL エディターに移動し、リクエストに含まれる userId を取得する関数を作成します： Create get user ID function

画像に使用されたコードは次のとおりです： ```sql create or replace function auth.user_id() returns text as $$ select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text; $$ language sql stable; ``` コードからわかるように、Supabase では、`request.jwt.claims` を呼び出すことで生成した JWT のペイロードを取得できます。ペイロード内の `userId` フィールドが私たちが設定した値になります。この関数で、Supabase は現在データベースにアクセスしているユーザーを特定することができます。 ### 行レベルセキュリティポリシーを作成する次に、投稿テーブル内の `user_id` フィールドに基づいて、各ユーザーが自分の投稿データだけにアクセスできるようにする行レベルセキュリティポリシーを作成することができます。 1. Supabase ダッシュボードのテーブルエディターページに移動し、投稿テーブルを選択します。 2. テーブルの上部にある「Add RLS Policy」をクリックします。 3. 表示されたウィンドウで「Create policy」をクリックします。 4. ポリシー名を入力し、SELECT ポリシーコマンドを選択します。 5. 次のコードの `using` ブロックに次のように入力します： ```sql auth.user_id() = user_id ``` Create RLS policy

このようなポリシーを活用することで、Supabase 内のデータアクセスの制御が実現されます。実際のアプリケーションでは、データの挿入や変更などのユーザー操作を制限するために、さまざまなポリシーを作成することになります。ただし、これはこの記事の範囲を超えます。行レベルセキュリティ (RLS) の詳細については、[Postgres 行レベルセキュリティでデータを保護する](https://supabase.com/docs/guides/database/postgres/row-level-security) を参照してください。 ### Logto との基本的な統合プロセス前述のように、Supabase はアクセス制御に RLS を使用するため、Logto（または他の認証サービス）と統合する際の鍵は、認証されたユーザーのユーザー ID を取得してこれを Supabase に送信することです。以下の図に、全体のプロセスが示されています： ```mermaid sequenceDiagram Participant U as エンドユーザー Participant Logto Participant B as アプリケーションバックエンドサービス Participant Supabase U->>Logto: Logto でサインイン Logto-->>U: `access_token` U->>B: `access_token` を使用してデータをリクエスト B->>B: `access_token` から `user_id` を取得 B->>B: `user_id` と `Supabase JWT secret` で jwt を生成 B->>Supabase: jwt を使用してデータをリクエスト Supabase-->>B: データを応答 B-->>U: データを応答 ``` 次に、このプロセス図に基づいて Logto と Supabase をどのように統合するかを説明します。 ## Logto の統合 Logto は、さまざまなフレームワークとプログラミング言語の統合ガイドを提供しています。通常、これらのフレームワークと言語で構築されたアプリケーションは、ネイティブアプリ、SPA（シングルページアプリ）、従来の Web アプリ、M2M（マシン・ツー・マシン）アプリなどのカテゴリに分かれます。[Logto クイックスタート](https://docs.logto.io/quick-starts/) ページを訪れて、使用している技術スタックに基づいて Logto をあなたのアプリケーションに統合できます。その後、アプリケーションの種類に基づいて、以下の指示に従ってプロジェクトに Logto を統合します。 ### ネイティブアプリや SPA ネイティブアプリと SPA の両方はデバイス上で実行され、ログイン後に取得した資格情報（アクセストークン）はデバイスにローカルで保存されます。したがって、アプリを Supabase と統合する際には、バックエンドサービスを介して Supabase とやり取りする必要があります。これにより、各ユーザーのデバイス上でセキュアでない情報（例：Supabase JWT シークレット）を公開することを防ぎます。 React と Express を使用して SPA を構築していると仮定しましょう。[Logto React SDK ガイド](https://docs.logto.io/quick-starts/react/) に従って、アプリケーションに Logto を正常に統合しました（コードについては、私たちの [react sample](https://github.com/logto-io/js/tree/master/packages/react-sample) を参照してください）。さらに、[Protect your API on Node (Express)](https://docs.logto.io/docs/recipes/protect-your-api/node/) ドキュメントに従って、バックエンドサーバーに Logto のアクセストークン検証を追加しました。次に、Logto から取得したアクセストークンを使用してバックエンドサーバーにユーザーデータをリクエストします： ```jsx import { useLogto } from '@logto/react'; import { useState, useEffect } from 'react'; import PostList from './PostList'; const endpoint = ''; const resource = ''; function PostPage() { const { isAuthenticated, getAccessToken } = useLogto(); const [posts, setPosts] = useState(); useEffect(() => { const fetchPosts = async () => { const response = await fetch(endpoint, { headers: { Authorization: `Bearer ${await getAccessToken(resource)}`, }, }); setPosts(response.json()); }; if (isAuthenticated) { void fetchPosts(); } }, [isAuthenticated, getAccessToken]); return ; } export default PostPage; ``` バックエンドサーバーでは、ミドルウェアを使用してアクセスされたアクセストークンからログインしたユーザーの ID をすでに抽出しています： ```jsx // auth-middleware.ts import { createRemoteJWKSet, jwtVerify } from 'jose'; //... export const verifyAuthFromRequest = async (ctx, next) => { // トークンを抽出する const token = extractBearerTokenFromHeaders(ctx.request.headers); const { payload } = await jwtVerify( token, // リクエストヘッダーから抽出された生のベアラートークン createRemoteJWKSet(new URL('https:///oidc/jwks')), // Logto サーバーから取得した jwks_uri を使用して jwks を生成 { // そのトークンの発行者として期待されるもの、Logto サーバーによって発行されたものであるはずです issuer: 'https:///oidc', // そのトークンの期待されるオーディエンス、現在の API のリソース指標であるべきです。 audience: '', } ); // RBAC を使用している場合 assert(payload.scope.includes('some_scope')); // カスタムペイロードのロジック ctx.auth = { userId: payload.sub, }; return next(); }; ``` 次に、前述の `getSupabaseClient` を使用して、`userId` を付与した JWT を Supabase への後続のリクエストで使用します。または、Supabase とやり取りする必要があるリクエストに対して Supabase クライアントを作成するミドルウェアを作成することもできます： ```jsx export const withSupabaseClient = async (ctx, next) => { ctx.supabase = getSupabaseClient(ctx.auth.userId); return next(); }; ``` その後の処理フローでは、`ctx.supabase` を直接呼び出して Supabase とやり取りできます： ```jsx const fetchPosts = async (ctx) => { cosnt { data } = await ctx.supabase.from('posts').select('*'); return data; } ``` このコードでは、Supabase が以前に設定したポリシーに基づいて、現在のユーザーに属する投稿データのみを返します。 ### 従来の Web アプリ従来の Web アプリとネイティブアプリや SPA との主な違いは、従来の Web アプリが Web サーバー上で完全にページの描画と更新を行うことです。したがって、ユーザークレデンシャルは Web サーバーによって直接管理されますが、ネイティブアプリや SPA ではユーザーのデバイス上で管理されます。 Supabase で従来の Web アプリに Logto を統合する際には、バックエンドから直接ログインしたユーザーの ID を取得できます。 Next.js プロジェクトを例に取り上げ、[Next.js SDK ガイド](https://docs.logto.io/quick-starts/next-app-router/) に従ってプロジェクトに Logto を統合した後、Logto SDK を使用してユーザー情報を取得し、Supabase とのやり取りに使用する対応する JWT を生成できます。 ```jsx import { getLogtoContext } from '@logto/next-server-actions'; import { logtoConfig } from '@/logto'; import { getSupabaseClient } from '@/utils'; import PostList from './PostList'; export default async function PostPage() { const { cliams } = await getLogtoContext(logtoConfig); // `cliams` 内の `sub` 値はユーザー ID です。 const supabase = getSupabaseClient(cliams.sub); const { data: posts } = await supabase.from('posts').select('*'); return ; } ``` ### マシン・ツー・マシンアプリマシン・ツー・マシン (M2M) は、アプリケーションがリソースサーバーと直接通信する際に使用されることが多いです。例えば、毎日投稿を取得するための静的サービスなどです。 [マシン・ツー・マシン: Logto での認証](https://docs.logto.io/quick-starts/m2m/) ガイドを使用して、マシン・ツー・マシンアプリの認証を行います。Supabase とマシン・ツー・マシンアプリとの統合は、ネイティブアプリや SPA の統合（「ネイティブアプリやシングルページアプリ」セクションで説明しています）と類似しています。Logto から取得したアクセストークンを使用し、保護されたバックエンド API を通じて検証を行います。ただし、ネイティブアプリや SPA は通常、エンドユーザー向けに設計されているため、取得されたユーザー ID はユーザー自体を表していることになります。しかし、M2M アプリのアクセストークンはアプリケーション自体を表し、アクセストークンのペイロード内の `sub` フィールドは特定のユーザーではなく、M2M アプリのクライアント ID です。したがって、開発中にはどのデータが M2M アプリ用であるかを適切に区別することが重要です。さらに、特定の M2M アプリが Supabase に接続して全体のサービスを代行し、RLS 制限を回避する場合、Supabase の `service_role` シークレットを使用して Supabase クライアントを作成することができます。これにより、ユーザーごとに設定された行レベルのセキュリティポリシーに制限されることなく、すべてのデータにアクセスできるようになります。管理タスクや自動化されたタスクを実行する際に便利です。 `service_role` シークレットは、JWT シークレットと同じページで見つけることができます： Service role secret

Supabase クライアントを作成する際、この `service_role` シークレットを使用すると、このクライアントがデータベース内のすべてのデータにアクセス可能になります： ```jsx import { createClient } from '@supabase/supabase-js'; // ... const SUPABASE_SERVICE_ROLE_SCRET = process.env.SUPABASE_SERVICE_ROLE_SCRET; const client = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_SCRET, { // ...options }); ``` ## まとめこの記事では、Logto と Supabase の統合について掘り下げ、重要な洞察や統合の要点を解説しました。JWT 認証や行レベルセキュリティポリシーなどの概念を探求し、Logto を Supabase を利用したアプリケーションにシームレスに組み込むプロセスを案内しました。この知識が、アプリケーションのセキュリティや機能性を向上させるだけでなく、プロジェクトに追加の機能を拡張する自信となることを願っています。