Slide 1

Slide 1 text

seanchas116 Figmaプラグイン(非Webページ環境)での Supabaseログイン フロントエンド交流会 2025/02/05

Slide 2

Slide 2 text

自己紹介 フロントエンドメインのフリーランスエンジニア 複雑GUI(グラフィックスエディタ) AI/ML活用系など 池上 涼平 seanchas116 github.com/seanchas116 twitter.com/seanchas_t rera-inc.com

Slide 3

Slide 3 text

開発中のFigmaプラグイン Figma内で動くAIチャット
 UIが生成できる

Slide 4

Slide 4 text

技術構成 Figmaプラグイン Vite / React / TypeScript Supabase Anthropic API Claude 3.5 Sonnet Next.js (Vercel)

Slide 5

Slide 5 text

Figmaプラグインでの
 Supabaseログイン

Slide 6

Slide 6 text

Figmaプラグイン (Webブラウザ外) でのSupabaseログイン FigmaプラグインはFigma内で動くiframe 他のサイトの表示はできない → OAuthログインなどはブラウザに遷移して行う

Slide 7

Slide 7 text

supabase.auth.setSession const await { data, error } = supabase.auth.setSession({ access_token, refresh_token }) これならFigmaプラグイン内でも Supabaseのセッションを獲得できる

Slide 8

Slide 8 text

const token = uuidv4(); .open( ); window ` /sign-in/plugin?token= ` ${SERVER_URL} ${token} プラグインがワンタイムトークンを生成 そのトークンをクエリパラメータとして Webアプリのログイン画面を開く ワンタイムトークンの生成

Slide 9

Slide 9 text

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アプリでの認証

Slide 10

Slide 10 text

プラグインでのセッション復元 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のセッションを復元

Slide 11

Slide 11 text

課題 アクセストークンとリフレッシュトークンをDBに保存してしまっていG ) リフレッシュトークンは元々SupabaseのDBに格納されているので大丈夫そ ) アクセストークンはすぐ有効期限切れるから大丈夫か...?

Slide 12

Slide 12 text

おまけ このスライドの詳細説明部分は Clineで作成 直接コードを読んで 内容を生成してくれました