LIFF + Next.js + Supabase Authentication Sample

このリポジトリは、LIFFアプリケーションにおけるNext.jsとSupabaseを使用した認証フローのサンプル実装です。

フルスタックテンプレート

LINE Botまで含んだfull stack templateは@https://github.com/Yongtae723/LineBot-liff-golang-nextjs-templateをご覧ください。

BlogはQiita: LIFFとNext.js, Supabaseを組み合わせるまたは、原文: LIFFとNext.js, Supabaseを組み合わせるをご覧ください。

実際の動作例は以下のLINE Botで確認できます： https://line.me/R/oaMessage/@807rpwtd

機能

✅ LINEアプリからの起動時の自動ログイン ✅ ブラウザからアクセスした際のLINEログインへの誘導 ✅ ログイン後の元のページへのリダイレクト ✅ 開発環境でのモックログイン

技術スタック

• Next.js - Reactフレームワーク
• LIFF SDK - LINE Front-end Framework
• Supabase - バックエンド・認証基盤
• TypeScript - 型安全な開発

セットアップ

1. 環境変数の設定:

cp .env.sample .env.local

以下の環境変数を設定してください：

• NEXT_PUBLIC_LIFF_ID: LIFFアプリのID
• NEXT_PUBLIC_SUPABASE_URL: SupabaseのプロジェクトURL
• NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabaseの匿名キー

2. Supabaseのセットアップ:

# Supabaseプロジェクトの起動
supabase start

# マイグレーションの実行
supabase migration up

3. 依存関係のインストール:

npm install
# or
yarn install

4. 開発サーバーの起動:

npm run dev
# or
yarn dev

ライセンス

Apache-2.0

コントリビューション

Issue、PR大歓迎です！