LIFF認証で悩まないために 〜Auth.js × Supabase構成のリアル〜

LINE LIFF × App Router × Supabase 認証の課題と解決法を解説！

このスライドでは、App RouterのServer ComponentとLINE LIFFの相性問題や、LIFF × Supabaseの認証連携の難しさにフォーカスし、その解決策としてLIFFのIDトークンをAuth.jsに詰め替える実装方法を詳しく紹介しています。

Firebaseへのトークン詰め替え手法は知られていても、Auth.jsへの詰め替え手法はまだサンプルが出回っていません。本資料ではその空白を埋めるべく、実装ステップや注意点をステップバイステップで解説しています。

さらに、LINE LIFF認証の基礎から丁寧に解説しているため、これからLIFFアプリを作りたいと考えている方にもおすすめの内容です。

Transcript

1. LIFF 認証で悩まないために。 〜Auth.js × Supabase 構成のリアル〜 たけし zenn : https://zenn.dev/take4/articles/679d4ced100e7a 1
2. 自己紹介 名前 : たけし マナリンクの Web エンジニア 趣味 筋トレ 個人開発 動物園めぐり 2
3. エペタム API でゲームの結果を取得 URL で大会結果を共有 3 年前にリリース 3
4. ジムトモ 友達とグループを作成でき る 週の目標達成状況をLINE で 通知 ジムの半径100m 以内でのみ 記録可 https://zenn.dev/take4/article s/679d4ced100e7a 4
5. ジムトモの技術スタック カテゴリ 技術 フレームワーク Next.js(App Router) 認証 LINE LIFF,Auth.js UI ライブラリ shadcn/ui データベース・ORM Supabase,Prisma インフラ Vercel 5
6. LINE LIFF の紹介 6
7. LINE LIFF とは？ LINE 上で動作する Web アプリケーション 公式アカウントのリッチメニューから開く ログインが不要 LINE の通知機能を利用できる 7
8. ログイン不要とは？ 8
9. Google ログインの例 9
10. LINE LIFF 10
11. 2. LIFF 認証を“ 普段どおり” に扱うには？ Auth.js への統合 https://developers.line.biz/ja/docs/liff/using-user-profile/ 11
12. LINE Server ジムトモ Server ジムトモ (LINE) LINE Server ジムトモ Server ジムトモ (LINE) これ以降が疑問🤔 liff.init() ID token POST /oauth2/v2.1/verify 200 OK 12
13. 疑問・要望 トークンのライフサイクルを自分で設定したい Server Component でユーザー情報を取得したい リクエスト毎に LINE の検証エンドポイント叩く？ 認証状態を取得する 便利な hooks / 関数 を使いたい useSession() , getServerSession() など → そもそも普段、Twitter やGoogle 認証を使ってて、こんなに悩まさ れたことなくね？(LIFF も認証フレームワークに統合したい) 13
14. Google や Twitter 認証を使うとき 14
15. 認証フレームワークに統合させよう ユーザー 認証フレームワーク (Auth.js など) Twitter Google 独⾃トークン作成機能 ⾮公式Provider (LINE LIFF 等) 15
16. 認証フレームワークの選定 認証基盤 LIFF 独自トークン作成 Supabase Auth Firebase Auth Custom Token Auth.js Credential Provider → Auth.js は薄い&Server Component とも相性よいので採用 16
17. LINE Server ジムトモ Server + Auth.js ジムトモ (LINE) LINE Server ジムトモ Server + Auth.js ジムトモ (LINE) LIFF ID トークンを送信 ID トークンをverify 200 OK 🔑 独⾃トークンを発⾏ (Credential Provider) 独⾃トークンを返却 独⾃トークン付きリクエスト 独⾃トークンを検証 200 OK ( 認証成功) 17
18. LINE の検証 API を 2 回目以降のリクエストでは叩かなくてよい トークンのライフサイクルを自分で設定できる 認証状態を取得する 便利な hooks / 関数 を使える useSession() 、 getServerSession() など Server Component でユーザー情報を取得できる 18
19. サンプルコードはこちら 19
20. まとめ Supabase は現時点でLIFF 認証を公式サポートしていない そのため、Auth.js(NextAuth ）でカスタムトークンを発行し、サー バー側でSupabase のデータ操作を行う 将来的に以下のいずれかが公式サポートされるはず( 願望) LINE LIFF 認証プロバイダーの追加 (https://github.com/supabase/auth/issues/451#issuecomment- 2229907351) 独自トークン作成機能 20