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
33
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
970
FigmaからTailwind HTMLを 生成するプラグインの開発
seanchas116
5
4.2k
Web Componentsを作れる デザインツールの開発
seanchas116
0
820
RubyとQML/Qt Quickで デスクトップアプリを 書けるようにした
seanchas116
0
1.2k
C++視点からのRuby紹介
seanchas116
0
400
Other Decks in Programming
See All in Programming
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.3k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
240
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
860
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
190
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
270
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
Unity Android XR入門
sakutama_11
0
180
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
140
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
16
3.6k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualization
eitanlees
146
15k
Designing Experiences People Love
moore
140
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
Become a Pro
speakerdeck
PRO
26
5.2k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
A better future with KSS
kneath
238
17k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Cult of Friendly URLs
andyhume
78
6.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Why Our Code Smells
bkeepers
PRO
336
57k
Writing Fast Ruby
sferik
628
61k
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で作成 直接コードを読んで 内容を生成してくれました