PR #122: ログアウト機能のUI実装 by Inlet-back · Pull Request #123 · kc3hack/2026_team29

Inlet-back · 2026-02-22T01:51:49Z

作業状況メモ (2026-02-22)

完了したPR

PR #117: OAuth Cookie設定の修正

ブランチ: fix/oauth-cookie-samesite
マージ済み
変更内容:
- SameSite=None; Secure に変更（HTTPS環境）
- Render ↔ Vercel 間でのCookie送信を有効化
- OAuth state cookie と JWT access_token に適用

PR #115: デプロイ設定

ブランチ: feature/deployment-config
マージ済み
変更内容:
- vercel.json, render.yaml, DEPLOYMENT.md を追加
- デプロイ手順書を作成

進行中のPR

PR #122: ログアウト機能の完全実装 (Issue #122)

ブランチ: feature/issue-122-logout-button
push済み・マージ待ち
PR作成URL: https://github.com/kc3hack/2026_team29/pull/new/feature/issue-122-logout-button
変更内容:
- フロントエンド: AppSidebar.tsx にログアウトボタンを追加
- バックエンド: Cookie削除時のSameSite属性修正（auth.py）

コミット:

9218941 - ログアウトボタンUI実装
19c20c5 - Cookie削除時のSameSite修正

PRタイトル:

