はじめに

今回はFlutterFlowとFirebaseを使って認証画面を作成する方法をステップバイステップで説明します。FlutterFlowは、コードを書く必要なく、視覚的に操作できるUIデザインツールです。そのため、初心者でも簡単に認証画面を作成することができます！

FlutterFlow概要

FlutterFlowは、ユーザーが視覚的なインターフェースを使用してモバイルアプリケーションを開発できるドラッグアンドドロップのWebベースのIDE（統合開発環境）です。Flutterフレームワークをベースにしており、主にFlutterアプリのプロトタイピングや開発を迅速かつ簡単に行うことができます。プログラミングの経験が少ないユーザーや、開発時間を短縮したい経験豊富な開発者にも適しています。

FirebaseとFirebase Authentication概要

Firebaseはアプリ開発を支援するためのGoogleのプラットフォームです。リアルタイムデータベース、認証、アナリティクス、ファイルストレージなど、多様な機能を提供しており、開発者が効率的にアプリケーションを構築し運用を楽にしてくれます。
Firebase Authenticationはその名の通りFirebaseの一部であり、さまざまな認証方法をサポートしています。以下はFirebase Authenticationの主な特徴です。

多様な認証オプション: メールアドレスとパスワード、電話番号認証、そしてGoogle、Facebook、Twitter、GitHubなどのソーシャルメディアアカウントを使用したログインが可能です。また、匿名認証もサポートしており、ユーザーがアカウントを作成せずにアプリを試すことができます。
統合と拡張性: 他のFirebaseサービスやGoogle Cloud Platformとシームレスに統合されており、アプリの拡張に伴い他の機能と連携しやすい設計になっています。
カスタム認証システムのサポート: 既存の認証システムと連携するためのカスタム認証トークンを生成する機能も提供しています。これにより、特定の認証要件に合わせた柔軟な認証フローを実装することが可能です。
セキュリティとコンプライアンス: 業界標準のセキュリティプロトコルを使用しており、ユーザーデータの安全を保つための強固なセキュリティ対策が施されています。
ユーザー管理: Firebaseのコンソールを通じて、ユーザー情報の管理やアクセス権の調整が簡単にできます。開発者はユーザーのログイン方法、アクティビティ、アクセス権限などを詳細に管理することができます。
クライアントライブラリとSDK: iOS、Android、Webアプリケーション向けに提供されるSDKを通じて、認証機能をアプリに簡単に組み込むことができます。

前提

FlutterFlow、Firebaseはそれぞれ利用できる状態であることが前提です。

今回のやること概要

今回の流れはざっくり以下のような感じです。

FlutterFlowプロジェクトの作成
Firebaseプロジェクトの作成
Firebase Authenticationの認証設定(Firebase Storageの設定も含む)
FlutterFlowで認証画面を作る

FlutterFlowで新規プロジェクトを作成する

画面右上の「+ Create New」ボタンをクリック。

任意のプロジェクト名を入力して、「Create Blank」をクリック。

Setup FirebaseをONにして「Next Step」をクリック。

「Create Project」をクリックすることで、Firebaseのプロジェクトをここで追加できます。便利ですね。
（既存のプロジェクトを利用する場合、Enter your Firebase Project ID...に既存のプロジェクトIDを入力してConnectしましょう！）

Firebaseのプロジェクト名、リージョン選択をしてFirebaseのプロジェクトを作るGoogleアカウントでSign inします。

しばらくすると、Firebaseプロジェクトが作られます。

Firebaseで認証設定

次にFirebaseで認証設定をするため、「Enable Auth On Firebase」をクリックしてください。

「始める」をクリック。

Firebaseは色々と認証機能を提供してくれていますが、今回はシンプルにメアドとパスワード、Googleでの会員登録とログインの実装にします。

メール/パスワードの認証を設定

まずは「メール/パスワード」をクリック。

有効にして「保存」をクリック。

これでメアドとパスワードの設定は完了したので、Googleも追加しましょう。

Googleの認証を設定

