ログイン機能の作り方｜Supabase + Next.jsで30分で実装

この記事の要点 Supabaseを使えば、非エンジニアでもAIに指示するだけでログイン機能が実装できます。所要時間は約30分。

この機能で何ができるか

ユーザーがメールアドレスとパスワードでログインできる機能を実装します。

これにより、ユーザーごとのデータ管理やパーソナライズされた体験を提供できます。

完成イメージ:

• ログイン/サインアップフォーム
• ログイン状態の維持
• ログアウト機能

想定読者

対象	説明
非エンジニア	コードは書けないけど、AIを使って実装したい人
個人開発者	最小工数で認証機能を追加したい人
バイブコーダー	AIに指示を出して開発を進めている人

使用する技術

技術	役割	料金
Supabase	認証バックエンド	無料枠あり
Next.js	フロントエンド	無料
Tailwind CSS	スタイリング	無料

なぜSupabaseを選ぶのか？ Firebase等より設定が簡単で、日本語ドキュメントも充実しています。無料枠で月5万アクティブユーザーまで対応できます。

全体設計

認証の流れを図で理解しましょう：

[ユーザー] → [ログインフォーム] → [Supabase Auth]
                                      ↓
                               [セッション発行]
                                      ↓
                              [認証済みページへ]

実装ステップ

1. Supabaseプロジェクトを作成

まずはSupabaseでプロジェクトを作成します。

AIへの指示例：

Supabaseでプロジェクトを作成して、
認証機能を有効化する手順を教えて

2. 環境変数を設定

プロジェクトの認証情報を設定します。

NEXT_PUBLIC_SUPABASE_URL=あなたのURL
NEXT_PUBLIC_SUPABASE_ANON_KEY=あなたのキー

注意: これらの値はSupabaseダッシュボードの「Settings > API」から取得できます。

3. ログインフォームを作成

フォームのUIとロジックを実装します。

AIへの指示例：

Supabase Authを使ったログインフォームを作成して。
- メールアドレスとパスワードでログインできるようにして
- エラー時はメッセージを表示して
- ローディング状態も表示して

4. 認証状態の確認

ログイン済みユーザーのみがアクセスできるページを作ります。

AIへの指示例：

ログイン済みかどうかを確認して、
未ログインならログインページにリダイレクトする
ミドルウェアを作成して

テスト観点

実装後、以下を必ず確認しましょう：

• 正しいメールアドレス・パスワードでログインできる
• 間違った情報ではエラーメッセージが表示される
• ログイン後、リロードしてもログイン状態が保持される
• ログアウトボタンでログアウトできる

よくある詰まりポイント

環境変数が読み込まれない

症状: Supabase URL is required というエラーが出る

解決策:

1. .env.local ファイルがプロジェクトのルートにあるか確認
2. 変数名に NEXT_PUBLIC_ プレフィックスがついているか確認
3. 開発サーバーを再起動する

セッションが保持されない

症状: ページをリロードするとログアウトされてしまう

解決策: AIに以下のように指示してください：

Supabaseのセッション管理を
クッキーベースに変更して、
リロードしても維持されるようにして

リダイレクトループ

症状: ログインページが無限ループして表示されない

解決策: ミドルウェアでログインページ自体を認証チェックから除外しているか確認してください。

代替サービス

Supabase以外の選択肢も紹介します：

サービス	特徴	おすすめシーン
Firebase Auth	Google連携が簡単	Google系サービス連携時
Auth0	高セキュリティ	企業向けアプリ
Clerk	UI込みで提供	最速で実装したい時

次にやるべきこと

ログイン機能ができたら、次のステップへ進みましょう：

1. ユーザープロフィール機能 を追加する
2. 決済機能 と連携する
3. 作ったサービスを Xで集客 する

---

💡 ヒント: 詰まったらAIに「〇〇というエラーが出ている。原因と解決策を教えて」と伝えると、具体的な解決策を教えてくれます。