🙆‍♀️

【開発ログ】 ページ制限とログインの仕組みを作ってみた（Next.js + Firebase）

に公開
Firebase
Next.js
ログイン
開発日記
グループフォルダ
tech

二重国籍である子供のために、両国の言語で単語を覚えられるようなアプリを作り始めました。
今日は ページ制限の方法 と ログインの流れ をまとめたので、開発日誌として記録しておきます。

📁グループフォルダ

Next.js の App Router では (public) や (protected) といった グループフォルダを使うことで、ページの種類ごとにレイアウトやルールを分けることができます。これらのフォルダ名は URL に表示されません。

  • Public

    • 誰でもアクセス可能
    • ログイン不要のページ（ホーム、ログイン、会員登録など）

  • Protected

    • セッションやログイン状態をチェックしてアクセス制限をかける
    • ログイン済みユーザーのみ利用できるページ（ダッシュボード、プロフィールなど）

ディレクトリ構成例

app/
 ├─ layout.tsx                # グローバル(フォント, Providerなど共通)
 ├─ (public)/
 │   ├─ layout.tsx            # 公開専用 (Redirectなし、シンプルヘッダーなど)
 │   ├─ page.tsx              # ホーム画面
 │   ├─ login/page.tsx
 │   └─ register/page.tsx
 └─ (protected)/
     ├─ layout.tsx            # ユーザー専用 (セッション確認+内部ナビ)
     ├─ dashboard/page.tsx
     └─ profile/page.tsx

🔑 ログインの流れ（Next.js + Firebase）

次はログインです。Firebaseでログインし、sessionCookieを生成してページ移動ができるように実現しました。

  1. Middleware

    • session クッキーの有無だけを確認
    • もし存在しなければ /login へリダイレクト
    • 逆にログイン済みで /login にアクセスしたら /dashboard へ飛ばす

  2. ログインページ

    • Firebase Auth でログイン
    • idToken を取得

  3. セッション発行 API

    • idToken をサーバーに送信
    • createSessionCookie でセッションを生成
    • httpOnly クッキーとして保存

  4. Protected Layout

    • cookies().get("session") でクッキーを取得
    • verifySessionCookie で検証
    • 失敗したら /login にリダイレクト
    • 成功したら保護ページを表示
  • Middleware → 軽量チェック（有無だけ）
  • API → セッション生成
  • Protected Layout → 本格的な検証

この流れにすることで、「未ログインなら即リダイレクト」「ログイン済みなら保護ページへ」というスムーズな UX を実現できる。

まとめ

今日は「ページを Public / Protected に分ける方法」と「Firebase ログイン〜セッション管理」の実装を進めました。
これで最低限のアクセス制御が整ったので、次はプロフィールページを書いていこうと思います！

Discussion