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
63
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
870
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
410
Other Decks in Programming
See All in Programming
OSS開発者という働き方
andpad
5
1.7k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
Kiroで始めるAI-DLC
kaonash
2
580
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
280
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Swift Updates - Learn Languages 2025
koher
2
460
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
820
Rancher と Terraform
fufuhu
2
240
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
280
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Git: the NoSQL Database
bkeepers
PRO
431
66k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
A Modern Web Designer's Workflow
chriscoyier
696
190k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Adaptive Systems
keathley
43
2.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Into the Great Unknown - MozCon
thekraken
40
2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
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で作成 直接コードを読んで 内容を生成してくれました