【完全ガイド】DatabuttonでUserGuardを設定する方法
DatabuttonでWebアプリを開発していると、「このページにはログインユーザーだけアクセスさせたい！」という場面が出てきますよね。
この記事では、DatabuttonでUserGuardを設定する方法を初心者にもわかりやすく、ステップバイステップで解説します。
✅ UserGuardとは？
UserGuardとは、認証されたユーザーだけに特定のページを表示する仕組みのことです。
Databuttonでは、各ページごとにこの設定が可能で、UI上から簡単に制御できます。
🚀 事前準備
以下の前提で進めます：
- Databuttonでアプリを作成済み
- Firebase認証 or Databutton標準の認証機能を有効化済み
- 認証が必要なページをすでに作成済み（例：
Dashboard.tsx）
🛠️ UserGuardを有効化する手順
1. 対象ページを開く
Databuttonのエディタ左メニューから
Pages → 対象ページ（例: Dashboard） をクリック。
2. 🔐 シールドアイコンを探す
ページ名の横にある 盾（🛡️）のアイコンを確認します。
これはUserGuardの設定アイコンです。
3. 認証を有効にする
盾アイコンのメニューをクリックし、
「Enable auth（またはDisable authをOFFに）」 を選択します。
✅ これでこのページはログインしていないとアクセスできなくなります。
🔓 特定ページだけ認証を無効にする方法
一部のページ（例：/public-dashboard）を誰でも見られるようにしたい場合は、以下のように設定します：
- 同様にページ名横の盾アイコンをクリック
- メニューから
Disable authを選択 - 認証なしでそのページがアクセス可能になります
🧪 動作確認
- アプリをプレビュー
- ログアウト状態で
/dashboardにアクセスすると/loginにリダイレクトされる - ログインすると
Dashboardにアクセス可能になる
📝 補足：ログイン後にリダイレクトさせるには？
UserGuardは自動的にログイン後、元のページに戻してくれるように
/login?next=/目的のパス を使っています。
ログインページの処理で next を読み取り、遷移するようにしましょう。
✅ まとめ
| 機能 | 設定方法 |
|---|---|
| ページに認証をかける | 盾アイコン → Enable Auth |
| 誰でも見られるページにする | 盾アイコン → Disable Auth |
| ログイン後に戻る設定 | 自動で next パラメータがつく仕組み |
🧠 おまけ：UserGuardなしでも制御したいときは？
もしカスタムの認証ロジックを使いたいなら、useCurrentUser() や AuthStatusProvider を使って
user === null のときに <Navigate to="/login" /> などで制御することも可能です。
以上、DatabuttonでUserGuardを設定する方法の完全ガイドでした！
認証管理はアプリの信頼性にも関わる大切なポイントなので、しっかり設定していきましょう。