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
56
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.4k
Web Componentsを作れる デザインツールの開発
seanchas116
0
860
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
400
Other Decks in Programming
See All in Programming
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
5つのアンチパターンから学ぶLT設計
narihara
1
170
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing for humans not robots
tammielis
253
25k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Writing Fast Ruby
sferik
628
62k
Code Review Best Practice
trishagee
69
18k
BBQ
matthewcrist
89
9.7k
KATA
mclloyd
30
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
It's Worth the Effort
3n
185
28k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
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で作成 直接コードを読んで 内容を生成してくれました