Contents
前提条件と準備物
| 項目 | 必要なもの |
|---|---|
| FlutterFlow アカウント | 無料プランでも認証テンプレートは利用可能です。 |
| Google アカウント | Firebase コンソールの操作に必須です。 |
| Web ブラウザ | Chrome 推奨（開発者ツールでデバッグしやすい） |
| メールアドレス | 認証テスト用に実際に受信できるものを 2 件以上用意すると便利です。 |
注: 本稿は 2024 年 11 月時点の UI と機能に基づいて記述しています。将来のバージョンで UI が変更されても、概念と手順はほぼ同様です。
FlutterFlow アカウント作成 & プロジェクトの雛形作成
1. アカウント登録
- https://flutterflow.io にアクセスし、右上の Start Free をクリック。
- 「メールアドレス + パスワード」または「Google」でサインアップ。
- 受信した確認メール内のリンクを開くと、FlutterFlow のダッシュボードが表示されます。
ポイント：無料プランでもテンプレートギャラリーや Firebase 連携機能はフルに利用できます。
2. 新規プロジェクト作成
- ダッシュボード左上の New Project → Blank App（もしくは Auth Starter）を選択。
- プロジェクト名と対象プラットフォーム（iOS / Android / Web）を入力し、Create Project をクリック。
- エディタ画面が自動的に開くので、左メニューの Templates → Authentication からテンプレートを確認できます。
ポイント：
Auth Starterテンプレートは「サインイン」「サインアップ」「パスワードリセット」の３画面があらかじめ用意されているため、最初の構築時間が大幅に短縮されます。
Firebase プロジェクトの作成と認証方式の有効化
1. Firebase コンソールでプロジェクトを作る
| 手順 | 操作内容 |
|---|---|
| ① | https://console.firebase.google.com/ にログインし、Add project をクリック。 |
| ② | プロジェクト名（例: my-auth-demo）を入力 → Continue。Analytics は不要ならオフにしても可。 |
| ③ | 作成完了後、左メニューの Project settings へ移動し、Web API Key, App ID, Project ID をコピー。 |
ポイント：FlutterFlow 側で必要になる情報は上記３項目だけです。
2. メール/パスワード認証を有効化
- コンソール左メニューの Authentication → Sign‑in method に移動。
- Email/Password 行の Enable スイッチをオンにする。
- 「Require email verification」はデフォルトでオフです。メール認証だけをすぐ試したい場合はそのままで構いませんが、実運用では有効化（チェック）しておくことを推奨します。
ポイント：設定後に必ず Save をクリックし、ステータスが Enabled になっているか確認してください。
外部リンクの検証
- Qiita 記事「FlutterFlow で認証テンプレートを使う」は、上記手順と完全に一致します。
- Spovisor の メール認証フロー 解説（https://insights.spovisor.com/mail_verification/）も同様の UI と手順を示しています。
FlutterFlow と Firebase の連携設定
1. API キー情報の貼り付け
- エディタ左上 Settings → Firebase を開く。
- 「Web API Key」「Project ID」「App ID」の各欄に、先ほどコピーした値を貼り付ける。
- 入力が完了すると自動でバリデーションが走り、エラーがなければ Save Settings をクリック。
ポイント：2024 年版 UI では入力ミスがあると即座に赤い警告が出るので、キーの形式ミスはすぐに把握できます。
2. 必要権限（Permissions）の設定
- 同じ画面下部の Permissions タブを開く。
firebase.authとcloud.firestoreの Read/Write にチェックを入れる。（Firestore はデータ保存が必要な場合だけ有効化）- 設定後、右上に表示される Connected ステータスを確認。
ポイント：権限不足は「Missing or insufficient permissions」エラーの主因です。設定忘れがないか必ずチェックしてください。
認証テンプレートの配置と UI カスタマイズ
1. テンプレートのドラッグ＆ドロップ
| 操作 | 内容 |
|---|---|
| ① | 左メニュー Templates → Authentication を開く。 |
| ② | 「Sign In」「Sign Up」「Reset Password」それぞれをキャンバスへドラッグ。 |
| ③ | テンプレート間の自動リンク（Auto‑Link）機能により、画面遷移が自動で設定される。 |
ポイント：テンプレートは Firebase の認証ウィジェットと直接紐付いているため、コードを書かずに機能します。
2. ロゴ・カラー・テキストの変更
- キャンバス上のロゴ画像をクリック → 右パネル Image タブで自社ロゴ（PNG / SVG）をアップロード。
- 同じく右パネル Theme からプライマリカラーとアクセントカラーを設定すると、ボタンや入力欄全体に反映される。
- 各 TextField の
Hint TextやLabelはプロパティで直接編集可能。変更はリアルタイムプレビューに即座に反映されます。
ポイント：デザイン調整は「Save」ボタンで保存した後、右上の Preview で確認できます。
メール認証・パスワードリセットのフロー実装
1. メール認証（Email Verification）画面
| 手順 | 内容 |
|---|---|
| ① | 「Sign Up」テンプレートに emailVerified の状態を確認する Conditional Visibility ウィジェットを追加。 |
| ② | 条件式に user.emailVerified == false を設定し、未検証時は「Verification Pending」画面を表示させる。 |
| ③ | 同画面に Resend Verification Email ボタン（Firebase の sendEmailVerification()）を配置する。 |
ポイント：条件付き表示はコード不要で実装でき、ユーザーがメール認証を完了したかどうかを UI 側で即座に判定できます。
2. パスワードリセット
- 「Reset Password」テンプレートのボタンをタップすると、Firebase が自動的にパスワード再設定用メールを送信します。
- メール本文は Firebase コンソール → Authentication → Templates でカスタマイズ可能です。
参考リンク：Spovisor の「メール認証の実装例」では、上記条件付きウィジェットと同様の構成が紹介されています。
よくあるエラーと対処法
| エラー | 主な原因 | 推奨対策 |
|---|---|---|
| Invalid API Key | キー入力ミス、旧キー使用 | Firebase Settings で再取得し正確に貼り付ける。 |
| Permission denied (auth) | firebase.auth の権限未設定、またはコンソール側の認証設定がオフ |
Permissions タブで read/write を有効化し、Authentication → Sign‑in method で Email/Password が有効か確認。 |
| Template not rendering | UI キャッシュやブラウザの古いスクリプト | エディタ右上の Refresh Preview またはブラウザキャッシュをクリアして再読み込み。 |
| Email verification email not sent | Firebase のテンプレート設定が無効、または送信制限に達している | コンソール → Authentication → Templates でメール本文と送信元ドメインを確認。 |
ポイント：エラーの多くは「設定漏れ」や「入力ミス」に起因します。変更後は必ずプレビューで動作確認し、ステータスが緑色（成功）になることを目視してください。
プレビュー・テストビルド・デプロイ手順
1. 実機相当のプレビュー
- エディタ右上 Run ボタン → 「Run Mode」へ切替。
- サインアップ > メール受信 > 認証リンククリック > サインイン の一連フローを実行し、すべてが期待通りに遷移するか確認。
2. テストビルドの生成
- プレビューで問題なければ左メニュー Deploy → Generate Test Build を選択。
- iOS と Android の両方が同時にビルドされ、完了後にダウンロードリンクが表示されるのでデバイスにインストールして最終テスト。
ポイント：テストビルドは実際の Firebase キーが埋め込まれた状態で配布できるため、本番リリース前に「端末上でメール認証が機能するか」を必ず確認してください。
3. 本番デプロイ（オプション）
- テストビルドが問題なければ Deploy → Publish から App Store / Google Play への提出手順へ進めます。
- デプロイ前に App Settings → Versioning でバージョン番号とビルド番号を更新しておくことを忘れずに。
コードエクスポートと次のステップ
| 作業 | 方法 |
|---|---|
| コード出力 | エディタ左下の Code Export → Download ZIP または GitHub 連携（リポジトリへ自動プッシュ） |
| ローカルでテスト | ダウンロードしたプロジェクトを flutter pub get 後、flutter run で実機またはエミュレータにデプロイ |
| カスタマイズ例 | - アニメーション付きのローディングスピナー - 独自 API 呼び出し（ユーザー情報取得） |
ポイント：FlutterFlow が生成したコードはすでに Firebase 認証ロジックが組み込まれています。追加機能だけを Dart で実装すれば、フルカスタムアプリへシームレスに移行できます。
まとめ
- FlutterFlow の無料プランでも認証テンプレートと Firebase 連携はすぐに利用可能。
- Firebase コンソールでメール/パスワード認証を有効化し、必要なキー情報だけを FlutterFlow に貼り付ければ接続完了。
- テンプレートのドラッグ＆ドロップ＋プロパティ編集だけで サインイン・サインアップ・リセット・メール検証 のフローが構築できる。
- エラーは「設定漏れ」や「キー入力ミス」が原因になることが多いため、プレビューとテストビルドで必ず確認。
- 完成したアプリは コードエクスポートしてローカル開発に持ち込むか、そのまま App Store / Play ストアへデプロイ可能。
これらの手順を踏めば、ノーコード初心者でも安全・迅速にメール認証付きの Flutter アプリを作成できます。ぜひ実際に試してみてください！