Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Figmaプラグイン(非Webページ環境)での Supabaseログイン
Search
Ryohei Ikegami
February 15, 2025
Programming
0
55
Figmaプラグイン(非Webページ環境)での Supabaseログイン
https://hackermeshi.com/parties/688
2025年2月5日(水) フロントエンド交流会での発表です。
Ryohei Ikegami
February 15, 2025
Tweet
Share
More Decks by Ryohei Ikegami
See All by Ryohei Ikegami
共同編集ドローツールの作り方
seanchas116
3
1k
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
6
4.3k
Web Componentsを作れる デザインツールの開発
seanchas116
0
850
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
400
Other Decks in Programming
See All in Programming
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
11
2.6k
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
910
エラーって何種類あるの?
kajitack
5
260
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
550
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
41
27k
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
22
6.2k
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
760
Claude Codeの使い方
ttnyt8701
1
130
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
110
A comprehensive view of refactoring
marabesi
0
970
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
260
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Scaling GitHub
holman
459
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Faster Mobile Websites
deanohume
307
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Done Done
chrislema
184
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Producing Creativity
orderedlist
PRO
346
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Transcript
seanchas116 Figmaプラグイン(非Webページ環境)での Supabaseログイン フロントエンド交流会 2025/02/05
自己紹介 フロントエンドメインのフリーランスエンジニア 複雑GUI(グラフィックスエディタ) AI/ML活用系など 池上 涼平 seanchas116 github.com/seanchas116 twitter.com/seanchas_t rera-inc.com
開発中のFigmaプラグイン Figma内で動くAIチャット UIが生成できる
技術構成 Figmaプラグイン Vite / React / TypeScript Supabase Anthropic API
Claude 3.5 Sonnet Next.js (Vercel)
Figmaプラグインでの Supabaseログイン
Figmaプラグイン (Webブラウザ外) でのSupabaseログイン FigmaプラグインはFigma内で動くiframe 他のサイトの表示はできない → OAuthログインなどはブラウザに遷移して行う
supabase.auth.setSession const await { data, error } = supabase.auth.setSession({ access_token,
refresh_token }) これならFigmaプラグイン内でも Supabaseのセッションを獲得できる
const token = uuidv4(); .open( ); window ` /sign-in/plugin?token= `
${SERVER_URL} ${token} プラグインがワンタイムトークンを生成 そのトークンをクエリパラメータとして Webアプリのログイン画面を開く ワンタイムトークンの生成
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アプリでの認証
プラグインでのセッション復元 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のセッションを復元
課題 アクセストークンとリフレッシュトークンをDBに保存してしまっていG ) リフレッシュトークンは元々SupabaseのDBに格納されているので大丈夫そ ) アクセストークンはすぐ有効期限切れるから大丈夫か...?
おまけ このスライドの詳細説明部分は Clineで作成 直接コードを読んで 内容を生成してくれました