🔐 ログイン状態の保持をユーザーが選べるようにした話【Lernova 開発記】

Lernova では、ユーザーが「ログイン状態を保持するかどうか」をチェックボックスで選択できるようにしました。
今回はその設計背景と実装内容、そしてセキュリティに関する考慮点についてまとめます。

✅ なぜログイン状態を保持するのか？

アプリを継続的に使ってもらうには「手間なくログインできること」が重要です。
ただし、常にログイン状態を維持するのはセキュリティ上リスクがあるため、ユーザー自身に保持の可否を選んでもらう形にしました。

🔧 実装のポイント

1. チェックボックスの追加

ログインフォームに以下のようなチェックボックスを追加しました：

<input
  type="checkbox"
  id="rememberMe"
  checked={rememberMe}
  onChange={() => setRememberMe((prev) => !prev)}
/>
<label htmlFor="rememberMe">
  ログイン状態を保持する（localStorage）
</label>

2. ログイン処理にフラグ保存を組み込み

選択された値に応じて、localStorage または sessionStorage に状態を保存します：

if (rememberMe) {
  localStorage.setItem("persistLogin", "true");
  sessionStorage.removeItem("persistLogin");
} else {
  sessionStorage.setItem("persistLogin", "false");
  localStorage.removeItem("persistLogin");
}

🔒 セキュリティへの配慮

ログイン保持は便利ですが、共有端末での利用やスクリプト攻撃（XSS）などのリスクもあります。
そのため、以下の方針で実装しています：

🌱 今後の展望

現在はログイン保持フラグをストレージに保存するだけの実装ですが、以下のような拡張も予定しています：

• Supabase クライアントの persistSession と連携（ログイン状態の自動復元）

• ログイン時にストレージからフラグを参照し、初期値を反映

• ユーザー設定として保持オプションを変更できる UI の追加

💬 まとめ

ログイン状態の保持は、利便性とセキュリティのバランスが問われる機能です。
Lernova では、**「ユーザーが自分で選べるようにする」**というシンプルで安全なアプローチを採用しました。

こうした細やかな体験の積み重ねが、使いやすいアプリにつながっていくと信じています。