Skip to content

feat: OAuth認証エラーハンドリングUI実装(Phase 2)#359

Merged
gn-t-k merged 1 commit intomainfrom
feature/oauth-error-handling-phase2
Nov 22, 2025
Merged

feat: OAuth認証エラーハンドリングUI実装(Phase 2)#359
gn-t-k merged 1 commit intomainfrom
feature/oauth-error-handling-phase2

Conversation

@gn-t-k
Copy link
Owner

@gn-t-k gn-t-k commented Nov 22, 2025

概要

OAuth認証エラーハンドリングのPhase 2を実装しました。Phase 1(#357)で確立したエラー型定義とSentry送信ロジックをもとに、UI側のエラーハンドリングを完成させました。

申し送り書(apps/web/docs/oauth-error-handling-handoff.md)に従い、以下を実装:

  • エラーメッセージマッピング関数
  • エラー表示UIコンポーネント(ErrorAlert)
  • Google OAuth認証のServer Action化
  • SignOutButtonのエラー表示対応

この変更による影響

アプリケーションを利用するユーザーへの影響

  • Google認証時のエラー表示: Google認証でエラーが発生した際、具体的なエラーメッセージが表示されるようになります
    • 例: "googleでの認証に失敗しました。もう一度お試しください。"
    • 例: "ネットワークエラーが発生しました。接続を確認してください。"
  • サインアウト時のエラー表示: サインアウトでエラーが発生した際、エラーメッセージが表示されるようになります

開発者への影響

  • 新しいUIコンポーネント: ErrorAlertコンポーネントが追加され、他の機能でも使用可能になりました
  • Google認証のパターン変更: クライアント側の直接呼び出しからServer Action使用に変更されました

CIでチェックできなかった項目

以下のエラーケースの手動テストが必要です:

  • ネットワークエラー(Dev Toolsでネットワークをオフライン)
  • サーバーエラー(Better Authのエラーを意図的に発生)
  • セッション期限切れ
  • ユーザーによる認証キャンセル(Google OAuth画面でキャンセル)

補足

実装の詳細

エラーメッセージマッピング

  • apps/web/src/lib/format-authentication-error.ts
  • 6つのエラー型を日本語メッセージに変換

ErrorAlertコンポーネント

  • packages/react-components/src/ui/error-alert.tsx
  • tailwind-variantsでスタイリング(既存Buttonと同じ方針)

Google OAuth認証のServer Action化

  • apps/web/src/app/auth/login/_actions/sign-in-with-google.ts
  • @praha/byethrowR.try()でエラーハンドリング
  • Better AuthのエラーをOAuthProviderError/NetworkErrorに分類
  • Sentry送信(サーバー系エラーのみ)

関連

## 実装内容

### エラーメッセージマッピング
- apps/web/src/lib/format-authentication-error.ts を作成
- 6つのエラー型を日本語メッセージに変換

### エラー表示UIコンポーネント
- packages/react-components/src/ui/error-alert.tsx を作成
- tailwind-variantsでスタイリング(既存Buttonと同じ方針)
- packages/react-components/src/ui/index.ts にエクスポート追加

### Google OAuth認証のServer Action化
- apps/web/src/app/auth/login/_actions/sign-in-with-google.ts を作成
  - auth.api.signInSocialを使用したServer Action実装
  - @praha/byethrowのR.try()でエラーハンドリング
  - Better AuthのエラーをOAuthProviderError/NetworkErrorに分類
  - Sentry送信
- apps/web/src/app/auth/login/_components/google-sign-in-button.tsx を更新
  - クライアント側の直接呼び出しからServer Action使用に変更
  - useActionStateでエラーハンドリング
  - ErrorAlertでエラー表示

### SignOutButtonのエラー表示対応
- apps/web/src/app/dashboard/_components/sign-out-button.tsx を更新
  - ErrorAlertを追加してエラーメッセージ表示

## 関連

- Phase 1実装: #357
- 申し送り書: apps/web/docs/oauth-error-handling-handoff.md

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions
Copy link
Contributor

🚀 Preview Environment Ready

✅ プレビュー環境のセットアップが完了しました!

🗄️ Database

Name: preview-pr359-auth
URL:

🌐 Deployment

Preview URL: https://next-lift-dv9ni2r9q-gntks-projects.vercel.app

⚠️ このデータベースとデプロイメントはPRがクローズされると自動的に削除されます。

@gn-t-k gn-t-k merged commit 91fb95e into main Nov 22, 2025
5 checks passed
@gn-t-k gn-t-k deleted the feature/oauth-error-handling-phase2 branch November 22, 2025 22:58
@github-actions
Copy link
Contributor

🗑️ Preview Environment Cleaned Up

✅ プレビュー環境をクリーンアップしました!

Database Name: preview-pr359-auth

PRがクローズされたため、関連するデータベースとVercel環境変数を自動的に削除しました。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant