職人専用ページを作ったら無限ログイン地獄にハマった話

やったこと

職人専用ダッシュボードにSupabase認証を実装。

要件:

• メールアドレス + パスワードでログイン
• ログイン後は専用ダッシュボードにリダイレクト
• 未ログインは戻す

---

問題発生：無限ループ

ログイン成功後、以下のループが発生：

/craftsman/login
→ /craftsman/dashboard (認証チェック)
→ /craftsman/login (なぜかリダイレクト)
→ /craftsman/dashboard
→ ... 無限ループ

---

原因

AuthContext で loading 状態を正しく管理していなかった。

Before (悪い例): ```typescript const { user } = useAuth()

if (!user) { redirect('/craftsman/login') // ← loadingの間もこれが実行される } ```

useAuth() のloading中は user が null なので、認証済みでもリダイレクトされる。

---

解決策

After (良い例): ```typescript const { user, loading } = useAuth()

if (loading) { return <div>読込中...</div> }

if (!user) { redirect('/craftsman/login') } ```

loading中は何もせず、ロード完了後に判定する。

---

学び

• 非同期処理のloading状態は必ず管理する

  • 認証、データ取得、API呼び出しすべてに適用

• リダイレクトループのデバッグ

  • Chrome DevToolsの「Preserve log」をON
  • リダイレクト履歴を追える

• ユーザー体験

  • ローディング画面は必須
  • 「何が起きているか」を明示する