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
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
970
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
17
5.3k
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
16
2.6k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
A designer walks into a library…
pauljervisheath
207
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Rails Girls Zürich Keynote
gr2m
95
14k
Six Lessons from altMBA
skipperchong
28
3.9k
It's Worth the Effort
3n
185
28k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Visualization
eitanlees
146
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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で作成 直接コードを読んで 内容を生成してくれました