%3Cbr%3Emicomia株式会社の井上です。今回はAuth系について解説していきます。初心者にもわかりやすく解説していくのでぜひご一読ください。%3Cbr%3E%3Cbr%3E1. Auth系とはAuthとは、新規登録(Create Account)やログイン(Login)、アカウント削除(Delete Account)に関するものを指します。%3Cbr%3E%3Cbr%3E%3Cbr%3E2. Auth系の実装方法まず、Auth系の実装には基本的にTextFieldが2つとButtonが必要なのでそれらを実装します。TextFieldとButtonの実装に関しては別の記事で詳しく紹介しているのでぜひそちらをご覧ください。Text Fieldとは？｜初心者向けのFlutterFlow徹底解説Buttonとは？｜初心者向けのFlutterFlow徹底解説%3Cbr%3E%3Cbr%3Eまずは新規登録から実装していきます。%3Cbr%3E%3Cbr%3E%3Cbr%3E2-1. 新規登録の実装方法ButtonにActionを追加します。新規登録はCreate AccountというActionになっているのでAdd ActionでFirebase AuthenticationのCreate Accountを追加します。%3Cbr%3E%3Cbr%3E今回はメールアドレスをパスワードでアカウント作成できるようにしたいのでAuth ProviderはEmailに設定します。%3Cbr%3E%3Cbr%3EEmail Fieldはメールアドレスを入力する方のText Fieldを指定します。今回はText Field1を選択します。もう一つのText Fieldはパスワード入力欄にしたいのでText Fieldの設定でPassword FieldをONにします。%3Cbr%3E%3Cbr%3E先ほどのCreate Accountを実装しているButtonのAction設定に戻って、Password FieldのところにPassword Field 1を設定します。その下のConfirm Password Fieldは確認のためにパスワードを再度入力してもらうためのものです。こちらを追加したい場合はText Fieldをもう一つ追加して先ほどと同じようにPassword FieldをONにします。その後、Create AccountのAction設定に戻って、Confirm Password FieldのところにText Fieldを設定します。%3Cbr%3E%3Cbr%3Eこれで、ユーザードキュメントが自動で作成されます。今回はメールアドレスとパスワードのみなので自動で格納されますが、さらにユーザーネームなどを入れたい場合はもう一つText Fieldを増やして、Created DocumentにあるSet FieldsでAdd Fieldから設定します。usersコレクションに入れているユーザーネームを格納するフィールド(今回はdisplay_name)を選択し、Widget Stateから先ほど追加したText Fieldを選択します。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E2-2. ログインの実装方法次にログインを実装していきます。新規登録と基本的に変わらないので2-1を理解できている方は非常にわかりやすいと思います。まずButtonのActionとしてFirebase AuthenticationのLog Inを選択します。%3Cbr%3E%3Cbr%3EAuth Provider新規登録と同じくメールアドレス(Email)で設定します。%3Cbr%3E%3Cbr%3EEmail FieldはText Field1、Password FieldはPassword Field 1で設定します。%3Cbr%3E%3Cbr%3Eこれでログインすることができます。ログインできなかった場合は自動的にエラー分が表示されます。%3Cbr%3E%3Cbr%3E%3Cbr%3E2-3. Delete Accountの実装方法次にDelete Account(アカウント削除)を実装していきます。アカウント削除にメールアドレスとパスワードは不要ですが、このボタンを押したときにアカウント削除がされるとします。Firebase AuthenticationのDelete Userを選択します。%3Cbr%3E%3Cbr%3Eこれでアカウントが削除されます。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E3. さいごに今回はAuth系について解説していきました。Auth系はアプリを作る上で欠かせない処理になっているのでぜひ本記事を参考にしながら実装してみてください。本記事の内容を動画で見たい方は以下をご覧ください。%3Cbr%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FcV5GC0FKCVg%3Fsi%3DteiHuA_DkYfM-a9n%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3E%3C%2Fiframe%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E