「新しいプロバイダを追加」をクリック。

「Google」をクリック。

Googleを有効にして、プロジェクトの公開名、サポートメールを設定して、「保存」をクリック。

Firebase Storageの設定

次にFirebase Storageの設定です。

「始める」をクリック。

今回はFlutter Flowでお試しするだけなので、「テストモードで開始する」を選択して「次へ」をクリック。

「完了」をクリック。
以上でStorageの設定は完了です。

認証画面を作る

いよいよFlutter Flowでの作業です！
まずは「Start Building」をクリックしてプロジェクトセットアップを完了しましょう。

いよいよそれっぽい画面が表示されます！
いきなり警告やエラーのような表示があり、色々気になるボタンはありますが、一旦我慢して画面を作りましょう！

画面左側のサイドメニューの右上のアイコンをクリック。

プロジェクトエクスプローラーみたいな表示になった後、画面左側のサイドメニューの右上のアイコンをクリック。

色々な画面テンプレートが用意されていてすごいですねー。
一旦適当にAuth2を選んでみます。

「Default Theme」をクリック。

今回はお試しなのでデフォルトのページ名のままで「Create Page」をクリック。

これで画面ができてしまいました。めちゃくちゃ早いですね！

今回Appleは対応してないので、ボタンを消しましょう。
Continue with AppleをクリックしてDeleteキーで消します。

Log In側も同様にAppleを消します。

メール/パスワードの認証処理の設定

認証処理の実装ではなく、設定。というのがいいですね。

画面左側のアイコンをクリック、「Authentication」をクリック。

警告が出ているので、クリックしてFirebase設定を終わらせます。

「Auto Generate Config Files」をクリック。

「Generate Files」をクリックして完了です。

次にStorageの「Deploy」をクリック。

画面左側のFirestoreアイコンをクリック。

今回はお試しなので、Deleteのところに対して警告が出ているところだけ対応しちゃいます。Deleteのところを「No One」に変更。

Firestore Rulesの「Deploy」をクリックしてFirestoreの設定が完了です。

では、Authenticationに戻って、Entry PageとLogged In Pageを設定します。
Entry Pageに追加したAuth2を、ログイン後の画面としてHomePageを設定します。

認証後の画面をちょっとだけ修正

認証後の画面に認証されたということが分かるように何かしらの認証後の情報を表示して、ログアウトボタンもつけておきましょう。
まずはデフォルトで用意された画面を開きます。

次にWidgetパレットをクリック。

テキストを画面の適当なところにD&Dします。

ちょっと細かいところですが、画面右側のTextの設定のスクショの赤枠のところをクリック。

表示されたポップアップメニューの中の「Authenticated User」をクリック。

今回はDisplay Nameを表示します。

次にログアウトボタンを追加します。
画面左側のWidgetからButtonを画面の適当なところへ。

ボタンのテキストをログアウトにします。

次にボタンのアクションを設定します。
スクショの順番でまずはログアウトアクションを設定します。

さらにログアウト後に認証前の画面に戻すために追加のアクションを設定します。

まずは画面右側のNavigate AutomaticallyをOFFにしましょう。

画面中央に戻り、「＋」をクリックして「Add Action」をクリック。

Navigate Toの中の「Auth2」をクリック。

認証後の画面には戻したくないので、Allow Back NavigationはOFFにします。

アプリを動かす

けっこう長くなってしまいましたが、慣れるとかなりさくっと作れると思います！
画面右上のアイコンをクリックしてアプリを実行しましょう！！

しばらく待つと以下のような画面が表示されます。

メアドとパスワードで会員登録をするとFirebaseにも反映されるはずです。

まとめ

FlutterFlowを使って認証画面を作成する方法を説明しました。FlutterFlowを使うことで、コードを全く書かずに、簡単に認証画面を作成することができます。業務で使えるのか？というところは一旦おいておくとして、とりあえずなんかサクッと動くもの見たいんだよね。という時にはかなりいい感じだと思います。ぜひお試しを！

参考ドキュメント