feat(dashboard): ログアウト機能の完全実装 (Issue #122)

PR本文:

## 概要

ログアウト機能を完全に実装しました（UIとバックエンドのCookie削除修正）。

## 変更内容

### フロントエンド

- `AppSidebar.tsx` にログアウトボタンを実装
- 位置: SYSTEM STATUSボックスの上
- デザイン: 赤色系ボタン（警告操作を明示）
- アイコン: 🚪（通常）/ ⏳（ローディング中）
- 機能:
  - `logout()` API呼び出し
  - 成功時: `/login` ページへリダイレクト
  - エラー時: アラート表示
  - ローディング中: ボタン無効化

### バックエンド

- **重要な修正**: Cookie削除時のSameSite属性を設定時と一致
  - `oauth_state` 削除: `SameSite=None` (HTTPS時) / `Lax` (開発環境)
  - `access_token` 削除: `SameSite=None` (HTTPS時) / `Lax` (開発環境)
- **解決する問題**:
  - ログアウトできない（Cookie削除されない）
  - 2回目以降のログインが失敗する（古いstate cookieが残る）

## テスト

- [ ] ログアウトボタンが表示される
- [ ] クリックでログアウトAPIが呼ばれる
- [ ] 成功時に `/login` に遷移する
- [ ] 再ログインが成功する
- [ ] エラー時にアラートが表示される

Closes #122

デプロイ状況

Render (バックエンド)

URL: https://team29-backend.onrender.com
状態: デプロイ済み（PR #122マージ後に再デプロイ必要）
Database: PostgreSQL作成済み

Vercel (フロントエンド)

URL: https://2026team29-git-main-uras-projects-0d510e49.vercel.app
状態: デプロイ済み

環境変数設定

✅ DATABASE_URL
✅ BACKEND_CORS_ORIGINS
✅ GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET
✅ JWT_SECRET_KEY, ENCRYPTION_KEY, ADMIN_API_KEY
✅ OPENAI_API_KEY

既知の問題

CSRF対策の不足
- 現状: SameSite=None のためCSRF攻撃に脆弱
- 対策検討中:
  - Option 1: Origin/Refererヘッダー検証（推奨）
  - Option 2: CSRFトークン実装
  - Option 3: サブドメイン統一

次のアクション

✅ PR feat: ログアウト機能のUI実装 #122（ログアウト機能完全実装）を作成
⬜ PR #122をマージ
⬜ Render再デプロイ（developブランチ）
⬜ ログアウト機能の動作確認（本番環境）
⬜ CSRF対策の実装検討（将来的な課題）

- SYSTEM STATUSの上にログアウトボタンを配置 - logout() API呼び出し後に /login へリダイレクト - ローディング状態（ボタン無効化・アイコン変更）を実装 - エラー時はアラート表示 - 赤色系のボタンデザインで警告操作を明示 Closes #122

- oauth_state削除: SameSite=None (HTTPS時) - access_token削除: SameSite=None (HTTPS時) - 2回目以降のログイン失敗とログアウト不能を修正 Issue #122

Copilot

Pull request overview

ログアウト機能を「UI（サイドバーのボタン追加）」と「バックエンド（Cookie削除時のSameSite属性を発行時と一致させる）」の両面から整備し、確実にログアウトできる状態にするPRです。

Changes:

フロントエンドのサイドバーにログアウトボタンを追加し、API呼び出し後に /login へ遷移
バックエンドで oauth_state / access_token の削除Cookieに SameSite=None（HTTPS時）を付与し、発行時と属性を一致

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
frontend/src/features/dashboard/components/AppSidebar.tsx	ログアウトボタンUIとローディング制御、ログアウト後の遷移を追加
backend/app/api/endpoints/auth.py	Cookie削除時のSameSite属性をHTTPS環境では`none`にし、発行時と揃える

Copilot · 2026-02-22T01:58:55Z

frontend/src/features/dashboard/components/AppSidebar.tsx

+        <div className="mt-auto mb-4">
+          <button
+            onClick={handleLogout}
+            disabled={isLoggingOut}
+            className={`


Logout Button のラッパーに mt-auto を付けたことで、下の System Info Box 側にも mt-auto が残っている場合、flexの自動マージンが分散して「ログアウトボタンがSYSTEM STATUSの直上に来ない／大きな余白が入る」レイアウト崩れが起きます。どちらか片方だけに mt-auto を付けるか、2つをまとめた下部コンテナ1つに mt-auto を付けてその中で縦並びにしてください。

Copilot · 2026-02-22T01:58:56Z

frontend/src/features/dashboard/components/AppSidebar.tsx

+    setIsLoggingOut(true);
+    try {
+      await logout();
+      router.push("/login");


ログアウト後の遷移が router.push("/login") だと履歴にダッシュボードが残るため、戻る操作で保護ページに戻れてしまいます（withAuth 側で弾かれるとしてもUXが悪化しやすいです）。同リポジトリ内の認証リダイレクトは router.replace("/login") を使っているので、ここも replace に揃えるのが安全です。

Suggested change

router.push("/login");

router.replace("/login");

Copilot · 2026-02-22T01:58:56Z

backend/app/api/endpoints/auth.py

    is_https = urlparse(settings.FRONTEND_URL).scheme == "https"
    redirect.delete_cookie(
        key="oauth_state",
        path="/",
        httponly=True,
        secure=is_https,
-        samesite="lax",
+        samesite="none" if is_https else "lax",
    )


oauth_state の削除Cookieに samesite を付け分ける分岐が追加されていますが、現状のテストでは SameSite=None / Secure のケース（FRONTEND_URLがhttpsのとき）を検証していません。settings.FRONTEND_URL を一時的に https に差し替えるテストを追加し、Set-Cookie に samesite=none と secure が含まれることを確認できるようにしてください。

Copilot · 2026-02-22T01:58:56Z

backend/app/api/endpoints/auth.py

        path="/",
        httponly=True,
        secure=is_https,
-        samesite="lax",
+        samesite="none" if is_https else "lax",
    )


ログアウトの delete_cookie で samesite="none" if is_https else "lax" に変更されていますが、既存テストはCookieが消えること（max-age=0等）しか見ておらず、今回の修正目的である「属性一致（SameSite/Secure）により本番で確実に削除できる」ことを担保できません。FRONTEND_URLをhttpsにした場合のSet-Cookieヘッダーに samesite=none と secure が出ることを追加でアサートしてください。

@copilot open a new pull request to apply changes based on this feedback

Copilot · 2026-02-22T02:00:38Z

@Inlet-back I've opened a new pull request, #124, to work on those changes. Once the pull request is ready, I'll request review from you.

- FRONTEND_URLがHTTPSの場合、Set-Cookieヘッダーに samesite=none と secure が含まれることをテスト - Cookie削除時は設定時と同じ属性が必要（ブラウザ仕様） - 本番環境で確実にCookie削除されることを担保

Inlet-back added 2 commits February 22, 2026 10:43

fix(auth): Cookie削除時のSameSite属性を設定時と一致

19c20c5

- oauth_state削除: SameSite=None (HTTPS時) - access_token削除: SameSite=None (HTTPS時) - 2回目以降のログイン失敗とログアウト不能を修正 Issue #122

Inlet-back requested a review from Copilot February 22, 2026 01:55

Copilot started reviewing on behalf of Inlet-back February 22, 2026 01:55 View session

Copilot AI reviewed Feb 22, 2026

View reviewed changes

Copilot AI mentioned this pull request Feb 22, 2026

test(auth): ログアウトCookie削除時のSameSite/Secure属性テストを追加 #124

Closed

Inlet-back merged commit 1686d28 into develop Feb 22, 2026
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PR #122: ログアウト機能のUI実装#123

PR #122: ログアウト機能のUI実装#123
Inlet-back merged 3 commits intodevelopfrom
feature/issue-122-logout-button

Inlet-back commented Feb 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Copilot AI Feb 22, 2026

Uh oh!

Inlet-back Feb 22, 2026

Uh oh!

Copilot AI commented Feb 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Inlet-back commented Feb 22, 2026

作業状況メモ (2026-02-22)

完了したPR

PR #117: OAuth Cookie設定の修正

PR #115: デプロイ設定

進行中のPR

PR #122: ログアウト機能の完全実装 (Issue #122)

デプロイ状況

Render (バックエンド)

Vercel (フロントエンド)

環境変数設定

既知の問題

次のアクション

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Inlet-back Feb 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Feb 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants