🔐 ログイン状態の保存方法を切り替えたら、ログアウトできなくなった話

こんにちは。今日は、学習アプリ「Lernova」の開発中に遭遇した、「ログイン状態の保持」を柔軟にしたことでログアウトに不具合が出た話を共有したいと思います。

🎯 背景：ログイン保持を選べるようにした

もともと、「ログイン状態を保持する／しない」をユーザーが選べるようにしたいと思い、次のような方針で実装を進めました。

❌ 想定外：ログアウトしても情報が消えない

ここまではうまく動作していたのですが、あるとき気づきました。

「あれ？ログアウトしてもユーザー情報が残っている…？」

特に sessionStorage を使っているはずのユーザーで、ブラウザを再起動してもログイン状態が続いている現象が発生しました。

🧩 原因：ログアウト時の処理が不完全だった

原因は単純でした。

• supabase.auth.signOut() だけを実行していて、

• localStorage / sessionStorage の persistLogin フラグを削除していなかったのです。

そのため、セッションの終了とフロントエンドの状態の不一致が起き、ユーザー情報が SWR のキャッシュに残ってしまっていたのです。

✅ 対応：ログアウト処理を強化

以下のように、ログアウト時の処理を見直しました。

await supabase.auth.signOut();
localStorage.removeItem("persistLogin");
sessionStorage.removeItem("persistLogin");
mutate("supabase-session", null);
mutate(`user-${userId}`, null);

また、useSession() フック内でも persistLogin の状態を見て制御するように整理しました。

💡 学び：状態を分岐させるなら、解除も忘れずに

状態を柔軟に切り替える機能を実装したら、「解除のパターン」も同様に柔軟に設計しなければならないという教訓を得ました。

状態を分けるなら、状態の終了処理（クリーンアップ）も分けておくべき。

特にセッション管理はセキュリティにも関わる部分なので、漏れがあるとリスクも高くなります。

🚀 今後に向けて

• ログイン状態を persistLogin によって判断するベストプラクティスをプロジェクトにまとめる

• SWR の fallbackData を活用し、より高速にセッション／学習記録を表示する体制へ

• テストコードによる状態確認を自動化していく