Figmaプラグイン(非Webページ環境)での Supabaseログイン

https://hackermeshi.com/parties/688
2025年2月5日(水) フロントエンド交流会での発表です。

Transcript

1. seanchas116 Figmaプラグイン(非Webページ環境)での Supabaseログイン フロントエンド交流会 2025/02/05
2. 自己紹介 フロントエンドメインのフリーランスエンジニア 複雑GUI(グラフィックスエディタ) AI/ML活用系など 池上 涼平 seanchas116 github.com/seanchas116 twitter.com/seanchas_t rera-inc.com
3. 開発中のFigmaプラグイン Figma内で動くAIチャット
 UIが生成できる
4. 技術構成 Figmaプラグイン Vite / React / TypeScript Supabase Anthropic API Claude 3.5 Sonnet Next.js (Vercel)
5. Figmaプラグインでの
 Supabaseログイン
6. Figmaプラグイン (Webブラウザ外) でのSupabaseログイン FigmaプラグインはFigma内で動くiframe 他のサイトの表示はできない → OAuthログインなどはブラウザに遷移して行う
7. supabase.auth.setSession const await { data, error } = supabase.auth.setSession({ access_token, refresh_token }) これならFigmaプラグイン内でも Supabaseのセッションを獲得できる
8. const token = uuidv4(); .open( ); window ` /sign-in/plugin?token= ` ${SERVER_URL} ${token} プラグインがワンタイムトークンを生成 そのトークンをクエリパラメータとして Webアプリのログイン画面を開く ワンタイムトークンの生成
9. const await await session = supabase.auth.getSession(); prisma.onetimeLoginToken.create({ : { token, : user.id, : session.access_token, : session.refresh_token, }, }); // トークンとセッション情報を紐付けて保存 data userId accessToken refreshToken ユーザーがWebアプリで Supabaseを使って認証 認証成功後、ワンタイムトークンと Supabaseのセッショントークンを紐 付けてDBに保存 ワンタイムトークンは pg_cronで定期的に削除 テーブルはフロントエンドから 直アクセスできないように (RLS無効化) Webアプリでの認証
10. プラグインでのセッション復元 const await const await await response = fetch( ); { access_token, refresh_token } = response.json(); figma.clientStorage.setAsync( , access_token); figma.clientStorage.setAsync( , refresh_token); supabase.auth.setSession({ access_token, refresh_token }); ` /api/auth/exchange-token?token= ` "supabaseAccessToken" "supabaseRefreshToken" ${SERVER_URL} ${token} // トークンをプラグインのストレージに保存 // Supabaseセッションを復元 ユーザがープラグインに戻ったら (window.onfocusで検知) ワンタイムトークンを使って セッショントークンを取得 取得したトークンを プラグインのストレージに保存 Supabaseのセッションを復元
11. 課題 アクセストークンとリフレッシュトークンをDBに保存してしまっていG ) リフレッシュトークンは元々SupabaseのDBに格納されているので大丈夫そ ) アクセストークンはすぐ有効期限切れるから大丈夫か...?
12. おまけ このスライドの詳細説明部分は Clineで作成 直接コードを読んで 内容を生成してくれました